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.

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

[Autocomplete] Fix aria-controls and aria-activedescendant #18142

Merged
merged 4 commits into from
Nov 3, 2019

Conversation

eps1lon
Copy link
Member

@eps1lon eps1lon commented Nov 1, 2019

I'm splitting work into smaller chunks starting with closing #18132

Tests https://www.w3.org/TR/wai-aria-1.1/#combobox except accessible name computation and keyboard navigation.

I'll remove the jsdom patch once this gets approved. It's easier to see that this is an issue with jsdom not our implementation

@eps1lon eps1lon added accessibility a11y component: autocomplete This is the name of the generic UI component, not the React module! labels Nov 1, 2019

fireEvent.keyDown(document.activeElement, { key: 'Escape' });

expect(handleClose.callCount).to.equal(1);
Copy link
Member Author

Choose a reason for hiding this comment

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

This will be called twice with jsdom actual because the implementation includes a .focus() noop that causes jsdom to fire a blur event which also calls onClose. In the browser this will work correctly.

@mui-pr-bot
Copy link

Details of bundle changes.

Comparing: 13b3a0d...24b80cb

bundle Size Change Size Gzip Change Gzip
useAutocomplete ▲ +18 B (+0.16% ) 11.1 kB ▲ +8 B (+0.19% ) 4.21 kB
@material-ui/lab ▲ +18 B (+0.01% ) 168 kB ▲ +5 B (+0.01% ) 50.6 kB
Autocomplete ▲ +18 B (+0.01% ) 124 kB ▲ +5 B (+0.01% ) 39.4 kB
@material-ui/core -- 349 kB -- 95.4 kB
@material-ui/core[umd] -- 308 kB -- 88.7 kB
@material-ui/styles -- 50.8 kB -- 15.4 kB
@material-ui/system -- 14.8 kB -- 4.07 kB
AppBar -- 62.2 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.7 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.1 kB -- 19.1 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 -- 80.9 kB -- 24.7 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
Dialog -- 80.9 kB -- 25.1 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 -- 56 kB -- 14.6 kB
docs.main -- 602 kB -- 192 kB
Drawer -- 82.7 kB -- 25.6 kB
ExpansionPanel -- 69.6 kB -- 21.7 kB
ExpansionPanelActions -- 60.5 kB -- 18.9 kB
ExpansionPanelDetails -- 60.4 kB -- 18.9 kB
ExpansionPanelSummary -- 76.3 kB -- 24 kB
Fab -- 75.1 kB -- 23.3 kB
Fade -- 22 kB -- 7.6 kB
FilledInput -- 72 kB -- 22.3 kB
FormControl -- 62.8 kB -- 19.5 kB
FormControlLabel -- 63.9 kB -- 20.1 kB
FormGroup -- 60.4 kB -- 18.9 kB
FormHelperText -- 61.7 kB -- 19.3 kB
FormLabel -- 61.9 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.2 kB
IconButton -- 74.4 kB -- 23.2 kB
Input -- 70.9 kB -- 22.1 kB
InputAdornment -- 63.5 kB -- 20 kB
InputBase -- 69 kB -- 21.6 kB
InputLabel -- 63.7 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.1 kB -- 20.6 kB
Modal -- 14.2 kB -- 4.96 kB
NativeSelect -- 75.2 kB -- 23.7 kB
NoSsr -- 2.19 kB -- 1.04 kB
OutlinedInput -- 72.4 kB -- 22.5 kB
Paper -- 60.6 kB -- 18.8 kB
Popover -- 81 kB -- 25 kB
Popper -- 28.5 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.4 kB
Skeleton -- 60.9 kB -- 19.1 kB
Slide -- 24.1 kB -- 8.21 kB
Slider -- 73.7 kB -- 23.3 kB
Snackbar -- 75.5 kB -- 23.5 kB
SnackbarContent -- 64 kB -- 20.1 kB
SpeedDial -- 84.3 kB -- 26.5 kB
SpeedDialAction -- 114 kB -- 36 kB
SpeedDialIcon -- 63 kB -- 19.8 kB
Step -- 61 kB -- 19.1 kB
StepButton -- 80.5 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.2 kB -- 19.8 kB
styles/createMuiTheme -- 15.2 kB -- 5.36 kB
SvgIcon -- 61.5 kB -- 19.1 kB
SwipeableDrawer -- 90 kB -- 27.9 kB
Switch -- 79.3 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 -- 139 kB -- 40.5 kB
TableRow -- 60.9 kB -- 19.1 kB
TableSortLabel -- 75.6 kB -- 23.9 kB
Tabs -- 83.7 kB -- 26.6 kB
TextareaAutosize -- 5.06 kB -- 2.11 kB
TextField -- 121 kB -- 35.4 kB
ToggleButton -- 74.4 kB -- 23.5 kB
ToggleButtonGroup -- 61.6 kB -- 19.4 kB
Toolbar -- 60.7 kB -- 19 kB
Tooltip -- 97.6 kB -- 30.9 kB
TreeItem -- 71.8 kB -- 22.6 kB
TreeView -- 64.4 kB -- 20.1 kB
Typography -- 62.1 kB -- 19.3 kB
useMediaQuery -- 2.49 kB -- 1.05 kB
Zoom -- 22.1 kB -- 7.6 kB

Generated by 🚫 dangerJS against 24b80cb

Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

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

So cool to have these new tests :)

}),
getListboxProps: () => ({
role: 'listbox',
id: `${id}-listbox`,
id: `${id}-popup`,
Copy link
Member

Choose a reason for hiding this comment

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

If the role of this element is listbox, should we suffix the id with -listbox?

Copy link
Member Author

Choose a reason for hiding this comment

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

The popup is the generic term for the "list" of possible items. It can also be a grid or tree. It makes more sense if you look at the aria-controls which doesn't care if you have a listbox or grid or tree. Just that the element in question is the popup with the possible items.

Copy link
Member

Choose a reason for hiding this comment

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

This seems correct, oops 🙃. What do you think of killing the getPopupProps() method and renaming PopupComponent to PopperComponent? (for future changes)

Copy link
Member Author

Choose a reason for hiding this comment

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

Why Popup to Popper?

Copy link
Member

Choose a reason for hiding this comment

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

I thought that the popup was a different element to the listbox. As you raised it out, it's not. Because the default value for PopupComponent is a Popper, the change could make the API more intuitive.

Copy link
Member Author

Choose a reason for hiding this comment

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

Yeah that makes sense.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility a11y component: autocomplete This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants