[docs] Adding missing accessibility labels (mui#33782)

daniel-rabe · Nov 29, 2022 · 5f3c717 · 5f3c717
1 parent f96dcc8
commit 5f3c717
Show file tree

Hide file tree

Showing 13 changed files with 37 additions and 16 deletions.
diff --git a/docs/data/material/components/button-group/DisableElevation.js b/docs/data/material/components/button-group/DisableElevation.js
@@ -4,7 +4,11 @@ import Button from '@mui/material/Button';
 
 export default function DisableElevation() {
   return (
-    <ButtonGroup disableElevation variant="contained">
+    <ButtonGroup
+      disableElevation
+      variant="contained"
+      aria-label="Disabled elevation buttons"
+    >
       <Button>One</Button>
       <Button>Two</Button>
     </ButtonGroup>

diff --git a/docs/data/material/components/button-group/DisableElevation.tsx b/docs/data/material/components/button-group/DisableElevation.tsx
@@ -4,7 +4,11 @@ import Button from '@mui/material/Button';
 
 export default function DisableElevation() {
   return (
-    <ButtonGroup disableElevation variant="contained">
+    <ButtonGroup
+      disableElevation
+      variant="contained"
+      aria-label="Disabled elevation buttons"
+    >
       <Button>One</Button>
       <Button>Two</Button>
     </ButtonGroup>

diff --git a/docs/data/material/components/button-group/DisableElevation.tsx.preview b/docs/data/material/components/button-group/DisableElevation.tsx.preview
@@ -1,4 +1,8 @@
-<ButtonGroup disableElevation variant="contained">
+<ButtonGroup
+  disableElevation
+  variant="contained"
+  aria-label="Disabled elevation buttons"
+>
   <Button>One</Button>
   <Button>Two</Button>
 </ButtonGroup>
diff --git a/docs/data/material/components/switches/ColorSwitches.js b/docs/data/material/components/switches/ColorSwitches.js
@@ -15,7 +15,7 @@ const GreenSwitch = styled(Switch)(({ theme }) => ({
   },
 }));
 
-const label = { inputProps: { 'aria-label': 'Switch demo' } };
+const label = { inputProps: { 'aria-label': 'Color switch demo' } };
 
 export default function ColorSwitches() {
   return (

diff --git a/docs/data/material/components/switches/ColorSwitches.tsx b/docs/data/material/components/switches/ColorSwitches.tsx
@@ -15,7 +15,7 @@ const GreenSwitch = styled(Switch)(({ theme }) => ({
   },
 }));
 
-const label = { inputProps: { 'aria-label': 'Switch demo' } };
+const label = { inputProps: { 'aria-label': 'Color switch demo' } };
 
 export default function ColorSwitches() {
   return (

diff --git a/docs/data/material/components/switches/SwitchesSize.js b/docs/data/material/components/switches/SwitchesSize.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Switch from '@mui/material/Switch';
 
-const label = { inputProps: { 'aria-label': 'Switch demo' } };
+const label = { inputProps: { 'aria-label': 'Size switch demo' } };
 
 export default function SwitchesSize() {
   return (

diff --git a/docs/data/material/components/switches/SwitchesSize.tsx b/docs/data/material/components/switches/SwitchesSize.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Switch from '@mui/material/Switch';
 
-const label = { inputProps: { 'aria-label': 'Switch demo' } };
+const label = { inputProps: { 'aria-label': 'Size switch demo' } };
 
 export default function SwitchesSize() {
   return (

diff --git a/docs/data/material/components/toggle-button/ColorToggleButton.js b/docs/data/material/components/toggle-button/ColorToggleButton.js
@@ -15,6 +15,7 @@ export default function ColorToggleButton() {
       value={alignment}
       exclusive
       onChange={handleChange}
+      aria-label="Platform"
     >
       <ToggleButton value="web">Web</ToggleButton>
       <ToggleButton value="android">Android</ToggleButton>

diff --git a/docs/data/material/components/toggle-button/ColorToggleButton.tsx b/docs/data/material/components/toggle-button/ColorToggleButton.tsx
@@ -18,6 +18,7 @@ export default function ColorToggleButton() {
       value={alignment}
       exclusive
       onChange={handleChange}
+      aria-label="Platform"
     >
       <ToggleButton value="web">Web</ToggleButton>
       <ToggleButton value="android">Android</ToggleButton>

diff --git a/docs/data/material/components/toggle-button/ColorToggleButton.tsx.preview b/docs/data/material/components/toggle-button/ColorToggleButton.tsx.preview
@@ -3,6 +3,7 @@
   value={alignment}
   exclusive
   onChange={handleChange}
+  aria-label="Platform"
 >
   <ToggleButton value="web">Web</ToggleButton>
   <ToggleButton value="android">Android</ToggleButton>

diff --git a/docs/data/material/components/toggle-button/ToggleButtonSizes.js b/docs/data/material/components/toggle-button/ToggleButtonSizes.js
@@ -45,11 +45,13 @@ export default function ToggleButtonSizes() {
         '& > :not(style) + :not(style)': { mt: 2 },
       }}
     >
-      <ToggleButtonGroup size="small" {...control}>
+      <ToggleButtonGroup size="small" {...control} aria-label="Small sizes">
         {children}
       </ToggleButtonGroup>
-      <ToggleButtonGroup {...control}>{children}</ToggleButtonGroup>
-      <ToggleButtonGroup size="large" {...control}>
+      <ToggleButtonGroup {...control} aria-label="Medium sizes">
+        {children}
+      </ToggleButtonGroup>
+      <ToggleButtonGroup size="large" {...control} aria-label="Large sizes">
         {children}
       </ToggleButtonGroup>
     </Box>

diff --git a/docs/data/material/components/toggle-button/ToggleButtonSizes.tsx b/docs/data/material/components/toggle-button/ToggleButtonSizes.tsx
@@ -48,11 +48,13 @@ export default function ToggleButtonSizes() {
         '& > :not(style) + :not(style)': { mt: 2 },
       }}
     >
-      <ToggleButtonGroup size="small" {...control}>
+      <ToggleButtonGroup size="small" {...control} aria-label="Small sizes">
         {children}
       </ToggleButtonGroup>
-      <ToggleButtonGroup {...control}>{children}</ToggleButtonGroup>
-      <ToggleButtonGroup size="large" {...control}>
+      <ToggleButtonGroup {...control} aria-label="Medium sizes">
+        {children}
+      </ToggleButtonGroup>
+      <ToggleButtonGroup size="large" {...control} aria-label="Large sizes">
         {children}
       </ToggleButtonGroup>
     </Box>

diff --git a/docs/data/material/components/toggle-button/ToggleButtonSizes.tsx.preview b/docs/data/material/components/toggle-button/ToggleButtonSizes.tsx.preview
@@ -1,7 +1,9 @@
-<ToggleButtonGroup size="small" {...control}>
+<ToggleButtonGroup size="small" {...control} aria-label="Small sizes">
   {children}
 </ToggleButtonGroup>
-<ToggleButtonGroup {...control}>{children}</ToggleButtonGroup>
-<ToggleButtonGroup size="large" {...control}>
+<ToggleButtonGroup {...control} aria-label="Medium sizes">
+  {children}
+</ToggleButtonGroup>
+<ToggleButtonGroup size="large" {...control} aria-label="Large sizes">
   {children}
 </ToggleButtonGroup>