From 6c17fb46fadcafc0ab279c2986523c0b74dcb21b Mon Sep 17 00:00:00 2001 From: Dallin Christensen Date: Wed, 16 Jan 2019 15:37:13 -0800 Subject: [PATCH 1/6] add home and end keys to be handled in meathod handlekeydown --- packages/material-ui/src/MenuList/MenuList.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/material-ui/src/MenuList/MenuList.js b/packages/material-ui/src/MenuList/MenuList.js index a80474901eec12..4eb41c26951b6c 100644 --- a/packages/material-ui/src/MenuList/MenuList.js +++ b/packages/material-ui/src/MenuList/MenuList.js @@ -69,6 +69,12 @@ class MenuList extends React.Component { } else if (!this.props.disableListWrap) { list.lastChild.focus(); } + } else if (key === 'home') { + event.preventDefault(); + list.firstChild.focus(); + } else if (key === 'end') { + event.preventDefault(); + list.lastChild.focus(); } if (this.props.onKeyDown) { From dca19d2d960b05772de6a31315497e344005a441 Mon Sep 17 00:00:00 2001 From: Dallin Christensen Date: Wed, 16 Jan 2019 18:21:03 -0800 Subject: [PATCH 2/6] added support for home and end keys in MenuList --- packages/material-ui/src/ListItem/ListItem.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/material-ui/src/ListItem/ListItem.js b/packages/material-ui/src/ListItem/ListItem.js index 594315241a13ec..a92e6d47df5877 100644 --- a/packages/material-ui/src/ListItem/ListItem.js +++ b/packages/material-ui/src/ListItem/ListItem.js @@ -23,6 +23,9 @@ export const styles = theme => ({ '&$selected, &$selected:hover': { backgroundColor: theme.palette.action.selected, }, + '&:focus': { + backgroundColor: theme.palette.action.hover, + }, }, /* Styles applied to the `container` element if `children` includes `ListItemSecondaryAction`. */ container: { From 0c21738d1b9c6269416996e5d577b5f79e4947eb Mon Sep 17 00:00:00 2001 From: Dallin Christensen Date: Wed, 16 Jan 2019 18:34:11 -0800 Subject: [PATCH 3/6] added two tests for MenuList home and end key functionality --- packages/material-ui/test/integration/Menu.test.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/material-ui/test/integration/Menu.test.js b/packages/material-ui/test/integration/Menu.test.js index ede367dcefa909..f64b29e5fde879 100644 --- a/packages/material-ui/test/integration/Menu.test.js +++ b/packages/material-ui/test/integration/Menu.test.js @@ -62,6 +62,16 @@ describe(' integration', () => { assert.strictEqual(document.activeElement, portalLayer.querySelectorAll('li')[2]); }); + it('should switch focus from the 3rd item to the 1st item when home key is pressed', () => { + TestUtils.Simulate.keyDown(portalLayer.querySelector('ul'), { which: keycode('home') }); + assert.strictEqual(document.activeElement, portalLayer.querySelectorAll('li')[0]); + }); + + it('should switch focus from the 1st item to the 3rd item when end key is pressed', () => { + TestUtils.Simulate.keyDown(portalLayer.querySelector('ul'), { which: keycode('end') }); + assert.strictEqual(document.activeElement, portalLayer.querySelectorAll('li')[2]); + }); + it('should keep focus on the last item when a key with no associated action is pressed', () => { TestUtils.Simulate.keyDown(portalLayer.querySelector('ul'), { which: keycode('right') }); assert.strictEqual(document.activeElement, portalLayer.querySelectorAll('li')[2]); From cfe05877d9bfa458a9a25e9c19a907eed3033d08 Mon Sep 17 00:00:00 2001 From: Dallin Christensen Date: Wed, 16 Jan 2019 19:05:47 -0800 Subject: [PATCH 4/6] increased size limit of @material-ui/core --- .size-limit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.size-limit.js b/.size-limit.js index debbadfef2e5f6..1877bebe45dc66 100644 --- a/.size-limit.js +++ b/.size-limit.js @@ -22,7 +22,7 @@ module.exports = [ name: 'The size of the @material-ui/core modules', webpack: true, path: 'packages/material-ui/build/index.js', - limit: '95.2 KB', + limit: '95.3 KB', }, { name: 'The size of the @material-ui/styles modules', From f153908432e3c54d8622b7e42e2cfd0c0c83a27a Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 17 Jan 2019 09:06:44 +0100 Subject: [PATCH 5/6] Remove unrelated change At least the rationale for this change wasn't explained. --- packages/material-ui/src/ListItem/ListItem.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/material-ui/src/ListItem/ListItem.js b/packages/material-ui/src/ListItem/ListItem.js index a92e6d47df5877..594315241a13ec 100644 --- a/packages/material-ui/src/ListItem/ListItem.js +++ b/packages/material-ui/src/ListItem/ListItem.js @@ -23,9 +23,6 @@ export const styles = theme => ({ '&$selected, &$selected:hover': { backgroundColor: theme.palette.action.selected, }, - '&:focus': { - backgroundColor: theme.palette.action.hover, - }, }, /* Styles applied to the `container` element if `children` includes `ListItemSecondaryAction`. */ container: { From 24ccc8fba40abb75d0dabe2ed88fb52cd40204f2 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 17 Jan 2019 17:27:40 +0100 Subject: [PATCH 6/6] [ListItem] Improve focus style --- .../src/DialogContentText/DialogContentText.js | 2 +- packages/material-ui/src/ListItem/ListItem.js | 15 ++++++++------- packages/material-ui/src/Select/Select.js | 2 +- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/packages/material-ui/src/DialogContentText/DialogContentText.js b/packages/material-ui/src/DialogContentText/DialogContentText.js index 43be4cb11e7056..15a672cbc93025 100644 --- a/packages/material-ui/src/DialogContentText/DialogContentText.js +++ b/packages/material-ui/src/DialogContentText/DialogContentText.js @@ -8,7 +8,7 @@ import Typography from '../Typography'; export const styles = { /* Styles applied to the root element. */ root: { - // Should use variant="body1" in v4.0.0 + // Should use variant="body1" in v4 lineHeight: 1.5, }, }; diff --git a/packages/material-ui/src/ListItem/ListItem.js b/packages/material-ui/src/ListItem/ListItem.js index 594315241a13ec..60cfd00bfa1343 100644 --- a/packages/material-ui/src/ListItem/ListItem.js +++ b/packages/material-ui/src/ListItem/ListItem.js @@ -18,9 +18,9 @@ export const styles = theme => ({ width: '100%', boxSizing: 'border-box', textAlign: 'left', - paddingTop: 11, // To use 10px in v4.0.0 - paddingBottom: 11, // To use 10px in v4.0.0 - '&$selected, &$selected:hover': { + paddingTop: 11, // To use 10px in v4 + paddingBottom: 11, // To use 10px in v4 + '&$selected, &$selected:hover, &$selected:focus': { backgroundColor: theme.palette.action.selected, }, }, @@ -28,11 +28,9 @@ export const styles = theme => ({ container: { position: 'relative', }, - // TODO: Sanity check this - why is focusVisibleClassName prop apparently applied to a div? + // To remove in v4 /* Styles applied to the `component`'s `focusVisibleClassName` property if `button={true}`. */ - focusVisible: { - backgroundColor: theme.palette.action.hover, - }, + focusVisible: {}, /* Legacy styles applied to the root element. Use `root` instead. */ default: {}, /* Styles applied to the `component` element if `dense={true}` or `children` includes `Avatar`. */ @@ -71,6 +69,9 @@ export const styles = theme => ({ backgroundColor: 'transparent', }, }, + '&:focus': { + backgroundColor: theme.palette.action.hover, + }, }, /* Styles applied to the `component` element if `children` includes `ListItemSecondaryAction`. */ secondaryAction: { diff --git a/packages/material-ui/src/Select/Select.js b/packages/material-ui/src/Select/Select.js index 6be8d7cf5d1548..9e684379237994 100644 --- a/packages/material-ui/src/Select/Select.js +++ b/packages/material-ui/src/Select/Select.js @@ -9,7 +9,7 @@ import withFormControlContext from '../FormControl/withFormControlContext'; import withStyles from '../styles/withStyles'; import mergeClasses from '../styles/mergeClasses'; import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown'; -// To replace with InputBase in v4.0.0 +// To replace with InputBase in v4 import Input from '../Input'; import { styles as nativeSelectStyles } from '../NativeSelect/NativeSelect'; import NativeSelectInput from '../NativeSelect/NativeSelectInput';