[docs] Improve a11y of the chip array example (#20294)

mui · Apr 12, 2020 · 8e2f0cc · 8e2f0cc
1 parent 7c610f0
commit 8e2f0cc
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 16 deletions.
diff --git a/docs/src/pages/components/chips/ChipsArray.js b/docs/src/pages/components/chips/ChipsArray.js
@@ -9,7 +9,9 @@ const useStyles = makeStyles((theme) => ({
     display: 'flex',
     justifyContent: 'center',
     flexWrap: 'wrap',
+    listStyle: 'none',
     padding: theme.spacing(0.5),
+    margin: 0,
   },
   chip: {
     margin: theme.spacing(0.5),
@@ -31,7 +33,7 @@ export default function ChipsArray() {
   };
 
   return (
-    <Paper className={classes.root}>
+    <Paper component="ul" className={classes.root}>
       {chipData.map((data) => {
         let icon;
 
@@ -40,13 +42,14 @@ export default function ChipsArray() {
         }
 
         return (
-          <Chip
-            key={data.key}
-            icon={icon}
-            label={data.label}
-            onDelete={data.label === 'React' ? undefined : handleDelete(data)}
-            className={classes.chip}
-          />
+          <li key={data.key}>
+            <Chip
+              icon={icon}
+              label={data.label}
+              onDelete={data.label === 'React' ? undefined : handleDelete(data)}
+              className={classes.chip}
+            />
+          </li>
         );
       })}
     </Paper>

diff --git a/docs/src/pages/components/chips/ChipsArray.tsx b/docs/src/pages/components/chips/ChipsArray.tsx
@@ -15,7 +15,9 @@ const useStyles = makeStyles((theme: Theme) =>
       display: 'flex',
       justifyContent: 'center',
       flexWrap: 'wrap',
+      listStyle: 'none',
       padding: theme.spacing(0.5),
+      margin: 0,
     },
     chip: {
       margin: theme.spacing(0.5),
@@ -38,7 +40,7 @@ export default function ChipsArray() {
   };
 
   return (
-    <Paper className={classes.root}>
+    <Paper component="ul" className={classes.root}>
       {chipData.map((data) => {
         let icon;
 
@@ -47,13 +49,14 @@ export default function ChipsArray() {
         }
 
         return (
-          <Chip
-            key={data.key}
-            icon={icon}
-            label={data.label}
-            onDelete={data.label === 'React' ? undefined : handleDelete(data)}
-            className={classes.chip}
-          />
+          <li key={data.key}>
+            <Chip
+              icon={icon}
+              label={data.label}
+              onDelete={data.label === 'React' ? undefined : handleDelete(data)}
+              className={classes.chip}
+            />
+          </li>
         );
       })}
     </Paper>