Skip to content

Commit 57ab9fb

Browse files
mj12albertmichelengelen
mj12albert
authored and
michelengelen
committed
[test][linear progress] Add axe tests and WCAG conformance report
1 parent a931f45 commit 57ab9fb

11 files changed

Lines changed: 917 additions & 1 deletion

‎docs/data/material/components/progress/LinearProgressA11yColorMatrix.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import Box from '@mui/material/Box';
2+
import LinearProgress from '@mui/material/LinearProgress';
3+
import Stack from '@mui/material/Stack';
4+
5+
const colors = [
6+
'primary',
7+
'secondary',
8+
'success',
9+
'error',
10+
'info',
11+
'warning',
12+
'inherit',
13+
];
14+
15+
const variants = ['determinate', 'buffer', 'indeterminate', 'query'];
16+
17+
// Determinate and buffer take a value; indeterminate and query take none.
18+
const valuePropsByVariant = {
19+
determinate: { value: 60 },
20+
buffer: { value: 60, valueBuffer: 80 },
21+
indeterminate: {},
22+
query: {},
23+
};
24+
25+
export default function LinearProgressA11yColorMatrix() {
26+
return (
27+
<Box sx={{ color: 'text.primary', display: 'grid', gap: 2, width: 320 }}>
28+
{variants.map((variant) => (
29+
<Stack key={variant} spacing={1}>
30+
{colors.map((color) => (
31+
<LinearProgress
32+
key={`${variant}-${color}`}
33+
color={color}
34+
variant={variant}
35+
aria-label={`${color} ${variant}`}
36+
{...valuePropsByVariant[variant]}
37+
/>
38+
))}
39+
</Stack>
40+
))}
41+
</Box>
42+
);
43+
}

‎docs/data/material/components/progress/LinearProgressA11yColorMatrix.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import Box from '@mui/material/Box';
2+
import LinearProgress from '@mui/material/LinearProgress';
3+
import Stack from '@mui/material/Stack';
4+
5+
const colors = [
6+
'primary',
7+
'secondary',
8+
'success',
9+
'error',
10+
'info',
11+
'warning',
12+
'inherit',
13+
] as const;
14+
const variants = ['determinate', 'buffer', 'indeterminate', 'query'] as const;
15+
16+
// Determinate and buffer take a value; indeterminate and query take none.
17+
const valuePropsByVariant = {
18+
determinate: { value: 60 },
19+
buffer: { value: 60, valueBuffer: 80 },
20+
indeterminate: {},
21+
query: {},
22+
} as const;
23+
24+
export default function LinearProgressA11yColorMatrix() {
25+
return (
26+
<Box sx={{ color: 'text.primary', display: 'grid', gap: 2, width: 320 }}>
27+
{variants.map((variant) => (
28+
<Stack key={variant} spacing={1}>
29+
{colors.map((color) => (
30+
<LinearProgress
31+
key={`${variant}-${color}`}
32+
color={color}
33+
variant={variant}
34+
aria-label={`${color} ${variant}`}
35+
{...valuePropsByVariant[variant]}
36+
/>
37+
))}
38+
</Stack>
39+
))}
40+
</Box>
41+
);
42+
}

‎docs/data/material/components/progress/LinearProgressA11yColorMatrix.tsx.preview‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{variants.map((variant) => (
2+
<Stack key={variant} spacing={1}>
3+
{colors.map((color) => (
4+
<LinearProgress
5+
key={`${variant}-${color}`}
6+
color={color}
7+
variant={variant}
8+
aria-label={`${color} ${variant}`}
9+
{...valuePropsByVariant[variant]}
10+
/>
11+
))}
12+
</Stack>
13+
))}

‎docs/data/material/components/progress/LinearProgressA11ySemanticStates.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import * as React from 'react';
2+
import LinearProgress from '@mui/material/LinearProgress';
3+
import Stack from '@mui/material/Stack';
4+
import Typography from '@mui/material/Typography';
5+
6+
export default function LinearProgressA11ySemanticStates() {
7+
const labelId = React.useId();
8+
return (
9+
<Stack spacing={2}>
10+
{/* Indeterminate: name required, aria-valuenow correctly omitted. */}
11+
<LinearProgress aria-label="Loading content" />
12+
{/* Query: same indeterminate semantics, reversed animation. */}
13+
<LinearProgress variant="query" aria-label="Searching" />
14+
{/* Determinate: name plus aria-valuenow/min/max (default 0–100 range). */}
15+
<LinearProgress
16+
variant="determinate"
17+
value={40}
18+
aria-label="Upload progress"
19+
/>
20+
{/* Buffer: name plus the value and buffered value. */}
21+
<LinearProgress
22+
variant="buffer"
23+
value={40}
24+
valueBuffer={60}
25+
aria-label="Streaming progress"
26+
/>
27+
{/* Custom min/max paired with aria-valuetext so the value is not read as a percentage. */}
28+
<LinearProgress
29+
variant="determinate"
30+
value={3}
31+
min={0}
32+
max={7}
33+
aria-label="Onboarding steps"
34+
aria-valuetext="Step 3 of 7"
35+
/>
36+
{/* Name supplied by a visible label via aria-labelledby. */}
37+
<Stack spacing={0.5}>
38+
<Typography id={labelId} variant="body2" sx={{ color: 'text.secondary' }}>
39+
Sync status
40+
</Typography>
41+
<LinearProgress variant="determinate" value={75} aria-labelledby={labelId} />
42+
</Stack>
43+
</Stack>
44+
);
45+
}

‎docs/data/material/components/progress/LinearProgressA11ySemanticStates.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import * as React from 'react';
2+
import LinearProgress from '@mui/material/LinearProgress';
3+
import Stack from '@mui/material/Stack';
4+
import Typography from '@mui/material/Typography';
5+
6+
export default function LinearProgressA11ySemanticStates() {
7+
const labelId = React.useId();
8+
return (
9+
<Stack spacing={2}>
10+
{/* Indeterminate: name required, aria-valuenow correctly omitted. */}
11+
<LinearProgress aria-label="Loading content" />
12+
{/* Query: same indeterminate semantics, reversed animation. */}
13+
<LinearProgress variant="query" aria-label="Searching" />
14+
{/* Determinate: name plus aria-valuenow/min/max (default 0–100 range). */}
15+
<LinearProgress
16+
variant="determinate"
17+
value={40}
18+
aria-label="Upload progress"
19+
/>
20+
{/* Buffer: name plus the value and buffered value. */}
21+
<LinearProgress
22+
variant="buffer"
23+
value={40}
24+
valueBuffer={60}
25+
aria-label="Streaming progress"
26+
/>
27+
{/* Custom min/max paired with aria-valuetext so the value is not read as a percentage. */}
28+
<LinearProgress
29+
variant="determinate"
30+
value={3}
31+
min={0}
32+
max={7}
33+
aria-label="Onboarding steps"
34+
aria-valuetext="Step 3 of 7"
35+
/>
36+
{/* Name supplied by a visible label via aria-labelledby. */}
37+
<Stack spacing={0.5}>
38+
<Typography id={labelId} variant="body2" sx={{ color: 'text.secondary' }}>
39+
Sync status
40+
</Typography>
41+
<LinearProgress variant="determinate" value={75} aria-labelledby={labelId} />
42+
</Stack>
43+
</Stack>
44+
);
45+
}

0 commit comments

Comments
 (0)