feat(list): require label

src/components/List/List.stories.tsx

@@ -237,7 +237,7 @@ const ListSearchWrapper = () => {
   return (
     <>
       <SearchInput value={query} onChange={setQuery} clearButtonAriaLabel="Clear" />
-      <List shouldItemFocusBeInset listSize={filtered.length}>
+      <List aria-label="some list" shouldItemFocusBeInset listSize={filtered.length}>
         {filtered &&
           filtered.map((item, index) => (
             <ListItemBase itemIndex={index} key={item.key} isPadded>
@@ -290,7 +290,7 @@ const DynamicListWrapper = () => {
         List will update in:
         <Badge size={18} style={{ display: 'inline' }}>{`${INTERVAL_COUNT - time}`}</Badge>
       </Text>
-      <List listSize={list.length}>
+      <List aria-label="some list" listSize={list.length}>
         {list.map((item, index) => (
           <ListItemBase itemIndex={index} key={item.key} isPadded>
             {`Item ${item.data}`}
@@ -335,7 +335,7 @@ const ListWithAriaToolbarWrapper = () => {
   return (
     <>
       <ButtonPill>Before</ButtonPill>
-      <List listSize={2}>
+      <List aria-label="some list" listSize={2}>
         <ListItemBase size="auto" itemIndex={0} key={0}>
           <ListItemBaseSection position="fill">
             <Text tagName="p">List Item 0</Text>
@@ -362,7 +362,7 @@ const ListWithAriaToolbar = Template<unknown>(ListWithAriaToolbarWrapper).bind({
 const ListWithButtonsWrapper = () => {
   return (
     <>
-      <List shouldFocusOnPress listSize={3}>
+      <List aria-label="some list" shouldFocusOnPress listSize={3}>
         <ListItemBase itemIndex={0} key={0}>
           <ButtonPill>0</ButtonPill>
         </ListItemBase>
@@ -386,7 +386,7 @@ const ListWithButtons = Template<unknown>(ListWithButtonsWrapper).bind({});
 const ListWithNonFocusableChildrenWrapper = () => {
   return (
     <>
-      <List shouldFocusOnPress listSize={2}>
+      <List aria-label="some list" shouldFocusOnPress listSize={2}>
         <ListItemBase size="auto" itemIndex={0} key={0}>
           <ButtonPill data-preserve-tabindex tabIndex={-1}>
             Non-focusable button
@@ -436,6 +436,7 @@ const ListWithInitialFocusWrapper = () => {
         shouldFocusOnPress
         initialFocus={listOne ? 1 : 4}
         listSize={listOne ? 2 : 5}
+        aria-label="some list"
       >
         {contents}
       </List>
@@ -452,7 +453,7 @@ const ListWithFocusHandlingWrapper = () => {
 
   return (
     <>
-      <List listSize={3}>
+      <List aria-label="some list" listSize={3}>
         <ListItemBase
           onFocusWithin={() => {
             logMessage('on focus within');
@@ -510,7 +511,7 @@ const DynamicListWithInitialFocusWrapper = () => {
   });
 
   return (
-    <List initialFocus={numItems - 1} listSize={numItems}>
+    <List aria-label="some list" initialFocus={numItems - 1} listSize={numItems}>
       {Array.from(Array(numItems).keys()).map((index) => (
         <ListItemBase itemIndex={index} key={index}>
           {`Item ${index}`}
@@ -539,7 +540,7 @@ const DynamicListWithInitialFocusWrapper2 = () => {
   }
 
   return (
-    <List listSize={showBefore ? 6 : 5}>
+    <List aria-label="some list" listSize={showBefore ? 6 : 5}>
       {showBefore && (
         <ListItemBase itemIndex={0} key={3}>
           Item 2
@@ -585,7 +586,7 @@ const DynamicListWithInitialFocusWrapper3 = () => {
   }
 
   return (
-    <List listSize={showBefore ? 7 : 5}>
+    <List aria-label="some list" listSize={showBefore ? 7 : 5}>
       {showBefore && (
         <ListItemBase itemIndex={0} key={0}>
           Item 0
@@ -621,7 +622,7 @@ const DynamicListWithInitialFocus3 = Template<unknown>(DynamicListWithInitialFoc
 
 const SingleItemListWrapper = () => {
   return (
-    <List listSize={1}>
+    <List aria-label="some list" listSize={1}>
       <ListItemBase itemIndex={0} key={0}>
         Item 0
       </ListItemBase>
@@ -633,7 +634,7 @@ const SingleItemList = Template<unknown>(SingleItemListWrapper).bind({});
 
 const ListWithTextSelectWrapper = () => {
   return (
-    <List shouldFocusOnPress listSize={3}>
+    <List aria-label="some list" shouldFocusOnPress listSize={3}>
       <ListItemBase allowTextSelection itemIndex={0} key={0}>
         Item 0
       </ListItemBase>

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;

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<ExpectExtends<Props, { listSize: 1; 'aria-label': 'abc' }>>,
+  Expect<ExpectExtends<Props, { listSize: 1; 'aria-labelledby': 'some-id' }>>,
+  Expect<ExpectExtends<Props, { listSize: 1; 'aria-label': 'abc'; 'aria-labelledby': 'some-id' }>>,
+
+  ExpectFalse<ExpectExtends<Props, { 'aria-label': 'abc' }>>,
+  ExpectFalse<ExpectExtends<Props, { 'aria-labelledby': 'some-id' }>>,
+  ExpectFalse<ExpectExtends<Props, { 'aria-label': 'abc'; 'aria-labelledby': 'some-id' }>>,
+
+  ExpectFalse<ExpectExtends<Props, { listSize: 1 }>>,
+
+  ExpectFalse<ExpectExtends<Props, Record<string, never>>>
+];