From d9f7db1a977150ca277400c3d284b110a2533f6b Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Thu, 12 Dec 2019 13:32:55 -0600 Subject: [PATCH 1/3] lock button aria-pressed --- src/components/nav_drawer/nav_drawer.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/nav_drawer/nav_drawer.js b/src/components/nav_drawer/nav_drawer.js index f1d9a9eb067..bfd20f5b540 100644 --- a/src/components/nav_drawer/nav_drawer.js +++ b/src/components/nav_drawer/nav_drawer.js @@ -272,8 +272,7 @@ export class EuiNavDrawer extends Component { title: this.state.isLocked ? sideNavLockExpanded : sideNavLockCollapsed, - 'aria-checked': this.state.isLocked ? true : false, - role: 'switch', + 'aria-pressed': this.state.isLocked ? true : false, }} onClick={this.collapseButtonClick} data-test-subj={ From 5e4874e031a40c66534c71cda051bcaa70775654 Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Thu, 12 Dec 2019 14:23:14 -0600 Subject: [PATCH 2/3] maintain focus state --- src/components/list_group/list_group_item.tsx | 8 +++++++ src/components/nav_drawer/nav_drawer.js | 22 +++++++------------ 2 files changed, 16 insertions(+), 14 deletions(-) diff --git a/src/components/list_group/list_group_item.tsx b/src/components/list_group/list_group_item.tsx index 1dbb468b7be..40f318cdd5c 100644 --- a/src/components/list_group/list_group_item.tsx +++ b/src/components/list_group/list_group_item.tsx @@ -95,6 +95,12 @@ export type EuiListGroupItemProps = CommonProps & * Allow link text to wrap */ wrapText?: boolean; + + /** + * Pass-through ref reference specifically for targeting + * instances where the item content is rendered as a `button` + */ + buttonRef?: React.RefObject; }; export const EuiListGroupItem: FunctionComponent = ({ @@ -110,6 +116,7 @@ export const EuiListGroupItem: FunctionComponent = ({ size = 'm', showToolTip = false, wrapText, + buttonRef, ...rest }) => { const classes = classNames( @@ -200,6 +207,7 @@ export const EuiListGroupItem: FunctionComponent = ({ className="euiListGroupItem__button" disabled={isDisabled} onClick={onClick} + ref={buttonRef} {...rest as ButtonHTMLAttributes}> {iconNode} {labelContent} diff --git a/src/components/nav_drawer/nav_drawer.js b/src/components/nav_drawer/nav_drawer.js index bfd20f5b540..848d1fd8436 100644 --- a/src/components/nav_drawer/nav_drawer.js +++ b/src/components/nav_drawer/nav_drawer.js @@ -12,6 +12,7 @@ import { throttle } from '../color_picker/utils'; export class EuiNavDrawer extends Component { constructor(props) { super(props); + this.expandButtonRef; this.state = { isLocked: props.isLocked, @@ -65,19 +66,6 @@ export class EuiNavDrawer extends Component { }); }; - toggleOpen = () => { - this.setState({ - isCollapsed: !this.state.isCollapsed, - }); - - setTimeout(() => { - this.setState({ - outsideClickDisabled: this.state.isCollapsed ? true : false, - toolTipsEnabled: this.state.isCollapsed ? true : false, - }); - }, 150); - }; - collapseButtonClick = () => { if (this.state.isCollapsed) { this.expandDrawer(); @@ -86,6 +74,12 @@ export class EuiNavDrawer extends Component { } this.collapseFlyout(); + + requestAnimationFrame(() => { + if (this.expandButtonRef) { + this.expandButtonRef.focus(); + } + }); }; expandDrawer = () => { @@ -253,6 +247,7 @@ export class EuiNavDrawer extends Component { sideNavLockCollapsed, ]) => ( (this.expandButtonRef = node)} label={this.state.isCollapsed ? sideNavExpand : sideNavCollapse} iconType={this.state.isCollapsed ? 'menuRight' : 'menuLeft'} size="s" @@ -333,7 +328,6 @@ export class EuiNavDrawer extends Component { id="navDrawerMenu" className={menuClasses} onClick={this.handleDrawerMenuClick}> - {/* Put expand button first so it's first in tab order then on toggle starts the tabbing of the items from the top */} {/* TODO: Add a "skip navigation" keyboard only button */} {footerContent} {modifiedChildren} From 52b7e1e97c8244348050b747ec9d3032b6fb9b4f Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Thu, 12 Dec 2019 15:48:57 -0600 Subject: [PATCH 3/3] CL --- CHANGELOG.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0497e76d495..e1ced0ceebf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,10 +1,13 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Improved a11y of `EuiNavDrawer` lock button state via `aria-pressed` ([#2643](https://github.com/elastic/eui/pull/2643)) + **Bug fixes** - Improved `EuiDataGrid` update performance ([#2638](https://github.com/elastic/eui/pull/2638)) - Fixed `EuiDroppable` not accepting multiple children when using TypeScript ([#2634](https://github.com/elastic/eui/pull/2634)) -- Fixed `EuiComboBox` from submitting parent `form` element when selecting options via `Enter` key ([#2642](https://github.com/elastic/eui/pull/2642)) +- Fixed `EuiComboBox` from submitting parent `form` element when selecting options via `Enter` key ([#2642](https://github.com/elastic/eui/pull/2642)) +- Fixed `EuiNavDrawer` expand button from losing focus after click ([#2643](https://github.com/elastic/eui/pull/2643)) ## [`17.1.2`](https://github.com/elastic/eui/tree/v17.1.2)