Skip to content

Commit b26c9de

Browse files
mj12albertmichelengelen
mj12albert
authored and
michelengelen
committed
[test][accordion] Add axe tests and WCAG conformance reports
1 parent 9fed364 commit b26c9de

11 files changed

Lines changed: 1574 additions & 17 deletions

File tree

‎docs/data/material/components/accordion/AccordionA11yNonNative.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import * as React from 'react';
2+
import Accordion from '@mui/material/Accordion';
3+
import AccordionSummary from '@mui/material/AccordionSummary';
4+
import AccordionDetails from '@mui/material/AccordionDetails';
5+
import Typography from '@mui/material/Typography';
6+
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
7+
8+
const CustomDivSummary = React.forwardRef(function CustomDivSummary(props, ref) {
9+
return <div ref={ref} {...props} />;
10+
});
11+
12+
export default function AccordionA11yNonNative() {
13+
const id = React.useId();
14+
return (
15+
<div>
16+
<Accordion defaultExpanded>
17+
<AccordionSummary
18+
component={CustomDivSummary}
19+
nativeButton={false}
20+
expandIcon={<ExpandMoreIcon />}
21+
aria-controls={`${id}-panel1-content`}
22+
id={`${id}-panel1-header`}
23+
>
24+
<Typography component="span">Non-native summary</Typography>
25+
</AccordionSummary>
26+
<AccordionDetails>
27+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
28+
malesuada lacus ex, sit amet blandit leo lobortis eget.
29+
</AccordionDetails>
30+
</Accordion>
31+
<Accordion disabled>
32+
<AccordionSummary
33+
component={CustomDivSummary}
34+
nativeButton={false}
35+
expandIcon={<ExpandMoreIcon />}
36+
aria-controls={`${id}-panel2-content`}
37+
id={`${id}-panel2-header`}
38+
>
39+
<Typography component="span">Disabled non-native summary</Typography>
40+
</AccordionSummary>
41+
<AccordionDetails>
42+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
43+
malesuada lacus ex, sit amet blandit leo lobortis eget.
44+
</AccordionDetails>
45+
</Accordion>
46+
</div>
47+
);
48+
}

‎docs/data/material/components/accordion/AccordionA11yNonNative.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import * as React from 'react';
2+
import Accordion from '@mui/material/Accordion';
3+
import AccordionSummary from '@mui/material/AccordionSummary';
4+
import AccordionDetails from '@mui/material/AccordionDetails';
5+
import Typography from '@mui/material/Typography';
6+
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
7+
8+
const CustomDivSummary = React.forwardRef<
9+
HTMLDivElement,
10+
React.HTMLAttributes<HTMLDivElement>
11+
>(function CustomDivSummary(props, ref) {
12+
return <div ref={ref} {...props} />;
13+
});
14+
15+
export default function AccordionA11yNonNative() {
16+
const id = React.useId();
17+
return (
18+
<div>
19+
<Accordion defaultExpanded>
20+
<AccordionSummary
21+
component={CustomDivSummary}
22+
nativeButton={false}
23+
expandIcon={<ExpandMoreIcon />}
24+
aria-controls={`${id}-panel1-content`}
25+
id={`${id}-panel1-header`}
26+
>
27+
<Typography component="span">Non-native summary</Typography>
28+
</AccordionSummary>
29+
<AccordionDetails>
30+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
31+
malesuada lacus ex, sit amet blandit leo lobortis eget.
32+
</AccordionDetails>
33+
</Accordion>
34+
<Accordion disabled>
35+
<AccordionSummary
36+
component={CustomDivSummary}
37+
nativeButton={false}
38+
expandIcon={<ExpandMoreIcon />}
39+
aria-controls={`${id}-panel2-content`}
40+
id={`${id}-panel2-header`}
41+
>
42+
<Typography component="span">Disabled non-native summary</Typography>
43+
</AccordionSummary>
44+
<AccordionDetails>
45+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
46+
malesuada lacus ex, sit amet blandit leo lobortis eget.
47+
</AccordionDetails>
48+
</Accordion>
49+
</div>
50+
);
51+
}

‎docs/data/material/components/accordion/AccordionA11yTextSpacing.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import * as React from 'react';
2+
import Accordion from '@mui/material/Accordion';
3+
import AccordionSummary from '@mui/material/AccordionSummary';
4+
import AccordionDetails from '@mui/material/AccordionDetails';
5+
import Typography from '@mui/material/Typography';
6+
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
7+
8+
export default function AccordionA11yTextSpacing() {
9+
const id = React.useId();
10+
return (
11+
<Accordion defaultExpanded sx={{ maxWidth: 320 }}>
12+
<AccordionSummary
13+
expandIcon={<ExpandMoreIcon />}
14+
aria-controls={`${id}-panel1-content`}
15+
id={`${id}-panel1-header`}
16+
>
17+
<Typography component="span">
18+
Review your accessibility settings before continuing to the next step
19+
</Typography>
20+
</AccordionSummary>
21+
<AccordionDetails>
22+
<Typography>
23+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
24+
malesuada lacus ex, sit amet blandit leo lobortis eget. Vivamus auctor
25+
neque a sapien fringilla, in dictum massa pretium.
26+
</Typography>
27+
</AccordionDetails>
28+
</Accordion>
29+
);
30+
}

‎docs/data/material/components/accordion/AccordionA11yTextSpacing.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import * as React from 'react';
2+
import Accordion from '@mui/material/Accordion';
3+
import AccordionSummary from '@mui/material/AccordionSummary';
4+
import AccordionDetails from '@mui/material/AccordionDetails';
5+
import Typography from '@mui/material/Typography';
6+
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
7+
8+
export default function AccordionA11yTextSpacing() {
9+
const id = React.useId();
10+
return (
11+
<Accordion defaultExpanded sx={{ maxWidth: 320 }}>
12+
<AccordionSummary
13+
expandIcon={<ExpandMoreIcon />}
14+
aria-controls={`${id}-panel1-content`}
15+
id={`${id}-panel1-header`}
16+
>
17+
<Typography component="span">
18+
Review your accessibility settings before continuing to the next step
19+
</Typography>
20+
</AccordionSummary>
21+
<AccordionDetails>
22+
<Typography>
23+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
24+
malesuada lacus ex, sit amet blandit leo lobortis eget. Vivamus auctor
25+
neque a sapien fringilla, in dictum massa pretium.
26+
</Typography>
27+
</AccordionDetails>
28+
</Accordion>
29+
);
30+
}

0 commit comments

Comments
 (0)