Skip to content

Commit b0ff077

Browse files
mj12albertmichelengelen
mj12albert
authored and
michelengelen
committed
[test][toggle button] Add axe tests and WCAG conformance reports
1 parent 8dde96f commit b0ff077

19 files changed

Lines changed: 1431 additions & 3 deletions

‎docs/data/material/components/toggle-button/StandaloneToggleButton.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export default function StandaloneToggleButton() {
1010
value="check"
1111
selected={selected}
1212
onChange={() => setSelected((prevSelected) => !prevSelected)}
13+
aria-label="mark as done"
1314
>
1415
<CheckIcon />
1516
</ToggleButton>

‎docs/data/material/components/toggle-button/StandaloneToggleButton.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export default function StandaloneToggleButton() {
1010
value="check"
1111
selected={selected}
1212
onChange={() => setSelected((prevSelected) => !prevSelected)}
13+
aria-label="mark as done"
1314
>
1415
<CheckIcon />
1516
</ToggleButton>

‎docs/data/material/components/toggle-button/StandaloneToggleButton.tsx.preview‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
value="check"
33
selected={selected}
44
onChange={() => setSelected((prevSelected) => !prevSelected)}
5+
aria-label="mark as done"
56
>
67
<CheckIcon />
78
</ToggleButton>

‎docs/data/material/components/toggle-button/ToggleButtonA11yColorMatrix.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import Box from '@mui/material/Box';
2+
import ToggleButton from '@mui/material/ToggleButton';
3+
4+
const colors = [
5+
'standard',
6+
'primary',
7+
'secondary',
8+
'error',
9+
'info',
10+
'success',
11+
'warning',
12+
];
13+
14+
export default function ToggleButtonA11yColorMatrix() {
15+
return (
16+
<Box
17+
sx={{
18+
color: 'text.primary',
19+
display: 'grid',
20+
gap: 1,
21+
'& > div': {
22+
display: 'flex',
23+
flexWrap: 'wrap',
24+
gap: 1,
25+
},
26+
}}
27+
>
28+
{[false, true].map((selected) => (
29+
<div key={String(selected)}>
30+
{colors.map((color) => (
31+
<ToggleButton
32+
key={`${color}-${selected}`}
33+
value={`${color}-${selected}`}
34+
color={color}
35+
selected={selected}
36+
>
37+
{color}
38+
</ToggleButton>
39+
))}
40+
</div>
41+
))}
42+
</Box>
43+
);
44+
}

‎docs/data/material/components/toggle-button/ToggleButtonA11yColorMatrix.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import Box from '@mui/material/Box';
2+
import ToggleButton from '@mui/material/ToggleButton';
3+
4+
const colors = [
5+
'standard',
6+
'primary',
7+
'secondary',
8+
'error',
9+
'info',
10+
'success',
11+
'warning',
12+
] as const;
13+
14+
export default function ToggleButtonA11yColorMatrix() {
15+
return (
16+
<Box
17+
sx={{
18+
color: 'text.primary',
19+
display: 'grid',
20+
gap: 1,
21+
'& > div': {
22+
display: 'flex',
23+
flexWrap: 'wrap',
24+
gap: 1,
25+
},
26+
}}
27+
>
28+
{[false, true].map((selected) => (
29+
<div key={String(selected)}>
30+
{colors.map((color) => (
31+
<ToggleButton
32+
key={`${color}-${selected}`}
33+
value={`${color}-${selected}`}
34+
color={color}
35+
selected={selected}
36+
>
37+
{color}
38+
</ToggleButton>
39+
))}
40+
</div>
41+
))}
42+
</Box>
43+
);
44+
}

‎docs/data/material/components/toggle-button/ToggleButtonA11yColorMatrix.tsx.preview‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{[false, true].map((selected) => (
2+
<div key={String(selected)}>
3+
{colors.map((color) => (
4+
<ToggleButton
5+
key={`${color}-${selected}`}
6+
value={`${color}-${selected}`}
7+
color={color}
8+
selected={selected}
9+
>
10+
{color}
11+
</ToggleButton>
12+
))}
13+
</div>
14+
))}

‎docs/data/material/components/toggle-button/ToggleButtonA11yNonNative.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import * as React from 'react';
2+
import Stack from '@mui/material/Stack';
3+
import ToggleButton from '@mui/material/ToggleButton';
4+
5+
const CustomDivButton = React.forwardRef(function CustomDivButton(props, ref) {
6+
return <div ref={ref} {...props} />;
7+
});
8+
9+
export default function ToggleButtonA11yNonNative() {
10+
return (
11+
<Stack spacing={2} direction="row">
12+
<ToggleButton
13+
component={CustomDivButton}
14+
nativeButton={false}
15+
value="on"
16+
selected
17+
>
18+
Non-native pressed
19+
</ToggleButton>
20+
<ToggleButton component={CustomDivButton} nativeButton={false} value="off">
21+
Non-native
22+
</ToggleButton>
23+
<ToggleButton
24+
component={CustomDivButton}
25+
nativeButton={false}
26+
value="disabled"
27+
disabled
28+
>
29+
Disabled non-native
30+
</ToggleButton>
31+
</Stack>
32+
);
33+
}

‎docs/data/material/components/toggle-button/ToggleButtonA11yNonNative.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import * as React from 'react';
2+
import Stack from '@mui/material/Stack';
3+
import ToggleButton from '@mui/material/ToggleButton';
4+
5+
const CustomDivButton = React.forwardRef<
6+
HTMLDivElement,
7+
React.HTMLAttributes<HTMLDivElement>
8+
>(function CustomDivButton(props, ref) {
9+
return <div ref={ref} {...props} />;
10+
});
11+
12+
export default function ToggleButtonA11yNonNative() {
13+
return (
14+
<Stack spacing={2} direction="row">
15+
<ToggleButton
16+
component={CustomDivButton}
17+
nativeButton={false}
18+
value="on"
19+
selected
20+
>
21+
Non-native pressed
22+
</ToggleButton>
23+
<ToggleButton component={CustomDivButton} nativeButton={false} value="off">
24+
Non-native
25+
</ToggleButton>
26+
<ToggleButton
27+
component={CustomDivButton}
28+
nativeButton={false}
29+
value="disabled"
30+
disabled
31+
>
32+
Disabled non-native
33+
</ToggleButton>
34+
</Stack>
35+
);
36+
}

‎docs/data/material/components/toggle-button/ToggleButtonA11ySemanticStates.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import Stack from '@mui/material/Stack';
2+
import ToggleButton from '@mui/material/ToggleButton';
3+
import FormatBoldIcon from '@mui/icons-material/FormatBold';
4+
5+
export default function ToggleButtonA11ySemanticStates() {
6+
return (
7+
<Stack spacing={2}>
8+
<Stack direction="row" spacing={2}>
9+
<ToggleButton value="off" selected={false}>
10+
Not pressed
11+
</ToggleButton>
12+
<ToggleButton value="on" selected>
13+
Pressed
14+
</ToggleButton>
15+
<ToggleButton value="disabled" disabled>
16+
Disabled
17+
</ToggleButton>
18+
</Stack>
19+
<Stack direction="row" spacing={2}>
20+
<ToggleButton value="bold-on" selected aria-label="Bold">
21+
<FormatBoldIcon />
22+
</ToggleButton>
23+
<ToggleButton value="bold-off" aria-label="Bold">
24+
<FormatBoldIcon />
25+
</ToggleButton>
26+
</Stack>
27+
<Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
28+
<ToggleButton value="small" size="small" aria-label="Bold, small">
29+
<FormatBoldIcon />
30+
</ToggleButton>
31+
<ToggleButton value="medium" size="medium" aria-label="Bold, medium">
32+
<FormatBoldIcon />
33+
</ToggleButton>
34+
<ToggleButton value="large" size="large" aria-label="Bold, large">
35+
<FormatBoldIcon />
36+
</ToggleButton>
37+
</Stack>
38+
</Stack>
39+
);
40+
}

‎docs/data/material/components/toggle-button/ToggleButtonA11ySemanticStates.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import Stack from '@mui/material/Stack';
2+
import ToggleButton from '@mui/material/ToggleButton';
3+
import FormatBoldIcon from '@mui/icons-material/FormatBold';
4+
5+
export default function ToggleButtonA11ySemanticStates() {
6+
return (
7+
<Stack spacing={2}>
8+
<Stack direction="row" spacing={2}>
9+
<ToggleButton value="off" selected={false}>
10+
Not pressed
11+
</ToggleButton>
12+
<ToggleButton value="on" selected>
13+
Pressed
14+
</ToggleButton>
15+
<ToggleButton value="disabled" disabled>
16+
Disabled
17+
</ToggleButton>
18+
</Stack>
19+
<Stack direction="row" spacing={2}>
20+
<ToggleButton value="bold-on" selected aria-label="Bold">
21+
<FormatBoldIcon />
22+
</ToggleButton>
23+
<ToggleButton value="bold-off" aria-label="Bold">
24+
<FormatBoldIcon />
25+
</ToggleButton>
26+
</Stack>
27+
<Stack direction="row" spacing={2} sx={{ alignItems: 'center' }}>
28+
<ToggleButton value="small" size="small" aria-label="Bold, small">
29+
<FormatBoldIcon />
30+
</ToggleButton>
31+
<ToggleButton value="medium" size="medium" aria-label="Bold, medium">
32+
<FormatBoldIcon />
33+
</ToggleButton>
34+
<ToggleButton value="large" size="large" aria-label="Bold, large">
35+
<FormatBoldIcon />
36+
</ToggleButton>
37+
</Stack>
38+
</Stack>
39+
);
40+
}

0 commit comments

Comments
 (0)