Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Adding missing accessibility labels #33782

Merged
merged 8 commits into from Aug 10, 2022
Expand Up @@ -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>
Expand Down
Expand Up @@ -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>
Expand Down
@@ -1,4 +1,8 @@
<ButtonGroup disableElevation variant="contained">
<ButtonGroup
disableElevation
variant="contained"
aria-label="Disabled elevation buttons"
>
<Button>One</Button>
<Button>Two</Button>
</ButtonGroup>
2 changes: 1 addition & 1 deletion docs/data/material/components/switches/ColorSwitches.js
Expand Up @@ -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 (
Expand Down
2 changes: 1 addition & 1 deletion docs/data/material/components/switches/ColorSwitches.tsx
Expand Up @@ -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 (
Expand Down
2 changes: 1 addition & 1 deletion 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 (
Expand Down
2 changes: 1 addition & 1 deletion 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 (
Expand Down
Expand Up @@ -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>
Expand Down
Expand Up @@ -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>
Expand Down
Expand Up @@ -3,6 +3,7 @@
value={alignment}
exclusive
onChange={handleChange}
aria-label="Platform"
>
<ToggleButton value="web">Web</ToggleButton>
<ToggleButton value="android">Android</ToggleButton>
Expand Down
Expand Up @@ -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>
Expand Down
Expand Up @@ -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>
Expand Down
@@ -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>