EuiNavDrawer a11y, pt. 1

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}