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) 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 f1d9a9eb067..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" @@ -272,8 +267,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={ @@ -334,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}