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

[core] Ignore meta, ctrl and alt in keyboard modality detection #17924

Merged
merged 1 commit into from
Oct 18, 2019
Merged

[core] Ignore meta, ctrl and alt in keyboard modality detection #17924

merged 1 commit into from
Oct 18, 2019

Conversation

adeelibr
Copy link
Contributor

@adeelibr adeelibr commented Oct 17, 2019 •
edited by oliviertassinari
Loading

Closes #16976

In Chrome, the last clicked button gets keyboard focus (you can tab to the previous or next button), but the keyboard focus indicator isn't shown until you leave and return to the page. #16976 (comment)

Fixes the above mentioned behavior.

@mui-pr-bot
Copy link

Details of bundle changes.

Comparing: 5d564f9...db83f85

bundle Size Change Size Gzip Change Gzip
Button ▲ +12 B (+0.02% ) 79.3 kB ▲ +16 B (+0.07% ) 24.5 kB
ButtonBase ▲ +12 B (+0.02% ) 73.8 kB ▲ +16 B (+0.07% ) 23.1 kB
CardActionArea ▲ +12 B (+0.02% ) 74.9 kB ▲ +16 B (+0.07% ) 23.6 kB
Link ▲ +12 B (+0.02% ) 66.6 kB ▲ +16 B (+0.08% ) 21 kB
StepButton ▲ +12 B (+0.01% ) 82.2 kB ▲ +16 B (+0.06% ) 25.8 kB
@material-ui/core ▲ +12 B (0.00% ) 348 kB ▲ +15 B (+0.02% ) 95.2 kB
BottomNavigationAction ▲ +12 B (+0.02% ) 75.3 kB ▲ +15 B (+0.06% ) 23.8 kB
Fab ▲ +12 B (+0.02% ) 76.7 kB ▲ +15 B (+0.06% ) 23.8 kB
IconButton ▲ +12 B (+0.02% ) 76 kB ▲ +15 B (+0.06% ) 23.7 kB
Radio ▲ +12 B (+0.01% ) 82.5 kB ▲ +15 B (+0.06% ) 25.9 kB
SpeedDial ▲ +12 B (+0.01% ) 85.9 kB ▲ +15 B (+0.06% ) 27 kB
Switch ▲ +12 B (+0.01% ) 80.8 kB ▲ +15 B (+0.06% ) 25.1 kB
Tab ▲ +12 B (+0.02% ) 76.2 kB ▲ +15 B (+0.06% ) 24.1 kB
ToggleButton ▲ +12 B (+0.02% ) 76 kB ▲ +15 B (+0.06% ) 24 kB
@material-ui/lab ▲ +12 B (+0.01% ) 145 kB ▲ +14 B (+0.03% ) 45 kB
ExpansionPanelSummary ▲ +12 B (+0.02% ) 77.9 kB ▲ +14 B (+0.06% ) 24.5 kB
ListItem ▲ +12 B (+0.02% ) 77 kB ▲ +14 B (+0.06% ) 24 kB
MenuItem ▲ +12 B (+0.02% ) 78 kB ▲ +14 B (+0.06% ) 24.3 kB
Slider ▲ +12 B (+0.02% ) 75.4 kB ▲ +14 B (+0.06% ) 23.7 kB
TablePagination ▲ +12 B (+0.01% ) 140 kB ▲ +14 B (+0.03% ) 40.7 kB
Checkbox ▲ +12 B (+0.01% ) 81.6 kB ▲ +13 B (+0.05% ) 25.6 kB
docs.main ▲ +12 B (0.00% ) 599 kB ▲ +13 B (+0.01% ) 191 kB
Rating ▲ +12 B (+0.02% ) 69.9 kB ▲ +13 B (+0.06% ) 22.3 kB
SpeedDialAction ▲ +12 B (+0.01% ) 115 kB ▲ +13 B (+0.04% ) 36.4 kB
TableSortLabel ▲ +12 B (+0.02% ) 77.2 kB ▲ +13 B (+0.05% ) 24.4 kB
Tabs ▲ +12 B (+0.01% ) 85.3 kB ▲ +13 B (+0.05% ) 27.1 kB
Tooltip ▲ +12 B (+0.01% ) 99.1 kB ▲ +12 B (+0.04% ) 31.4 kB
@material-ui/core[umd] ▲ +11 B (0.00% ) 307 kB ▲ +17 B (+0.02% ) 88.3 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
Box -- 70.8 kB -- 21.4 kB
Breadcrumbs -- 68 kB -- 21.3 kB
ButtonGroup -- 64.2 kB -- 20 kB
Card -- 62.9 kB -- 19.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
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
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
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
List -- 62.4 kB -- 19.3 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
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
RadioGroup -- 63.2 kB -- 19.7 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
Snackbar -- 77.1 kB -- 24 kB
SnackbarContent -- 65.8 kB -- 20.6 kB
SpeedDialIcon -- 64.6 kB -- 20.2 kB
Step -- 62.6 kB -- 19.6 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
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
TableRow -- 62.5 kB -- 19.5 kB
TextareaAutosize -- 5.06 kB -- 2.11 kB
TextField -- 121 kB -- 35.5 kB
ToggleButtonGroup -- 63.2 kB -- 19.8 kB
Toolbar -- 62.3 kB -- 19.5 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 db83f85

oliviertassinari
oliviertassinari approved these changes Oct 17, 2019
View reviewed changes
packages/material-ui/src/utils/focusVisible.js
@@ -119,7 +128,6 @@ function handleBlurVisible() {
window.clearTimeout(hadFocusVisibleRecentlyTimeout);
hadFocusVisibleRecentlyTimeout = window.setTimeout(() => {
hadFocusVisibleRecently = false;
window.clearTimeout(hadFocusVisibleRecentlyTimeout);
Copy link
Member

Choose a reason for hiding this comment

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

cleanup

packages/material-ui/src/utils/focusVisible.js
@@ -57,7 +67,6 @@ function handleKeyDown() {
* This avoids the situation where a user presses a key on an already focused
* element, and then clicks on a different element, focusing it with a
* pointing device, while we still think we're in keyboard modality.
* @param {Event} e
Copy link
Member

Choose a reason for hiding this comment

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

cleanup

packages/material-ui/src/utils/focusVisible.js
* @param {KeyboardEvent} event
*/
function handleKeyDown(event) {
if (event.metaKey || event.altKey || event.ctrlKey) {
Copy link
Member

Choose a reason for hiding this comment

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

the real change

@oliviertassinari oliviertassinari changed the title [Button] avoid key click focus on mouse click for Chrome [core] Ignore meta, ctrl and alt in keyboard modality detection Oct 17, 2019
@oliviertassinari oliviertassinari added the core Infrastructure work going on behind the scenes label Oct 17, 2019
@eps1lon eps1lon added accessibility a11y package: material-ui Specific to @mui/material and removed core Infrastructure work going on behind the scenes labels Oct 18, 2019
@oliviertassinari oliviertassinari merged commit 3729893 into mui:master Oct 18, 2019
@oliviertassinari
Copy link
Member

Thank you

@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

@eps1lon eps1lon eps1lon approved these changes

@oliviertassinari oliviertassinari oliviertassinari approved these changes

Assignees
No one assigned
Labels
accessibility a11y package: material-ui Specific to @mui/material
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Selected button breathing effect on Chrome
4 participants
@adeelibr @mui-pr-bot @oliviertassinari @eps1lon