From 8e2f0cc9e5696952566ce97fe4ac5aa3a64ee2f4 Mon Sep 17 00:00:00 2001
From: Matheus Wichman <matheushw@outlook.com>
Date: Sun, 12 Apr 2020 15:42:19 -0300
Subject: [PATCH] [docs] Improve a11y of the chip array example (#20294)

---
 docs/src/pages/components/chips/ChipsArray.js | 19 +++++++++++--------
 .../src/pages/components/chips/ChipsArray.tsx | 19 +++++++++++--------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/docs/src/pages/components/chips/ChipsArray.js b/docs/src/pages/components/chips/ChipsArray.js
index e25333f09705ad..58f7ffab7c4672 100644
--- 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
index 8ded962dcaa8d9..8e32b1b7204b98 100644
--- 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>