EuiNavDrawer a11y, pt. 1

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)
 

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<HTMLButtonElement>;
   };
 
 export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps> = ({
@@ -110,6 +116,7 @@ export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps> = ({
   size = 'm',
   showToolTip = false,
   wrapText,
+  buttonRef,
   ...rest
 }) => {
   const classes = classNames(
@@ -200,6 +207,7 @@ export const EuiListGroupItem: FunctionComponent<EuiListGroupItemProps> = ({
         className="euiListGroupItem__button"
         disabled={isDisabled}
         onClick={onClick}
+        ref={buttonRef}
         {...rest as ButtonHTMLAttributes<HTMLButtonElement>}>
         {iconNode}
         {labelContent}

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,
             ]) => (
               <EuiListGroupItem
+                buttonRef={node => (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}