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

[TextField] Fix label not being associated with native select #18141

Merged
merged 2 commits into from
Nov 1, 2019
Merged

[TextField] Fix label not being associated with native select #18141

merged 2 commits into from
Nov 1, 2019

Conversation

eps1lon
Copy link
Member

@eps1lon eps1lon commented Nov 1, 2019

Closes #18097

@eps1lon eps1lon added bug 🐛 Something doesn't work component: text field This is the name of the generic UI component, not the React module! labels Nov 1, 2019
eps1lon
eps1lon commented Nov 1, 2019
View reviewed changes
packages/material-ui/src/TextField/TextField.test.js
@@ -130,10 +130,25 @@ describe('<TextField />', () => {
</TextField>,
);

const select = getByRole('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.

This was never correct. See A11yance/aria-query#24

@mui-pr-bot
Copy link

mui-pr-bot commented Nov 1, 2019 •
edited
Loading

Details of bundle changes.

Comparing: 13b3a0d...466b49a

bundle Size Change Size Gzip Change Gzip
@material-ui/core ▲ +15 B (0.00% ) 349 kB ▲ +10 B (+0.01% ) 95.4 kB
@material-ui/core[umd] ▲ +15 B (0.00% ) 308 kB ▲ +10 B (+0.01% ) 88.7 kB
TextField ▲ +15 B (+0.01% ) 121 kB ▲ +10 B (+0.03% ) 35.4 kB
@material-ui/lab -- 168 kB -- 50.6 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
Autocomplete -- 124 kB -- 39.4 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
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
useAutocomplete -- 11.1 kB -- 4.21 kB
useMediaQuery -- 2.49 kB -- 1.05 kB
Zoom -- 22.1 kB -- 7.6 kB

Generated by 🚫 dangerJS against 466b49a

eps1lon
eps1lon commented Nov 1, 2019
View reviewed changes
docs/src/pages/components/text-fields/ValidationTextFields.js
@@ -30,7 +30,7 @@ export default function ValidationTextFields() {
/>
<TextField
error
id="standard-error"
id="standard-error-helper-text"
Copy link
Member Author

@eps1lon eps1lon Nov 1, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

Otherwise we got duplicate ids. Including this here so that we recover lighthouse a11y score for this page completely (except contrast).

@eps1lon eps1lon merged commit 54d1603 into mui:master Nov 1, 2019
@eps1lon eps1lon deleted the fix/TextField/select-labelling branch November 1, 2019 17:24
@snyk-bot snyk-bot mentioned this pull request Jan 7, 2020
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@joshwooding joshwooding joshwooding approved these changes

Assignees
No one assigned
Labels
accessibility a11y bug 🐛 Something doesn't work component: text field 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.

TextField with select=true and native does not add the DOM ID to the select element
4 participants
@eps1lon @mui-pr-bot @joshwooding @oliviertassinari