Skip to content

Conversation

@oliviertassinari
Copy link
Member

Closes #18132

Solve most of the errors reported by Wave and https://validator.w3.org/.

@oliviertassinari oliviertassinari added accessibility a11y scope: autocomplete Changes related to the autocomplete. This includes ComboBox. labels Nov 9, 2019
@mui-pr-bot
Copy link

mui-pr-bot commented Nov 9, 2019

Details of bundle changes.

Comparing: 3d393bf...42aa823

bundle Size Change Size Gzip Change Gzip
Autocomplete ▲ +79 B (+0.06% ) 126 kB ▲ +16 B (+0.04% ) 39.9 kB
@material-ui/lab ▲ +79 B (+0.05% ) 170 kB ▲ +13 B (+0.03% ) 51.3 kB
docs.main ▲ +58 B (+0.01% ) 605 kB ▲ +9 B (0.00% ) 193 kB
useAutocomplete -- 12.2 kB ▼ -3 B (-0.07% ) 4.49 kB
@material-ui/core -- 349 kB -- 95.6 kB
@material-ui/core[umd] -- 309 kB -- 88.9 kB
@material-ui/styles -- 50.8 kB -- 15.4 kB
@material-ui/system -- 14.8 kB -- 4.06 kB
AppBar -- 62.2 kB -- 19.5 kB
Avatar -- 61.2 kB -- 19.3 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.8 kB -- 23.8 kB
ButtonBase -- 72.3 kB -- 22.6 kB
ButtonGroup -- 80.3 kB -- 24.6 kB
Card -- 61.2 kB -- 19.1 kB
CardActionArea -- 73.4 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.1 kB -- 25.1 kB
Chip -- 81 kB -- 24.7 kB
CircularProgress -- 62.5 kB -- 19.7 kB
ClickAwayListener -- 3.87 kB -- 1.56 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.2 kB
docs.landing -- 55.6 kB -- 14.6 kB
Drawer -- 82.7 kB -- 25.6 kB
ExpansionPanel -- 69.6 kB -- 21.7 kB
ExpansionPanelActions -- 60.5 kB -- 19 kB
ExpansionPanelDetails -- 60.4 kB -- 18.9 kB
ExpansionPanelSummary -- 76.4 kB -- 24.1 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.2 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.8 kB -- 19.9 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.96 kB
NativeSelect -- 75.2 kB -- 23.7 kB
NoSsr -- 2.19 kB -- 1.04 kB
OutlinedInput -- 72.5 kB -- 22.5 kB
Paper -- 60.7 kB -- 18.9 kB
Popover -- 81 kB -- 25 kB
Popper -- 28.5 kB -- 10.2 kB
Portal -- 2.87 kB -- 1.3 kB
Radio -- 81 kB -- 25.4 kB
RadioGroup -- 61.7 kB -- 19.3 kB
Rating -- 68.4 kB -- 21.9 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 -- 74 kB -- 23.3 kB
Snackbar -- 75.6 kB -- 23.5 kB
SnackbarContent -- 64.1 kB -- 20.1 kB
SpeedDial -- 84.3 kB -- 26.6 kB
SpeedDialAction -- 114 kB -- 36 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.2 kB -- 19.9 kB
styles/createMuiTheme -- 15.2 kB -- 5.36 kB
SvgIcon -- 61.5 kB -- 19.1 kB
SwipeableDrawer -- 90.1 kB -- 28 kB
Switch -- 79.4 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 -- 61 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 -- 121 kB -- 35.4 kB
ToggleButton -- 74.4 kB -- 23.5 kB
ToggleButtonGroup -- 61.6 kB -- 19.4 kB
Toolbar -- 60.8 kB -- 19 kB
Tooltip -- 97.6 kB -- 30.9 kB
TreeItem -- 72 kB -- 22.7 kB
TreeView -- 64.8 kB -- 20.3 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 42aa823


.token.boolean,
.token.number {
color: #b78eff;
Copy link
Member Author

Choose a reason for hiding this comment

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

Reach AA contrast level. The problem is more visible since the introduction of code previews.


return (
<Autocomplete
id="asynchronous-demo"
Copy link
Member Author

Choose a reason for hiding this comment

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

Fix id duplication, server-side as reported by https://validator.w3.org/.

<IconButton
{...getPopupIndicatorProps()}
disabled={disabled}
aria-label={popupOpen ? 'Close popup' : 'Open popup'}
Copy link
Member Author

Choose a reason for hiding this comment

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

Fix a Wave error, not all the screen readers handle title.

}),
getInputLabelProps: () => ({
id: `${id}-label`,
htmlFor: id,
Copy link
Member Author

Choose a reason for hiding this comment

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

In case somebody doesn't use our TextField.

// (autocomplete and autofill)
autoComplete: 'disabled',
ref: inputRef,
autoCorrect: 'off',
Copy link
Member Author

Choose a reason for hiding this comment

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

Invalid HTML attribute and seems legacy for older versions of Safari. I'm eager to try without.

'aria-controls': `${id}-popup`,
// autoComplete: 'off', // Disable browser's suggestion that might overlap with the popup.
autoComplete: 'disabled', // disable autocomplete and autofill
'aria-controls': popupOpen ? `${id}-popup` : null,
Copy link
Member Author

Choose a reason for hiding this comment

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

Fix https://validator.w3.org/ error were aria-controls points to a missing element.

>
{renderInput({
ref: setAnchorEl,
id,
Copy link
Member Author

Choose a reason for hiding this comment

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

Used by TextField to link the helper text, input, and label together. Error reported by Wave and https://validator.w3.org/.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

accessibility a11y scope: autocomplete Changes related to the autocomplete. This includes ComboBox.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Autocomplete] Input/Label association is broken for TextField

3 participants