Skip to content

[docs] Use React.useId() for demo IDs #48300

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

Merged
mj12albert merged 5 commits into from
Apr 19, 2026
Merged

[docs] Use React.useId() for demo IDs #48300

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5d3c6eb
[docs] Use React.useId() for demo IDs to avoid duplicates
Janpot Apr 16, 2026
abaf722
[docs] Use React.useId() for radio, select, text-field and slider dem…
Janpot Apr 17, 2026
82d2bcb
chore: ignore .claude/worktrees in git
Janpot Apr 17, 2026
25ad177
[docs] Apply prettier to RowRadioButtonsGroup
Janpot Apr 17, 2026
e621fda
Merge branch 'master' into fix/demo-useId-aria
mj12albert Apr 19, 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
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ screenshots
packed
test-results
.env
.claude/worktrees

# typescript
*.tsbuildinfo
Expand Down
10 changes: 6 additions & 4 deletions docs/data/material/components/accordion/AccordionExpandDefault.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
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="panel1-content"
id="panel1-header"
aria-controls={`${id}-panel1-content`}
id={`${id}-panel1-header`}
>
<Typography component="span">Expanded by default</Typography>
</AccordionSummary>
Expand All @@ -25,8 +27,8 @@ export default function AccordionExpandDefault() {
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel2-content"
id="panel2-header"
aria-controls={`${id}-panel2-content`}
id={`${id}-panel2-header`}
>
<Typography component="span">Header</Typography>
</AccordionSummary>
Expand Down
10 changes: 6 additions & 4 deletions docs/data/material/components/accordion/AccordionExpandDefault.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
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="panel1-content"
id="panel1-header"
aria-controls={`${id}-panel1-content`}
id={`${id}-panel1-header`}
>
<Typography component="span">Expanded by default</Typography>
</AccordionSummary>
Expand All @@ -25,8 +27,8 @@ export default function AccordionExpandDefault() {
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel2-content"
id="panel2-header"
aria-controls={`${id}-panel2-content`}
id={`${id}-panel2-header`}
>
<Typography component="span">Header</Typography>
</AccordionSummary>
Expand Down
10 changes: 6 additions & 4 deletions docs/data/material/components/accordion/AccordionExpandIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
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 @@ -6,13 +7,14 @@ 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="panel1-content"
id="panel1-header"
aria-controls={`${id}-panel1-content`}
id={`${id}-panel1-header`}
>
<Typography component="span">Accordion 1</Typography>
</AccordionSummary>
Expand All @@ -26,8 +28,8 @@ export default function AccordionExpandIcon() {
<Accordion>
<AccordionSummary
expandIcon={<ArrowDropDownIcon />}
aria-controls="panel2-content"
id="panel2-header"
aria-controls={`${id}-panel2-content`}
id={`${id}-panel2-header`}
>
<Typography component="span">Accordion 2</Typography>
</AccordionSummary>
Expand Down
10 changes: 6 additions & 4 deletions docs/data/material/components/accordion/AccordionExpandIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
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 @@ -6,13 +7,14 @@ 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="panel1-content"
id="panel1-header"
aria-controls={`${id}-panel1-content`}
id={`${id}-panel1-header`}
>
<Typography component="span">Accordion 1</Typography>
</AccordionSummary>
Expand All @@ -26,8 +28,8 @@ export default function AccordionExpandIcon() {
<Accordion>
<AccordionSummary
expandIcon={<ArrowDropDownIcon />}
aria-controls="panel2-content"
id="panel2-header"
aria-controls={`${id}-panel2-content`}
id={`${id}-panel2-header`}
>
<Typography component="span">Accordion 2</Typography>
</AccordionSummary>
Expand Down
9 changes: 5 additions & 4 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,6 +9,7 @@ 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 = () => {
Expand Down Expand Up @@ -44,8 +45,8 @@ export default function AccordionTransition() {
>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1-content"
id="panel1-header"
aria-controls={`${id}-panel1-content`}
id={`${id}-panel1-header`}
>
<Typography component="span">Custom transition using Fade</Typography>
</AccordionSummary>
Expand All @@ -59,8 +60,8 @@ export default function AccordionTransition() {
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel2-content"
id="panel2-header"
aria-controls={`${id}-panel2-content`}
id={`${id}-panel2-header`}
>
<Typography component="span">Default transition using Collapse</Typography>
</AccordionSummary>
Expand Down
9 changes: 5 additions & 4 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,6 +12,7 @@ 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 = () => {
Expand Down Expand Up @@ -47,8 +48,8 @@ export default function AccordionTransition() {
>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1-content"
id="panel1-header"
aria-controls={`${id}-panel1-content`}
id={`${id}-panel1-header`}
>
<Typography component="span">Custom transition using Fade</Typography>
</AccordionSummary>
Expand All @@ -62,8 +63,8 @@ export default function AccordionTransition() {
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel2-content"
id="panel2-header"
aria-controls={`${id}-panel2-content`}
id={`${id}-panel2-header`}
>
<Typography component="span">Default transition using Collapse</Typography>
</AccordionSummary>
Expand Down
14 changes: 8 additions & 6 deletions docs/data/material/components/accordion/AccordionUsage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
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 @@ -7,13 +8,14 @@ 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="panel1-content"
id="panel1-header"
aria-controls={`${id}-panel1-content`}
id={`${id}-panel1-header`}
>
<Typography component="span">Accordion 1</Typography>
</AccordionSummary>
Expand All @@ -25,8 +27,8 @@ export default function AccordionUsage() {
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel2-content"
id="panel2-header"
aria-controls={`${id}-panel2-content`}
id={`${id}-panel2-header`}
>
<Typography component="span">Accordion 2</Typography>
</AccordionSummary>
Expand All @@ -38,8 +40,8 @@ export default function AccordionUsage() {
<Accordion defaultExpanded>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel3-content"
id="panel3-header"
aria-controls={`${id}-panel3-content`}
id={`${id}-panel3-header`}
>
<Typography component="span">Accordion Actions</Typography>
</AccordionSummary>
Expand Down
14 changes: 8 additions & 6 deletions docs/data/material/components/accordion/AccordionUsage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
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 @@ -7,13 +8,14 @@ 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="panel1-content"
id="panel1-header"
aria-controls={`${id}-panel1-content`}
id={`${id}-panel1-header`}
>
<Typography component="span">Accordion 1</Typography>
</AccordionSummary>
Expand All @@ -25,8 +27,8 @@ export default function AccordionUsage() {
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel2-content"
id="panel2-header"
aria-controls={`${id}-panel2-content`}
id={`${id}-panel2-header`}
>
<Typography component="span">Accordion 2</Typography>
</AccordionSummary>
Expand All @@ -38,8 +40,8 @@ export default function AccordionUsage() {
<Accordion defaultExpanded>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel3-content"
id="panel3-header"
aria-controls={`${id}-panel3-content`}
id={`${id}-panel3-header`}
>
<Typography component="span">Accordion Actions</Typography>
</AccordionSummary>
Expand Down
14 changes: 8 additions & 6 deletions docs/data/material/components/accordion/DisabledAccordion.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
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 DisabledAccordion() {
const id = React.useId();
return (
<div>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1-content"
id="panel1-header"
aria-controls={`${id}-panel1-content`}
id={`${id}-panel1-header`}
>
<Typography component="span">Accordion 1</Typography>
</AccordionSummary>
Expand All @@ -25,8 +27,8 @@ export default function DisabledAccordion() {
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel2-content"
id="panel2-header"
aria-controls={`${id}-panel2-content`}
id={`${id}-panel2-header`}
>
<Typography component="span">Accordion 2</Typography>
</AccordionSummary>
Expand All @@ -40,8 +42,8 @@ export default function DisabledAccordion() {
<Accordion disabled>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel3-content"
id="panel3-header"
aria-controls={`${id}-panel3-content`}
id={`${id}-panel3-header`}
>
<Typography component="span">Disabled Accordion</Typography>
</AccordionSummary>
Expand Down
14 changes: 8 additions & 6 deletions docs/data/material/components/accordion/DisabledAccordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
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 DisabledAccordion() {
const id = React.useId();
return (
<div>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1-content"
id="panel1-header"
aria-controls={`${id}-panel1-content`}
id={`${id}-panel1-header`}
>
<Typography component="span">Accordion 1</Typography>
</AccordionSummary>
Expand All @@ -25,8 +27,8 @@ export default function DisabledAccordion() {
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel2-content"
id="panel2-header"
aria-controls={`${id}-panel2-content`}
id={`${id}-panel2-header`}
>
<Typography component="span">Accordion 2</Typography>
</AccordionSummary>
Expand All @@ -40,8 +42,8 @@ export default function DisabledAccordion() {
<Accordion disabled>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel3-content"
id="panel3-header"
aria-controls={`${id}-panel3-content`}
id={`${id}-panel3-header`}
>
<Typography component="span">Disabled Accordion</Typography>
</AccordionSummary>
Expand Down
Loading
Loading