Fix a11y issues in List examples (#33181)

microsoft · Oct 31, 2024 · 8a7c85d · 8a7c85d
1 parent 298db8f
commit 8a7c85d
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 10 deletions.
diff --git a/packages/react-components/react-list-preview/stories/src/List/ListActiveElement.stories.tsx b/packages/react-components/react-list-preview/stories/src/List/ListActiveElement.stories.tsx
@@ -62,13 +62,15 @@ export const ListActiveElement = () => {
   return (
     <div>
       <List
+        as="div"
         selectionMode="single"
         navigationMode="composite"
         selectedItems={selectedItems}
         onSelectionChange={onSelectionChange}
       >
         {items.map(({ name, avatar }) => (
           <ListItem
+            as="div"
             key={name}
             value={name}
             className={mergeClasses(classes.item, selectedItems.includes(name) && classes.itemSelected)}

diff --git a/...omponents/react-list-preview/stories/src/List/MultipleActionsDifferentPrimary.stories.tsx b/...omponents/react-list-preview/stories/src/List/MultipleActionsDifferentPrimary.stories.tsx
@@ -80,9 +80,10 @@ const CustomListItem = (props: { title: string; value: string }) => {
 
   return (
     <ListItem
+      as="div"
       value={props.value}
       className={mergeClasses(listItemStyles, styles.listItem)}
-      checkmark={{ className: styles.checkmark }}
+      checkmark={{ root: { role: 'gridcell' }, className: styles.checkmark, 'aria-label': value }}
       aria-label={value}
       onAction={onAction}
     >
@@ -164,6 +165,7 @@ export const MultipleActionsDifferentPrimary = () => {
 
   return (
     <List
+      as="div"
       className={classes.list}
       navigationMode="composite"
       selectionMode="multiselect"

diff --git a/...react-components/react-list-preview/stories/src/List/MultipleActionsSelection.stories.tsx b/...react-components/react-list-preview/stories/src/List/MultipleActionsSelection.stories.tsx
@@ -69,13 +69,14 @@ const useStyles = makeStyles({
 const CustomListItem = (props: { title: string; value: string }) => {
   const listItemStyles = useListItemRootStyles();
   const styles = useStyles();
-  const { value } = props;
+  const { value, title } = props;
 
   return (
     <ListItem
-      value={props.value}
+      as="div"
+      value={value}
       className={mergeClasses(listItemStyles, styles.listItem)}
-      checkmark={{ className: styles.checkmark }}
+      checkmark={{ root: { role: 'gridcell' }, className: styles.checkmark, 'aria-label': value }}
       aria-label={value}
     >
       <div role="gridcell" className={styles.preview}>
@@ -87,7 +88,7 @@ const CustomListItem = (props: { title: string; value: string }) => {
         />
       </div>
       <div role="gridcell" className={styles.header}>
-        <Text className={styles.title}>{props.title}</Text>
+        <Text className={styles.title}>{title}</Text>
         <Caption1 className={styles.caption}>You created 53m ago</Caption1>
       </div>
       <div role="gridcell" className={styles.action}>
@@ -156,6 +157,7 @@ export const MultipleActionsSelection = () => {
 
   return (
     <List
+      as="div"
       className={classes.list}
       navigationMode="composite"
       selectionMode="multiselect"

diff --git a/...act-components/react-list-preview/stories/src/List/MultipleActionsWithPrimary.stories.tsx b/...act-components/react-list-preview/stories/src/List/MultipleActionsWithPrimary.stories.tsx
@@ -74,6 +74,7 @@ const CustomListItem = (props: { title: string; value: string }) => {
 
   return (
     <ListItem
+      as="div"
       value={props.value}
       className={mergeClasses(listItemStyles, styles.listItem)}
       aria-label={value}
@@ -152,7 +153,7 @@ export const MultipleActionsWithPrimary = () => {
   const classes = useStyles();
 
   return (
-    <List navigationMode="composite" className={classes.list}>
+    <List navigationMode="composite" className={classes.list} as="div">
       <CustomListItem title="Example List Item" value="card-1" />
       <CustomListItem title="Example List Item" value="card-2" />
       <CustomListItem title="Example List Item" value="card-3" />

diff --git a/...es/react-components/react-list-preview/stories/src/List/SingleActionSelection.stories.tsx b/...es/react-components/react-list-preview/stories/src/List/SingleActionSelection.stories.tsx
@@ -27,9 +27,9 @@ export const SingleActionSelection = () => {
   const defaultSelectedItems = ['Demetra Manwaring', 'Bart Merrill'];
 
   return (
-    <List selectionMode="multiselect" defaultSelectedItems={defaultSelectedItems}>
+    <List selectionMode="multiselect" defaultSelectedItems={defaultSelectedItems} aria-label="People example">
       {items.map(({ name, avatar }) => (
-        <ListItem key={name} value={name} aria-label={name}>
+        <ListItem key={name} value={name} aria-label={name} checkmark={{ 'aria-label': name }}>
           <Persona
             name={name}
             secondaryText="Available"

diff --git a/...omponents/react-list-preview/stories/src/List/SingleActionSelectionControlled.stories.tsx b/...omponents/react-list-preview/stories/src/List/SingleActionSelectionControlled.stories.tsx
@@ -46,9 +46,10 @@ export const SingleActionSelectionControlled = () => {
         selectionMode="multiselect"
         selectedItems={selectedItems}
         onSelectionChange={(_, data) => setSelectedItems(data.selectedItems)}
+        aria-label="People example"
       >
         {items.map(({ name, avatar }) => (
-          <ListItem key={name} value={name} aria-label={name}>
+          <ListItem key={name} value={name} aria-label={name} checkmark={{ 'aria-label': name }}>
             <Persona
               name={name}
               secondaryText="Available"

diff --git a/...nts/react-list-preview/stories/src/List/SingleActionSelectionDifferentPrimary.stories.tsx b/...nts/react-list-preview/stories/src/List/SingleActionSelectionDifferentPrimary.stories.tsx
@@ -35,12 +35,13 @@ export const SingleActionSelectionDifferentPrimary = () => {
 
   return (
     <List
+      aria-label="People example"
       selectionMode="multiselect"
       selectedItems={selectedItems}
       onSelectionChange={(_, data) => setSelectedItems(data.selectedItems)}
     >
       {items.map(({ name, avatar }) => (
-        <ListItem key={name} value={name} aria-label={name} onAction={onAction}>
+        <ListItem key={name} value={name} aria-label={name} onAction={onAction} checkmark={{ 'aria-label': name }}>
           <Persona
             name={name}
             secondaryText="Available"