Skip to content

[docs][Dialog] Fix form dialog uses ARIA roles on incompatible elements #46307

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

Jump to bottom
Merged
ZeeshanTamboli merged 1 commit into from
Jun 10, 2025
Merged

[docs][Dialog] Fix form dialog uses ARIA roles on incompatible elements #46307

ZeeshanTamboli merged 1 commit into from
Jun 10, 2025

Conversation

@ZeeshanTamboli
Copy link
Member

@ZeeshanTamboli ZeeshanTamboli commented Jun 9, 2025 •
edited
Loading

Closes #46279
Closes #41100

The form element was incorrectly added as a Paper component which has role="dialog" in #40470. This violates accessibility rules, as form elements can't have ARIA roles like dialog (W3C spec, MDN).

This fix removes the accessibility error from #46279 and #41100:

Uses ARIA roles on incompatible elements

Before: https://mui.com/material-ui/react-dialog/#form-dialogs
After: https://deploy-preview-46307--material-ui.netlify.app/material-ui/react-dialog/#form-dialogs

@ZeeshanTamboli ZeeshanTamboli added type: bug It doesn't behave as expected. docs Improvements or additions to the documentation. accessibility a11y labels Jun 9, 2025
@mui-bot
Copy link

mui-bot commented Jun 9, 2025 •
edited
Loading

Netlify deploy preview

https://deploy-preview-46307--material-ui.netlify.app/

Bundle size report

@mui/material parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/system parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/utils parsed: 0B(0.00%) gzip: 0B(0.00%)

Details

Show details for 100 more bundles (86 more not shown)

@mui/lab/AdapterDateFns parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/AdapterDayjs parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/AdapterLuxon parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/AdapterMoment parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/CalendarPicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/CalendarPickerSkeleton parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/ClockPicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/DatePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/DateRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/DateRangePickerDay parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/DateTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/DesktopDatePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/DesktopDateRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/DesktopDateTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/DesktopTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/LoadingButton parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/LocalizationProvider parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/Masonry parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/MobileDatePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/MobileDateRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/MobileDateTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/MobileTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/MonthPicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/PickersDay parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/StaticDatePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/StaticDateRangePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/StaticDateTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/StaticTimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TabContext parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TabList parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TabPanel parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/Timeline parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TimelineConnector parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TimelineContent parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TimelineDot parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TimelineItem parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TimelineOppositeContent parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TimelineSeparator parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TimePicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TreeItem parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/TreeView parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/useAutocomplete parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/lab/YearPicker parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Accordion parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/AccordionActions parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/AccordionDetails parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/AccordionSummary parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Alert parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/AlertTitle parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/AppBar parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Autocomplete parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Avatar parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/AvatarGroup parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Backdrop parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Badge parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/BottomNavigation parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/BottomNavigationAction parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Box parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Breadcrumbs parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Button parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/ButtonBase parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/ButtonGroup parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Card parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/CardActionArea parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/CardActions parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/CardContent parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/CardHeader parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/CardMedia parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Checkbox parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Chip parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/CircularProgress parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/ClickAwayListener parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Collapse parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Container parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/CssBaseline parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/DefaultPropsProvider parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Dialog parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/DialogActions parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/DialogContent parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/DialogContentText parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/DialogTitle parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Divider parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Drawer parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Fab parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Fade parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/FilledInput parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/FormControl parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/FormControlLabel parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/FormGroup parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/FormHelperText parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/FormLabel parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/GlobalStyles parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Grid parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/GridLegacy parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Grow parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/Icon parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/IconButton parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/ImageList parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/ImageListItem parsed: 0B(0.00%) gzip: 0B(0.00%)
@mui/material/ImageListItemBar parsed: 0B(0.00%) gzip: 0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 82496bb

@ZeeshanTamboli ZeeshanTamboli marked this pull request as ready for review June 9, 2025 13:36
DiegoAndai
DiegoAndai approved these changes Jun 9, 2025
View reviewed changes
Copy link
Member

@DiegoAndai DiegoAndai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @ZeeshanTamboli!

@ZeeshanTamboli ZeeshanTamboli merged commit 93bf36a into mui:master Jun 10, 2025
26 checks passed
@ZeeshanTamboli ZeeshanTamboli deleted the issue-46279-41100-form-dialog-invald-role-docs branch June 10, 2025 06:48
@ghostd ghostd mentioned this pull request Jul 3, 2025
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@DiegoAndai DiegoAndai DiegoAndai approved these changes

@sai6855 sai6855 sai6855 approved these changes

Assignees

No one assigned

Labels

accessibility a11y docs Improvements or additions to the documentation. type: bug It doesn't behave as expected.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[docs][Dialog] Form dialog uses ARIA roles on incompatible elements [material-ui][dialog] form dialog has invalid aria role in docs

4 participants

@ZeeshanTamboli @mui-bot @DiegoAndai @sai6855