[Snackbar] Change default role from 'alertdialog' to 'alert'

[emilyuhde]

• I have followed (at least) the PR section of the contributing guide.

Closes #17560

[mui-pr-bot]

Details of bundle changes.

Comparing: 5d564f9...25b66c7

bundle	Size Change	Size	Gzip Change	Gzip
docs.main	▲ +27 B (0.00% )	599 kB	▲ +14 B (+0.01% )	191 kB
@material-ui/core	▲ +27 B (+0.01% )	348 kB	▲ +13 B (+0.01% )	95.2 kB
SnackbarContent	▲ +27 B (+0.04% )	65.8 kB	▲ +10 B (+0.05% )	20.6 kB
@material-ui/core[umd]	▲ +27 B (+0.01% )	307 kB	▲ +6 B (+0.01% )	88.3 kB
Snackbar	▲ +27 B (+0.04% )	77.1 kB	▲ +5 B (+0.02% )	24 kB
@material-ui/lab	--	145 kB	--	45 kB
@material-ui/styles	--	51.8 kB	--	15.6 kB
@material-ui/system	--	15.7 kB	--	4.37 kB
AppBar	--	63.9 kB	--	19.9 kB
Avatar	--	62.7 kB	--	19.6 kB
Backdrop	--	67.7 kB	--	20.9 kB
Badge	--	65.4 kB	--	20.2 kB
BottomNavigation	--	62.4 kB	--	19.5 kB
BottomNavigationAction	--	75.3 kB	--	23.8 kB
Box	--	70.8 kB	--	21.4 kB
Breadcrumbs	--	68 kB	--	21.3 kB
Button	--	79.3 kB	--	24.5 kB
ButtonBase	--	73.8 kB	--	23.1 kB
ButtonGroup	--	64.2 kB	--	20 kB
Card	--	62.9 kB	--	19.6 kB
CardActionArea	--	74.9 kB	--	23.6 kB
CardActions	--	62 kB	--	19.3 kB
CardContent	--	62 kB	--	19.3 kB
CardHeader	--	65.1 kB	--	20.4 kB
CardMedia	--	62.4 kB	--	19.5 kB
Checkbox	--	81.6 kB	--	25.6 kB
Chip	--	70.6 kB	--	21.8 kB
CircularProgress	--	64.1 kB	--	20.1 kB
ClickAwayListener	--	3.85 kB	--	1.55 kB
Collapse	--	67.8 kB	--	20.9 kB
colorManipulator	--	3.83 kB	--	1.52 kB
Container	--	63.1 kB	--	19.6 kB
CssBaseline	--	57.6 kB	--	18 kB
Dialog	--	82.5 kB	--	25.6 kB
DialogActions	--	62.1 kB	--	19.4 kB
DialogContent	--	62.2 kB	--	19.4 kB
DialogContentText	--	64 kB	--	20 kB
DialogTitle	--	64.3 kB	--	20.1 kB
Divider	--	62.6 kB	--	19.6 kB
docs.landing	--	54.8 kB	--	14.5 kB
Drawer	--	84.3 kB	--	26 kB
ExpansionPanel	--	71.1 kB	--	22.1 kB
ExpansionPanelActions	--	62.1 kB	--	19.4 kB
ExpansionPanelDetails	--	61.9 kB	--	19.3 kB
ExpansionPanelSummary	--	77.9 kB	--	24.5 kB
Fab	--	76.7 kB	--	23.8 kB
Fade	--	23.1 kB	--	8.05 kB
FilledInput	--	73.1 kB	--	22.6 kB
FormControl	--	64.3 kB	--	19.9 kB
FormControlLabel	--	65.5 kB	--	20.5 kB
FormGroup	--	62 kB	--	19.3 kB
FormHelperText	--	63.3 kB	--	19.7 kB
FormLabel	--	63.3 kB	--	19.5 kB
Grid	--	65.1 kB	--	20.3 kB
GridList	--	62.5 kB	--	19.5 kB
GridListTile	--	63.7 kB	--	19.9 kB
GridListTileBar	--	63.2 kB	--	19.7 kB
Grow	--	23.7 kB	--	8.17 kB
Hidden	--	66.1 kB	--	20.6 kB
Icon	--	62.8 kB	--	19.6 kB
IconButton	--	76 kB	--	23.6 kB
Input	--	72 kB	--	22.4 kB
InputAdornment	--	65.1 kB	--	20.4 kB
InputBase	--	70.2 kB	--	22 kB
InputLabel	--	65.1 kB	--	20.2 kB
LinearProgress	--	65.3 kB	--	20.3 kB
Link	--	66.6 kB	--	21 kB
List	--	62.4 kB	--	19.3 kB
ListItem	--	77 kB	--	24 kB
ListItemAvatar	--	62.1 kB	--	19.4 kB
ListItemIcon	--	62.2 kB	--	19.4 kB
ListItemSecondaryAction	--	62 kB	--	19.3 kB
ListItemText	--	65 kB	--	20.4 kB
ListSubheader	--	62.8 kB	--	19.6 kB
Menu	--	88.3 kB	--	27.6 kB
MenuItem	--	78 kB	--	24.3 kB
MenuList	--	66 kB	--	20.6 kB
MobileStepper	--	67.7 kB	--	21.1 kB
Modal	--	14.3 kB	--	4.96 kB
NativeSelect	--	76.4 kB	--	24 kB
NoSsr	--	2.19 kB	--	1.04 kB
OutlinedInput	--	73.7 kB	--	22.9 kB
Paper	--	62.4 kB	--	19.3 kB
Popover	--	82.6 kB	--	25.4 kB
Popper	--	28.3 kB	--	10.2 kB
Portal	--	2.87 kB	--	1.29 kB
Radio	--	82.5 kB	--	25.9 kB
RadioGroup	--	63.2 kB	--	19.7 kB
Rating	--	69.8 kB	--	22.2 kB
RootRef	--	4.43 kB	--	1.67 kB
Select	--	113 kB	--	33.6 kB
Skeleton	--	62.5 kB	--	19.6 kB
Slide	--	25.1 kB	--	8.68 kB
Slider	--	75.3 kB	--	23.7 kB
SpeedDial	--	85.9 kB	--	27 kB
SpeedDialAction	--	115 kB	--	36.4 kB
SpeedDialIcon	--	64.6 kB	--	20.2 kB
Step	--	62.6 kB	--	19.6 kB
StepButton	--	82.1 kB	--	25.8 kB
StepConnector	--	62.7 kB	--	19.6 kB
StepContent	--	69 kB	--	21.4 kB
StepIcon	--	64.7 kB	--	20.1 kB
StepLabel	--	68.6 kB	--	21.4 kB
Stepper	--	64.9 kB	--	20.3 kB
styles/createMuiTheme	--	16.3 kB	--	5.79 kB
SvgIcon	--	63 kB	--	19.6 kB
SwipeableDrawer	--	90.7 kB	--	28 kB
Switch	--	80.8 kB	--	25.1 kB
Tab	--	76.2 kB	--	24.1 kB
Table	--	62.6 kB	--	19.5 kB
TableBody	--	62.1 kB	--	19.3 kB
TableCell	--	64.1 kB	--	20.1 kB
TableFooter	--	62.1 kB	--	19.3 kB
TableHead	--	62.1 kB	--	19.3 kB
TablePagination	--	140 kB	--	40.7 kB
TableRow	--	62.5 kB	--	19.5 kB
TableSortLabel	--	77.2 kB	--	24.4 kB
Tabs	--	85.3 kB	--	27.1 kB
TextareaAutosize	--	5.06 kB	--	2.11 kB
TextField	--	121 kB	--	35.5 kB
ToggleButton	--	76 kB	--	23.9 kB
ToggleButtonGroup	--	63.2 kB	--	19.8 kB
Toolbar	--	62.3 kB	--	19.5 kB
Tooltip	--	99.1 kB	--	31.4 kB
TreeItem	--	73.4 kB	--	23.1 kB
TreeView	--	66 kB	--	20.6 kB
Typography	--	63.7 kB	--	19.8 kB
useMediaQuery	--	2.49 kB	--	1.05 kB
Zoom	--	23.1 kB	--	8.06 kB

Generated by 🚫 dangerJS against 25b66c7

[eps1lon]

Thank you very much for fixing an a11y issue. I left some comments at lines that need some work.

[oliviertassinari]

Should we document it the role aspect with an accessibility section at the bottom of the page (as with the other components)?

[emilyuhde]

Should we document it the role aspect with an accessibility section at the bottom of the page (as with the other components)?

Added! I also added the new section to the non-English language docs (but it's still in English so they will need to be translated).

[emilyuhde]

I have one question regarding the default role value. Should it be alert instead of alertdialog? It seems that we are using the alert "mode" more frequently. This is also based on the observation that https://getbootstrap.com/docs/4.3/components/toasts/ use alert exclusively. Reading https://www.w3.org/TR/wai-aria-practices/#alertdialog, I'm wondering if alertdialog can be used for the toast at all. The alertdialog role seems to ask for a user confirmation, something the snackbar can't require (no usage of the Modal)

@oliviertassinari I made the default alertdialog because I didn't want this change to accidentally break anyone whose usage was relying on role="alertdialog". I agree though that most uses, at least on the site examples, need to have role="alert".

My understanding of the WAI ARIA specifications is that if the toast/snackbar/alert requires focus, then it should get role="alertdialog". So including buttons, links, close icons, anything like that would make it an alertdialog not an alert.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role
"If an alert also provides interactive controls (such as form controls that allow the user to rectify a problem, or an "OK" button that discards the alert) the alertdialog role should be used instead."

[oliviertassinari]

@emilyuhde Thanks for the feedback, I have added a note about a potential breaking change for v5 (so we don't forget it)

[eps1lon]

I appreciate the concern for potential breaking changes.

Though the default dialog is not an alertdialog. It doesn't require an action (even resolves itself after a certain amount of time has passed) and doesn't wrap focus. I'd rather default this to alert and make it obvious in the PR title that we changed the default role (because it will appear that way in the changelog).

If somebody enhanced their snackbar to implement alertdialog properly then I'm ok with breaking their code. Maybe then they will open an issue so we can ask if they want to contribute their bug fix back 😉

PS: NVDA either seems to fixup current issues with alertdialog or doesn't distinguish between alertdialog or alert anyway.

[oliviertassinari]

@eps1lon so we don't wait v5 for making the change? No objection 👍

[oliviertassinari]

@emilyuhde What do you think? Do you want to update the default value in this pull request? Alternatively, we can handle it, later on. Your work is already a significant step forward.

[emilyuhde]

@emilyuhde What do you think? Do you want to update the default value in this pull request? Alternatively, we can handle it, later on. Your work is already a significant step forward.

That's fine. I can update the PR to set the default to 'alert' and I'll update the examples accordingly when I get a chance in a few hours.

[eps1lon]

@emilyuhde Perfect, thanks for sticking with it 👍