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}>