Skip to content

[test][accordion] Add axe tests and doc #48761

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.

Sign up for GitHub

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

Draft
mj12albert wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

[test][accordion] Add axe tests and doc #48761

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 48 additions & 0 deletions docs/data/material/components/accordion/AccordionA11yNonNative.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import * as React from 'react';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

const CustomDivSummary = React.forwardRef(function CustomDivSummary(props, ref) {
return <div ref={ref} {...props} />;
});

export default function AccordionA11yNonNative() {
const id = React.useId();
return (
<div>
<Accordion defaultExpanded>
<AccordionSummary
component={CustomDivSummary}
nativeButton={false}
expandIcon={<ExpandMoreIcon />}
aria-controls={`${id}-panel1-content`}
id={`${id}-panel1-header`}
>
<Typography component="span">Non-native summary</Typography>
</AccordionSummary>
<AccordionDetails>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
</AccordionDetails>
</Accordion>
<Accordion disabled>
<AccordionSummary
component={CustomDivSummary}
nativeButton={false}
expandIcon={<ExpandMoreIcon />}
aria-controls={`${id}-panel2-content`}
id={`${id}-panel2-header`}
>
<Typography component="span">Disabled non-native summary</Typography>
</AccordionSummary>
<AccordionDetails>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
</AccordionDetails>
</Accordion>
</div>
);
}
51 changes: 51 additions & 0 deletions docs/data/material/components/accordion/AccordionA11yNonNative.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import * as React from 'react';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

const CustomDivSummary = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(function CustomDivSummary(props, ref) {
return <div ref={ref} {...props} />;
});

export default function AccordionA11yNonNative() {
const id = React.useId();
return (
<div>
<Accordion defaultExpanded>
<AccordionSummary
component={CustomDivSummary}
nativeButton={false}
expandIcon={<ExpandMoreIcon />}
aria-controls={`${id}-panel1-content`}
id={`${id}-panel1-header`}
>
<Typography component="span">Non-native summary</Typography>
</AccordionSummary>
<AccordionDetails>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
</AccordionDetails>
</Accordion>
<Accordion disabled>
<AccordionSummary
component={CustomDivSummary}
nativeButton={false}
expandIcon={<ExpandMoreIcon />}
aria-controls={`${id}-panel2-content`}
id={`${id}-panel2-header`}
>
<Typography component="span">Disabled non-native summary</Typography>
</AccordionSummary>
<AccordionDetails>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
</AccordionDetails>
</Accordion>
</div>
);
}
30 changes: 30 additions & 0 deletions docs/data/material/components/accordion/AccordionA11yTextSpacing.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import * as React from 'react';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

export default function AccordionA11yTextSpacing() {
const id = React.useId();
return (
<Accordion defaultExpanded sx={{ maxWidth: 320 }}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls={`${id}-panel1-content`}
id={`${id}-panel1-header`}
>
<Typography component="span">
Review your accessibility settings before continuing to the next step
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget. Vivamus auctor
neque a sapien fringilla, in dictum massa pretium.
</Typography>
</AccordionDetails>
</Accordion>
);
}
30 changes: 30 additions & 0 deletions docs/data/material/components/accordion/AccordionA11yTextSpacing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import * as React from 'react';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

export default function AccordionA11yTextSpacing() {
const id = React.useId();
return (
<Accordion defaultExpanded sx={{ maxWidth: 320 }}>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls={`${id}-panel1-content`}
id={`${id}-panel1-header`}
>
<Typography component="span">
Review your accessibility settings before continuing to the next step
</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget. Vivamus auctor
neque a sapien fringilla, in dictum massa pretium.
</Typography>
</AccordionDetails>
</Accordion>
);
}
Loading
Loading