Skip to content

[accordion] Automatically set ARIA attributes #48559

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

Open
mj12albert wants to merge 4 commits into
base: master
Choose a base branch
from
Open

[accordion] Automatically set ARIA attributes #48559

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f5dee9c
auto aria attributes
mj12albert May 19, 2026
ba2f6e2
reorganize doc
mj12albert May 19, 2026
99369fb
polish demos
mj12albert May 19, 2026
5d535de
cleanup
mj12albert May 22, 2026
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
25 changes: 7 additions & 18 deletions docs/data/material/components/accordion/AccordionExpandDefault.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +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 AccordionExpandDefault() {
const id = React.useId();
return (
<div>
<Accordion defaultExpanded>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls={`${id}-panel1-content`}
id={`${id}-panel1-header`}
>
<Typography component="span">Expanded by default</Typography>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography component="span">Delivery options</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
Choose standard shipping, scheduled delivery, or pickup based on what is
available for your order.
</Typography>
</AccordionDetails>
</Accordion>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls={`${id}-panel2-content`}
id={`${id}-panel2-header`}
>
<Typography component="span">Header</Typography>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography component="span">Gift options</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
Add a gift message, choose wrapping, and hide prices on the packing slip.
</Typography>
</AccordionDetails>
</Accordion>
Expand Down
25 changes: 7 additions & 18 deletions docs/data/material/components/accordion/AccordionExpandDefault.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +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 AccordionExpandDefault() {
const id = React.useId();
return (
<div>
<Accordion defaultExpanded>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls={`${id}-panel1-content`}
id={`${id}-panel1-header`}
>
<Typography component="span">Expanded by default</Typography>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography component="span">Delivery options</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
Choose standard shipping, scheduled delivery, or pickup based on what is
available for your order.
</Typography>
</AccordionDetails>
</Accordion>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls={`${id}-panel2-content`}
id={`${id}-panel2-header`}
>
<Typography component="span">Header</Typography>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography component="span">Gift options</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
Add a gift message, choose wrapping, and hide prices on the packing slip.
</Typography>
</AccordionDetails>
</Accordion>
Expand Down
26 changes: 8 additions & 18 deletions docs/data/material/components/accordion/AccordionExpandIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import * as React from 'react';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
Expand All @@ -7,36 +6,27 @@ import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';

export default function AccordionExpandIcon() {
const id = React.useId();
return (
<div>
<Accordion>
<AccordionSummary
expandIcon={<ArrowDownwardIcon />}
aria-controls={`${id}-panel1-content`}
id={`${id}-panel1-header`}
>
<Typography component="span">Accordion 1</Typography>
<AccordionSummary expandIcon={<ArrowDownwardIcon />}>
<Typography component="span">Performance reports</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
Download sales, traffic, and conversion reports from the previous
quarter.
</Typography>
</AccordionDetails>
</Accordion>
<Accordion>
<AccordionSummary
expandIcon={<ArrowDropDownIcon />}
aria-controls={`${id}-panel2-content`}
id={`${id}-panel2-header`}
>
<Typography component="span">Accordion 2</Typography>
<AccordionSummary expandIcon={<ArrowDropDownIcon />}>
<Typography component="span">Inventory alerts</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
Receive notifications when popular items are low in stock or ready to
reorder.
</Typography>
</AccordionDetails>
</Accordion>
Expand Down
26 changes: 8 additions & 18 deletions docs/data/material/components/accordion/AccordionExpandIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import * as React from 'react';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
Expand All @@ -7,36 +6,27 @@ import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';

export default function AccordionExpandIcon() {
const id = React.useId();
return (
<div>
<Accordion>
<AccordionSummary
expandIcon={<ArrowDownwardIcon />}
aria-controls={`${id}-panel1-content`}
id={`${id}-panel1-header`}
>
<Typography component="span">Accordion 1</Typography>
<AccordionSummary expandIcon={<ArrowDownwardIcon />}>
<Typography component="span">Performance reports</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
Download sales, traffic, and conversion reports from the previous
quarter.
</Typography>
</AccordionDetails>
</Accordion>
<Accordion>
<AccordionSummary
expandIcon={<ArrowDropDownIcon />}
aria-controls={`${id}-panel2-content`}
id={`${id}-panel2-header`}
>
<Typography component="span">Accordion 2</Typography>
<AccordionSummary expandIcon={<ArrowDropDownIcon />}>
<Typography component="span">Inventory alerts</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
Receive notifications when popular items are low in stock or ready to
reorder.
</Typography>
</AccordionDetails>
</Accordion>
Expand Down
25 changes: 8 additions & 17 deletions docs/data/material/components/accordion/AccordionTransition.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,10 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import Fade from '@mui/material/Fade';

export default function AccordionTransition() {
const id = React.useId();
const [expanded, setExpanded] = React.useState(false);

const handleExpansion = () => {
setExpanded((prevExpanded) => !prevExpanded);
const handleExpansion = (_event, isExpanded) => {
setExpanded(isExpanded);
};

return (
Expand Down Expand Up @@ -43,32 +42,24 @@ export default function AccordionTransition() {
},
]}
>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls={`${id}-panel1-content`}
id={`${id}-panel1-header`}
>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography component="span">Custom transition using Fade</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
The Fade transition animates opacity when the details are shown or
hidden.
</Typography>
</AccordionDetails>
</Accordion>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls={`${id}-panel2-content`}
id={`${id}-panel2-header`}
>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography component="span">Default transition using Collapse</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
Collapse animates the panel height and is the default transition used by
the Accordion.
</Typography>
</AccordionDetails>
</Accordion>
Expand Down
25 changes: 8 additions & 17 deletions docs/data/material/components/accordion/AccordionTransition.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,10 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import Fade from '@mui/material/Fade';

export default function AccordionTransition() {
const id = React.useId();
const [expanded, setExpanded] = React.useState(false);

const handleExpansion = () => {
setExpanded((prevExpanded) => !prevExpanded);
const handleExpansion = (_event: React.SyntheticEvent, isExpanded: boolean) => {
setExpanded(isExpanded);
};

return (
Expand Down Expand Up @@ -46,32 +45,24 @@ export default function AccordionTransition() {
},
]}
>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls={`${id}-panel1-content`}
id={`${id}-panel1-header`}
>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography component="span">Custom transition using Fade</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
The Fade transition animates opacity when the details are shown or
hidden.
</Typography>
</AccordionDetails>
</Accordion>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls={`${id}-panel2-content`}
id={`${id}-panel2-header`}
>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography component="span">Default transition using Collapse</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
Collapse animates the panel height and is the default transition used by
the Accordion.
</Typography>
</AccordionDetails>
</Accordion>
Expand Down
46 changes: 19 additions & 27 deletions docs/data/material/components/accordion/AccordionUsage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import * as React from 'react';
import Accordion from '@mui/material/Accordion';
import AccordionActions from '@mui/material/AccordionActions';
import AccordionSummary from '@mui/material/AccordionSummary';
Expand All @@ -8,50 +7,43 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import Button from '@mui/material/Button';

export default function AccordionUsage() {
const id = React.useId();
return (
<div>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls={`${id}-panel1-content`}
id={`${id}-panel1-header`}
>
<Typography component="span">Accordion 1</Typography>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography component="span">Delivery details</Typography>
</AccordionSummary>
<AccordionDetails>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
<Typography>
Choose your preferred delivery method, add delivery instructions, and
update your saved address.
</Typography>
</AccordionDetails>
</Accordion>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls={`${id}-panel2-content`}
id={`${id}-panel2-header`}
>
<Typography component="span">Accordion 2</Typography>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography component="span">Payment method</Typography>
</AccordionSummary>
<AccordionDetails>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
<Typography>
Update your billing information, select a default card, or add a new
payment method.
</Typography>
</AccordionDetails>
</Accordion>
<Accordion defaultExpanded>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls={`${id}-panel3-content`}
id={`${id}-panel3-header`}
>
<Typography component="span">Accordion Actions</Typography>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography component="span">Order updates</Typography>
</AccordionSummary>
<AccordionDetails>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
<Typography>
Get shipment status by email, push notification, or SMS when an order
changes.
</Typography>
</AccordionDetails>
<AccordionActions>
<Button>Cancel</Button>
<Button>Agree</Button>
<Button>Save</Button>
</AccordionActions>
</Accordion>
</div>
Expand Down
Loading
Loading