Skip to content
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

[Dialog] Fix labelledby and describedby placement #18032

Merged
merged 2 commits into from
Oct 26, 2019
Merged

[Dialog] Fix labelledby and describedby placement #18032

merged 2 commits into from
Oct 26, 2019

Conversation

eps1lon
Copy link
Member

@eps1lon eps1lon commented Oct 25, 2019

Closes #17999

The initial focus is something we can't meaningful solve at the library level. It shouldn't focus the full dialog but some element inside (e.g. a confirm button, or the first paragraph, or a selection list etc).

@eps1lon eps1lon added accessibility a11y component: dialog This is the name of the generic UI component, not the React module! labels Oct 25, 2019
@mui-pr-bot
Copy link

Details of bundle changes.

Comparing: cec2f0c...667203d

bundle Size Change Size Gzip Change Gzip
@material-ui/core ▲ +125 B (+0.04% ) 346 kB ▲ +50 B (+0.05% ) 94.9 kB
Dialog ▲ +125 B (+0.15% ) 80.9 kB ▲ +47 B (+0.19% ) 25.1 kB
@material-ui/core[umd] ▲ +125 B (+0.04% ) 306 kB ▲ +25 B (+0.03% ) 88 kB
@material-ui/lab -- 143 kB -- 44.6 kB
@material-ui/styles -- 50.8 kB -- 15.4 kB
@material-ui/system -- 14.8 kB -- 4.07 kB
AppBar -- 62.3 kB -- 19.5 kB
Avatar -- 61.1 kB -- 19.2 kB
Backdrop -- 66.2 kB -- 20.4 kB
Badge -- 63.8 kB -- 19.7 kB
BottomNavigation -- 60.8 kB -- 19 kB
BottomNavigationAction -- 73.8 kB -- 23.3 kB
Box -- 69.2 kB -- 20.9 kB
Breadcrumbs -- 66.4 kB -- 20.8 kB
Button -- 77.7 kB -- 24.1 kB
ButtonBase -- 72.2 kB -- 22.6 kB
ButtonGroup -- 62.6 kB -- 19.5 kB
Card -- 61.3 kB -- 19.2 kB
CardActionArea -- 73.3 kB -- 23.1 kB
CardActions -- 60.5 kB -- 18.9 kB
CardContent -- 60.4 kB -- 18.9 kB
CardHeader -- 63.5 kB -- 20 kB
CardMedia -- 60.8 kB -- 19.1 kB
Checkbox -- 80 kB -- 25.1 kB
Chip -- 69 kB -- 21.3 kB
CircularProgress -- 62.5 kB -- 19.7 kB
ClickAwayListener -- 3.85 kB -- 1.55 kB
Collapse -- 66.3 kB -- 20.5 kB
colorManipulator -- 3.83 kB -- 1.52 kB
Container -- 61.6 kB -- 19.2 kB
CssBaseline -- 56 kB -- 17.5 kB
DialogActions -- 60.5 kB -- 18.9 kB
DialogContent -- 60.6 kB -- 19 kB
DialogContentText -- 62.5 kB -- 19.6 kB
DialogTitle -- 62.7 kB -- 19.7 kB
Divider -- 61 kB -- 19.1 kB
docs.landing -- 54.8 kB -- 14.5 kB
docs.main -- 600 kB -- 191 kB
Drawer -- 82.7 kB -- 25.6 kB
ExpansionPanel -- 69.5 kB -- 21.7 kB
ExpansionPanelActions -- 60.5 kB -- 18.9 kB
ExpansionPanelDetails -- 60.4 kB -- 18.9 kB
ExpansionPanelSummary -- 76.3 kB -- 24.1 kB
Fab -- 75.1 kB -- 23.3 kB
Fade -- 22 kB -- 7.6 kB
FilledInput -- 71.5 kB -- 22.2 kB
FormControl -- 62.7 kB -- 19.4 kB
FormControlLabel -- 63.9 kB -- 20.1 kB
FormGroup -- 60.4 kB -- 18.9 kB
FormHelperText -- 61.7 kB -- 19.3 kB
FormLabel -- 61.7 kB -- 19.1 kB
Grid -- 63.5 kB -- 19.9 kB
GridList -- 60.9 kB -- 19.1 kB
GridListTile -- 62.1 kB -- 19.5 kB
GridListTileBar -- 61.6 kB -- 19.3 kB
Grow -- 22.6 kB -- 7.72 kB
Hidden -- 64.5 kB -- 20.2 kB
Icon -- 61.2 kB -- 19.1 kB
IconButton -- 74.4 kB -- 23.2 kB
Input -- 70.5 kB -- 22 kB
InputAdornment -- 63.5 kB -- 20 kB
InputBase -- 68.6 kB -- 21.5 kB
InputLabel -- 63.5 kB -- 19.8 kB
LinearProgress -- 63.7 kB -- 19.8 kB
Link -- 65 kB -- 20.6 kB
List -- 60.8 kB -- 18.9 kB
ListItem -- 75.4 kB -- 23.5 kB
ListItemAvatar -- 60.5 kB -- 18.9 kB
ListItemIcon -- 60.6 kB -- 19 kB
ListItemSecondaryAction -- 60.4 kB -- 18.9 kB
ListItemText -- 63.4 kB -- 19.9 kB
ListSubheader -- 61.2 kB -- 19.2 kB
Menu -- 86.6 kB -- 27.2 kB
MenuItem -- 76.4 kB -- 23.8 kB
MenuList -- 64.4 kB -- 20.1 kB
MobileStepper -- 66.2 kB -- 20.6 kB
Modal -- 14.2 kB -- 4.97 kB
NativeSelect -- 74.8 kB -- 23.5 kB
NoSsr -- 2.19 kB -- 1.04 kB
OutlinedInput -- 72.1 kB -- 22.4 kB
Paper -- 60.8 kB -- 18.9 kB
Popover -- 81 kB -- 25 kB
Popper -- 28.3 kB -- 10.2 kB
Portal -- 2.87 kB -- 1.29 kB
Radio -- 80.9 kB -- 25.4 kB
RadioGroup -- 61.7 kB -- 19.3 kB
Rating -- 68.3 kB -- 21.8 kB
RootRef -- 4.43 kB -- 1.67 kB
Select -- 112 kB -- 33.2 kB
Skeleton -- 60.9 kB -- 19.1 kB
Slide -- 24.1 kB -- 8.21 kB
Slider -- 73.7 kB -- 23.2 kB
Snackbar -- 75.6 kB -- 23.5 kB
SnackbarContent -- 64.2 kB -- 20.1 kB
SpeedDial -- 84.3 kB -- 26.5 kB
SpeedDialAction -- 113 kB -- 35.9 kB
SpeedDialIcon -- 63 kB -- 19.8 kB
Step -- 61 kB -- 19.1 kB
StepButton -- 80.6 kB -- 25.3 kB
StepConnector -- 61.1 kB -- 19.2 kB
StepContent -- 67.4 kB -- 21 kB
StepIcon -- 63.1 kB -- 19.6 kB
StepLabel -- 67 kB -- 21 kB
Stepper -- 63.3 kB -- 19.9 kB
styles/createMuiTheme -- 15.2 kB -- 5.36 kB
SvgIcon -- 61.5 kB -- 19.1 kB
SwipeableDrawer -- 89 kB -- 27.6 kB
Switch -- 79.2 kB -- 24.7 kB
Tab -- 74.6 kB -- 23.6 kB
Table -- 61 kB -- 19.1 kB
TableBody -- 60.5 kB -- 18.9 kB
TableCell -- 62.5 kB -- 19.6 kB
TableFooter -- 60.5 kB -- 18.9 kB
TableHead -- 60.5 kB -- 18.9 kB
TablePagination -- 138 kB -- 40.3 kB
TableRow -- 60.9 kB -- 19.1 kB
TableSortLabel -- 75.6 kB -- 23.9 kB
Tabs -- 83.7 kB -- 26.7 kB
TextareaAutosize -- 5.06 kB -- 2.11 kB
TextField -- 120 kB -- 35.1 kB
ToggleButton -- 74.4 kB -- 23.5 kB
ToggleButtonGroup -- 61.6 kB -- 19.3 kB
Toolbar -- 60.7 kB -- 19 kB
Tooltip -- 97.5 kB -- 30.9 kB
TreeItem -- 71.8 kB -- 22.6 kB
TreeView -- 64.4 kB -- 20.2 kB
Typography -- 62.1 kB -- 19.3 kB
useMediaQuery -- 2.49 kB -- 1.05 kB
Zoom -- 22.1 kB -- 7.61 kB

Generated by 🚫 dangerJS against 667203d

@oliviertassinari oliviertassinari changed the title [Dialog] [Dialog] Fix labelledby and describedby placement [Dialog] Fix labelledby and describedby placement Oct 25, 2019
oliviertassinari
oliviertassinari approved these changes Oct 25, 2019
View reviewed changes
packages/material-ui/src/Dialog/Dialog.js
@@ -240,6 +242,8 @@ const Dialog = React.forwardRef(function Dialog(props, ref) {
<PaperComponent
elevation={24}
role="dialog"
aria-describedby={ariaDescribedby}
aria-labelledby={ariaLabelledby}
Copy link
Member

Choose a reason for hiding this comment

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

What's the motivation for applying these aria props on the Paper?

Copy link
Member Author

Choose a reason for hiding this comment

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

There's the role just one line above. They are not applied to the Paper specifically but the dialog. They were attached to a generic container before.

Copy link
Member

Choose a reason for hiding this comment

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

Thanks for the precision

@oliviertassinari oliviertassinari merged commit e09870b into mui:master Oct 26, 2019
@snyk-bot snyk-bot mentioned this pull request Jan 7, 2020
Open
@ZeeshanTamboli ZeeshanTamboli mentioned this pull request Oct 14, 2023
Closed
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@oliviertassinari oliviertassinari oliviertassinari approved these changes

Assignees
No one assigned
Labels
accessibility a11y component: dialog This is the name of the generic UI component, not the React module!
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Dialogs, accessibility] NVDA doesn't read anything after open a dialog
3 participants
@eps1lon @mui-pr-bot @oliviertassinari