diff --git a/src/components/List/List.stories.tsx b/src/components/List/List.stories.tsx index 561d9bb62..768e615c8 100644 --- a/src/components/List/List.stories.tsx +++ b/src/components/List/List.stories.tsx @@ -237,7 +237,7 @@ const ListSearchWrapper = () => { return ( <> - + {filtered && filtered.map((item, index) => ( @@ -290,7 +290,7 @@ const DynamicListWrapper = () => { List will update in: {`${INTERVAL_COUNT - time}`} - + {list.map((item, index) => ( {`Item ${item.data}`} @@ -335,7 +335,7 @@ const ListWithAriaToolbarWrapper = () => { return ( <> Before - + List Item 0 @@ -362,7 +362,7 @@ const ListWithAriaToolbar = Template(ListWithAriaToolbarWrapper).bind({ const ListWithButtonsWrapper = () => { return ( <> - + 0 @@ -386,7 +386,7 @@ const ListWithButtons = Template(ListWithButtonsWrapper).bind({}); const ListWithNonFocusableChildrenWrapper = () => { return ( <> - + Non-focusable button @@ -436,6 +436,7 @@ const ListWithInitialFocusWrapper = () => { shouldFocusOnPress initialFocus={listOne ? 1 : 4} listSize={listOne ? 2 : 5} + aria-label="some list" > {contents} @@ -452,7 +453,7 @@ const ListWithFocusHandlingWrapper = () => { return ( <> - + { logMessage('on focus within'); @@ -510,7 +511,7 @@ const DynamicListWithInitialFocusWrapper = () => { }); return ( - + {Array.from(Array(numItems).keys()).map((index) => ( {`Item ${index}`} @@ -539,7 +540,7 @@ const DynamicListWithInitialFocusWrapper2 = () => { } return ( - + {showBefore && ( Item 2 @@ -585,7 +586,7 @@ const DynamicListWithInitialFocusWrapper3 = () => { } return ( - + {showBefore && ( Item 0 @@ -621,7 +622,7 @@ const DynamicListWithInitialFocus3 = Template(DynamicListWithInitialFoc const SingleItemListWrapper = () => { return ( - + Item 0 @@ -633,7 +634,7 @@ const SingleItemList = Template(SingleItemListWrapper).bind({}); const ListWithTextSelectWrapper = () => { return ( - + Item 0 diff --git a/src/components/List/List.types.ts b/src/components/List/List.types.ts index 8e3b7dad5..8cfe9a3b9 100644 --- a/src/components/List/List.types.ts +++ b/src/components/List/List.types.ts @@ -1,8 +1,9 @@ import { AriaRole, CSSProperties, Dispatch, ReactNode, SetStateAction } from 'react'; +import { AriaLabelRequired } from '../../utils/a11y'; export type ListOrientation = 'horizontal' | 'vertical'; -export interface Props { +export type Props = AriaLabelRequired & { /** * Custom class for overriding this component's CSS. */ @@ -65,7 +66,7 @@ export interface Props { * The index of the item that should be focused initially */ initialFocus?: number; -} +}; export interface ListContextValue { currentFocus?: number; diff --git a/src/components/List/List.typetest.ts b/src/components/List/List.typetest.ts new file mode 100644 index 000000000..5edaf210d --- /dev/null +++ b/src/components/List/List.typetest.ts @@ -0,0 +1,17 @@ +import { Expect, ExpectExtends, ExpectFalse } from '../../utils/typetest.util'; +import { Props } from './List.types'; + +// eslint-disable-next-line @typescript-eslint/no-unused-vars +type cases = [ + Expect>, + Expect>, + Expect>, + + ExpectFalse>, + ExpectFalse>, + ExpectFalse>, + + ExpectFalse>, + + ExpectFalse>> +]; diff --git a/src/components/List/List.unit.test.tsx b/src/components/List/List.unit.test.tsx index ea4cba5ae..c149dcc4f 100644 --- a/src/components/List/List.unit.test.tsx +++ b/src/components/List/List.unit.test.tsx @@ -168,10 +168,10 @@ describe('', () => { it('should have provided aria-label when aria-label is provided', () => { expect.assertions(1); - const label = 'test'; + const label = 'abc'; const element = mount( - + ListItemBase 1 ListItemBase 2 @@ -179,7 +179,7 @@ describe('', () => { .find(List) .getDOMNode(); - expect(element.getAttribute('aria-label')).toBe('test'); + expect(element.getAttribute('aria-label')).toBe('abc'); }); it('should have provided aria-labelledby when aria-labelledby is provided', () => { @@ -207,7 +207,7 @@ describe('', () => { const { getByRole } = render( // eslint-disable-next-line jsx-a11y/no-static-element-interactions
- + ListItemBase 1 @@ -229,7 +229,7 @@ describe('', () => { const user = userEvent.setup(); const { getAllByRole } = render( - + ListItemBase 1 @@ -275,7 +275,7 @@ describe('', () => { const user = userEvent.setup(); const { getAllByRole } = render( - + ListItemBase 1 @@ -306,7 +306,7 @@ describe('', () => { const user = userEvent.setup(); const { getAllByRole } = render( - + ListItemBase 1 @@ -343,7 +343,7 @@ describe('', () => { const user = userEvent.setup(); const { getAllByRole } = render( - + ListItemBase 1 @@ -388,7 +388,7 @@ describe('', () => { const user = userEvent.setup(); const { getAllByRole } = render( - + ListItemBase 1 @@ -424,7 +424,7 @@ describe('', () => { const user = userEvent.setup(); const { getAllByRole } = render( - + @@ -494,7 +494,7 @@ describe('', () => { const user = userEvent.setup(); const { getAllByRole, findAllByText } = render( - + Menu}> @@ -534,7 +534,7 @@ describe('', () => { }; const { getAllByRole, findAllByText } = render( - + @@ -591,7 +591,7 @@ describe('', () => { > focus on 2 - +

list item 1

@@ -635,7 +635,7 @@ describe('', () => { const user = userEvent.setup(); const { getByTestId, rerender } = render( - + 0 @@ -658,7 +658,7 @@ describe('', () => { // focus should not change the current focused position rerender( - + 0 @@ -685,7 +685,7 @@ describe('', () => { const user = userEvent.setup(); const { getByTestId, rerender } = render( - + 0 @@ -701,7 +701,7 @@ describe('', () => { expect(document.body).toHaveFocus(); rerender( - + 0 @@ -726,7 +726,7 @@ describe('', () => { it('should not autofocus when a new item is added to the list', async () => { const { rerender } = render( - + 1 @@ -739,7 +739,7 @@ describe('', () => { expect(document.body).toHaveFocus(); rerender( - + 0 @@ -759,7 +759,7 @@ describe('', () => { const user = userEvent.setup(); const { getByTestId, rerender } = render( - + 0 @@ -779,7 +779,7 @@ describe('', () => { expect(getByTestId('list-item-0')).toHaveFocus(); rerender( - + 1 @@ -796,7 +796,7 @@ describe('', () => { const user = userEvent.setup(); const { getByTestId, rerender } = render( - + 0 @@ -820,7 +820,7 @@ describe('', () => { expect(getByTestId('list-item-1')).toHaveFocus(); rerender( - + 1 @@ -837,7 +837,7 @@ describe('', () => { const user = userEvent.setup(); const { getByTestId, rerender } = render( - + 0 @@ -863,7 +863,7 @@ describe('', () => { expect(getByTestId('list-item-2')).toHaveFocus(); rerender( - + 0 @@ -878,7 +878,7 @@ describe('', () => { it('should not autofocus when the last item is removed from the list', async () => { const { rerender } = render( - + 0 @@ -894,7 +894,7 @@ describe('', () => { expect(document.body).toHaveFocus(); rerender( - + 0 @@ -911,7 +911,7 @@ describe('', () => { const user = userEvent.setup(); const { getByTestId, rerender } = render( - + 0 @@ -933,7 +933,7 @@ describe('', () => { expect(getByTestId('list-item-1')).toHaveFocus(); rerender( - + 0 @@ -950,7 +950,7 @@ describe('', () => { const user = userEvent.setup(); const { getByTestId, rerender } = render( - + 1 @@ -963,7 +963,7 @@ describe('', () => { expect(document.body).toHaveFocus(); rerender( - + 0 @@ -985,7 +985,7 @@ describe('', () => { const user = userEvent.setup(); const { getByTestId } = render( - + text selection @@ -1007,7 +1007,7 @@ describe('', () => { const user = userEvent.setup(); const { getByTestId } = render( - + textselection @@ -1028,7 +1028,7 @@ describe('', () => { const user = userEvent.setup(); const { getByTestId } = render( - + text selection @@ -1057,7 +1057,7 @@ describe('', () => { const user = userEvent.setup(); const { getByTestId } = render( - + text selection @@ -1082,7 +1082,7 @@ describe('', () => { const user = userEvent.setup(); const { getByTestId } = render( - + 0 @@ -1116,7 +1116,7 @@ describe('', () => { const { getByTestId } = render( <> Before - + diff --git a/src/components/ListItemBase/ListItemBase.test.tsx b/src/components/ListItemBase/ListItemBase.test.tsx index e64613cee..c2cd58ead 100644 --- a/src/components/ListItemBase/ListItemBase.test.tsx +++ b/src/components/ListItemBase/ListItemBase.test.tsx @@ -384,7 +384,7 @@ describe('ListItemBase', () => { describe('keydown', () => { const renderWithNButtons = (n: number) => { return render( - + {n > 0 ? ( @@ -523,7 +523,7 @@ describe('ListItemBase', () => { it('should focus on press when shouldFocusOnPress is set', async () => { const { getByTestId } = render( - + 1 @@ -537,7 +537,7 @@ describe('ListItemBase', () => { it('should not focus on press with focusChild even if shouldFocusOnPress is set', async () => { const { getByTestId } = render( - + 1 @@ -553,7 +553,7 @@ describe('ListItemBase', () => { const user = userEvent.setup(); const { getByTestId } = render( - + 0 @@ -608,7 +608,7 @@ describe('ListItemBase', () => { const { getByTestId } = render( <> - + { return ( - + ); diff --git a/src/components/MeetingListItem/MeetingListItem.unit.test.tsx b/src/components/MeetingListItem/MeetingListItem.unit.test.tsx index d3f80db48..187e51002 100644 --- a/src/components/MeetingListItem/MeetingListItem.unit.test.tsx +++ b/src/components/MeetingListItem/MeetingListItem.unit.test.tsx @@ -239,7 +239,7 @@ describe('', () => { const user = userEvent.setup(); const { getByTestId } = render( - + { return ( - + ); @@ -634,7 +634,7 @@ const WithHideOnBlur = Template((args) => { hideOnBlur disableFocusLock > - + test 4 test 5 test 6 @@ -651,7 +651,7 @@ const WithHideOnBlur = Template((args) => { hideOnBlur disableFocusLock > - + test 4 test 5 test 6 diff --git a/src/components/Popover/Popover.unit.test.tsx b/src/components/Popover/Popover.unit.test.tsx index ca62e3004..97bb6ba3e 100644 --- a/src/components/Popover/Popover.unit.test.tsx +++ b/src/components/Popover/Popover.unit.test.tsx @@ -1964,7 +1964,7 @@ describe('', () => { const user = userEvent.setup(); render( - + list item content} interactive