Skip to content

Commit 3887296

Browse files
mj12albertmichelengelen
mj12albert
authored and
michelengelen
committed
[test][button] Add axe test coverage and WCAG conformance report
1 parent 3da7a80 commit 3887296

16 files changed

Lines changed: 1621 additions & 1 deletion

‎docs/data/material/components/buttons/ButtonA11yColorMatrix.js‎

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

‎docs/data/material/components/buttons/ButtonA11yColorMatrix.tsx‎

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

‎docs/data/material/components/buttons/ButtonA11yColorMatrix.tsx.preview‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{variants.map((variant) => (
2+
<div key={variant}>
3+
{colors.map((color) => (
4+
<Button key={`${variant}-${color}`} variant={variant} color={color}>
5+
{color} {variant}
6+
</Button>
7+
))}
8+
</div>
9+
))}

‎docs/data/material/components/buttons/ButtonA11yNonNative.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import * as React from 'react';
2+
import Stack from '@mui/material/Stack';
3+
import Button from '@mui/material/Button';
4+
5+
const CustomDivButton = React.forwardRef(function CustomDivButton(props, ref) {
6+
return <div ref={ref} {...props} />;
7+
});
8+
9+
export default function ButtonA11yNonNative() {
10+
return (
11+
<Stack spacing={2} direction="row">
12+
<Button component={CustomDivButton} nativeButton={false}>
13+
Non-native action
14+
</Button>
15+
<Button component={CustomDivButton} nativeButton={false} disabled>
16+
Disabled non-native
17+
</Button>
18+
</Stack>
19+
);
20+
}

‎docs/data/material/components/buttons/ButtonA11yNonNative.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import * as React from 'react';
2+
import Stack from '@mui/material/Stack';
3+
import Button from '@mui/material/Button';
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 ButtonA11yNonNative() {
13+
return (
14+
<Stack spacing={2} direction="row">
15+
<Button component={CustomDivButton} nativeButton={false}>
16+
Non-native action
17+
</Button>
18+
<Button component={CustomDivButton} nativeButton={false} disabled>
19+
Disabled non-native
20+
</Button>
21+
</Stack>
22+
);
23+
}

‎docs/data/material/components/buttons/ButtonA11yNonNative.tsx.preview‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<Button component={CustomDivButton} nativeButton={false}>
2+
Non-native action
3+
</Button>
4+
<Button component={CustomDivButton} nativeButton={false} disabled>
5+
Disabled non-native
6+
</Button>

‎docs/data/material/components/buttons/ButtonA11ySemanticStates.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { styled } from '@mui/material/styles';
2+
import Button from '@mui/material/Button';
3+
import Stack from '@mui/material/Stack';
4+
import CloudUploadIcon from '@mui/icons-material/CloudUpload';
5+
import DeleteIcon from '@mui/icons-material/Delete';
6+
import SaveIcon from '@mui/icons-material/Save';
7+
import SendIcon from '@mui/icons-material/Send';
8+
9+
const VisuallyHiddenInput = styled('input')({
10+
clip: 'rect(0 0 0 0)',
11+
clipPath: 'inset(50%)',
12+
height: 1,
13+
overflow: 'hidden',
14+
position: 'absolute',
15+
bottom: 0,
16+
left: 0,
17+
whiteSpace: 'nowrap',
18+
width: 1,
19+
});
20+
21+
export default function ButtonA11ySemanticStates() {
22+
return (
23+
<Stack spacing={2}>
24+
<Stack direction="row" spacing={2}>
25+
<Button>Native action</Button>
26+
<Button href="#button-a11y-link">Link action</Button>
27+
<Button disabled>Disabled action</Button>
28+
</Stack>
29+
<Stack direction="row" spacing={2}>
30+
<Button variant="outlined" startIcon={<DeleteIcon />}>
31+
Delete file
32+
</Button>
33+
<Button variant="contained" endIcon={<SendIcon />}>
34+
Send message
35+
</Button>
36+
<Button
37+
loading
38+
loadingPosition="start"
39+
startIcon={<SaveIcon />}
40+
variant="outlined"
41+
>
42+
Save changes
43+
</Button>
44+
</Stack>
45+
<Button
46+
component="label"
47+
role={undefined}
48+
tabIndex={-1}
49+
variant="contained"
50+
startIcon={<CloudUploadIcon />}
51+
sx={{ alignSelf: 'flex-start' }}
52+
>
53+
Upload receipt
54+
<VisuallyHiddenInput type="file" multiple />
55+
</Button>
56+
</Stack>
57+
);
58+
}

‎docs/data/material/components/buttons/ButtonA11ySemanticStates.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import { styled } from '@mui/material/styles';
2+
import Button from '@mui/material/Button';
3+
import Stack from '@mui/material/Stack';
4+
import CloudUploadIcon from '@mui/icons-material/CloudUpload';
5+
import DeleteIcon from '@mui/icons-material/Delete';
6+
import SaveIcon from '@mui/icons-material/Save';
7+
import SendIcon from '@mui/icons-material/Send';
8+
9+
const VisuallyHiddenInput = styled('input')({
10+
clip: 'rect(0 0 0 0)',
11+
clipPath: 'inset(50%)',
12+
height: 1,
13+
overflow: 'hidden',
14+
position: 'absolute',
15+
bottom: 0,
16+
left: 0,
17+
whiteSpace: 'nowrap',
18+
width: 1,
19+
});
20+
21+
export default function ButtonA11ySemanticStates() {
22+
return (
23+
<Stack spacing={2}>
24+
<Stack direction="row" spacing={2}>
25+
<Button>Native action</Button>
26+
<Button href="#button-a11y-link">Link action</Button>
27+
<Button disabled>Disabled action</Button>
28+
</Stack>
29+
<Stack direction="row" spacing={2}>
30+
<Button variant="outlined" startIcon={<DeleteIcon />}>
31+
Delete file
32+
</Button>
33+
<Button variant="contained" endIcon={<SendIcon />}>
34+
Send message
35+
</Button>
36+
<Button
37+
loading
38+
loadingPosition="start"
39+
startIcon={<SaveIcon />}
40+
variant="outlined"
41+
>
42+
Save changes
43+
</Button>
44+
</Stack>
45+
<Button
46+
component="label"
47+
role={undefined}
48+
tabIndex={-1}
49+
variant="contained"
50+
startIcon={<CloudUploadIcon />}
51+
sx={{ alignSelf: 'flex-start' }}
52+
>
53+
Upload receipt
54+
<VisuallyHiddenInput type="file" multiple />
55+
</Button>
56+
</Stack>
57+
);
58+
}

‎docs/data/material/components/buttons/ButtonA11yTextSpacing.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import Box from '@mui/material/Box';
2+
import Button from '@mui/material/Button';
3+
import Stack from '@mui/material/Stack';
4+
import SaveIcon from '@mui/icons-material/Save';
5+
import SendIcon from '@mui/icons-material/Send';
6+
7+
export default function ButtonA11yTextSpacing() {
8+
return (
9+
<Stack spacing={2} sx={{ maxWidth: 320 }}>
10+
<Button
11+
variant="contained"
12+
sx={{
13+
justifyContent: 'flex-start',
14+
lineHeight: 1.5,
15+
letterSpacing: '0.12em',
16+
whiteSpace: 'normal',
17+
wordSpacing: '0.16em',
18+
}}
19+
>
20+
Review accessibility settings before continuing
21+
</Button>
22+
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
23+
<Button
24+
variant="outlined"
25+
startIcon={<SaveIcon />}
26+
sx={{ whiteSpace: 'normal' }}
27+
>
28+
Save a longer action label
29+
</Button>
30+
<Button
31+
variant="contained"
32+
endIcon={<SendIcon />}
33+
sx={{ whiteSpace: 'normal' }}
34+
>
35+
Send confirmation message
36+
</Button>
37+
</Box>
38+
</Stack>
39+
);
40+
}

‎docs/data/material/components/buttons/ButtonA11yTextSpacing.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import Box from '@mui/material/Box';
2+
import Button from '@mui/material/Button';
3+
import Stack from '@mui/material/Stack';
4+
import SaveIcon from '@mui/icons-material/Save';
5+
import SendIcon from '@mui/icons-material/Send';
6+
7+
export default function ButtonA11yTextSpacing() {
8+
return (
9+
<Stack spacing={2} sx={{ maxWidth: 320 }}>
10+
<Button
11+
variant="contained"
12+
sx={{
13+
justifyContent: 'flex-start',
14+
lineHeight: 1.5,
15+
letterSpacing: '0.12em',
16+
whiteSpace: 'normal',
17+
wordSpacing: '0.16em',
18+
}}
19+
>
20+
Review accessibility settings before continuing
21+
</Button>
22+
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
23+
<Button
24+
variant="outlined"
25+
startIcon={<SaveIcon />}
26+
sx={{ whiteSpace: 'normal' }}
27+
>
28+
Save a longer action label
29+
</Button>
30+
<Button
31+
variant="contained"
32+
endIcon={<SendIcon />}
33+
sx={{ whiteSpace: 'normal' }}
34+
>
35+
Send confirmation message
36+
</Button>
37+
</Box>
38+
</Stack>
39+
);
40+
}

0 commit comments

Comments
 (0)