From 883b75fe2e904a57a62beea6878b52fc1c636b61 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Thu, 9 Jan 2020 12:01:22 -0600
Subject: [PATCH 01/12] nav drawer focus; nav drawer flyout autoclose

---
 src-docs/src/views/nav_drawer/nav_drawer.js   |  6 +-
 .../__snapshots__/nav_drawer.test.js.snap     | 72 +++++++++++++++++--
 src/components/nav_drawer/nav_drawer.js       | 40 ++++++++---
 .../nav_drawer/nav_drawer_flyout.js           | 36 ++++++++--
 src/components/nav_drawer/nav_drawer_group.js | 17 ++++-
 5 files changed, 144 insertions(+), 27 deletions(-)

diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js
index f295b81e009..d9bb48d6df2 100644
--- a/src-docs/src/views/nav_drawer/nav_drawer.js
+++ b/src-docs/src/views/nav_drawer/nav_drawer.js
@@ -262,9 +262,9 @@ export default class extends Component {
 
   onKeyDown = event => {
     if (event.keyCode === keyCodes.ESCAPE) {
-      event.preventDefault();
-      event.stopPropagation();
-      this.closeFullScreen();
+      //   event.preventDefault();
+      //   event.stopPropagation();
+      //   this.closeFullScreen();
     }
   };
 
diff --git a/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap b/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap
index 62d0b4ff117..05ff946e4fc 100644
--- a/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap
+++ b/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap
@@ -294,8 +294,28 @@ exports[`EuiNavDrawer is rendered 1`] = `
         id="navDrawerFlyoutTitle"
         tabindex="-1"
       />
-      <ul
-        class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup euiNavDrawerFlyout__listGroup"
+      <div
+        data-focus-guard="true"
+        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+        tabindex="0"
+      />
+      <div
+        data-focus-guard="true"
+        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+        tabindex="1"
+      />
+      <div
+        data-focus-lock-disabled="false"
+      >
+        <ul
+          class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup euiNavDrawerFlyout__listGroup"
+          id="flyoutLinks"
+        />
+      </div>
+      <div
+        data-focus-guard="true"
+        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+        tabindex="0"
       />
     </div>
   </div>
@@ -534,8 +554,28 @@ exports[`EuiNavDrawer renders with falsy children 1`] = `
         id="navDrawerFlyoutTitle"
         tabindex="-1"
       />
-      <ul
-        class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup euiNavDrawerFlyout__listGroup"
+      <div
+        data-focus-guard="true"
+        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+        tabindex="0"
+      />
+      <div
+        data-focus-guard="true"
+        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+        tabindex="1"
+      />
+      <div
+        data-focus-lock-disabled="false"
+      >
+        <ul
+          class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup euiNavDrawerFlyout__listGroup"
+          id="flyoutLinks"
+        />
+      </div>
+      <div
+        data-focus-guard="true"
+        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+        tabindex="0"
       />
     </div>
   </div>
@@ -836,8 +876,28 @@ exports[`EuiNavDrawer renders with fragments 1`] = `
         id="navDrawerFlyoutTitle"
         tabindex="-1"
       />
-      <ul
-        class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup euiNavDrawerFlyout__listGroup"
+      <div
+        data-focus-guard="true"
+        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+        tabindex="0"
+      />
+      <div
+        data-focus-guard="true"
+        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+        tabindex="1"
+      />
+      <div
+        data-focus-lock-disabled="false"
+      >
+        <ul
+          class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup euiNavDrawerFlyout__listGroup"
+          id="flyoutLinks"
+        />
+      </div>
+      <div
+        data-focus-guard="true"
+        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+        tabindex="0"
       />
     </div>
   </div>
diff --git a/src/components/nav_drawer/nav_drawer.js b/src/components/nav_drawer/nav_drawer.js
index c9ccf97474d..98c412de66f 100644
--- a/src/components/nav_drawer/nav_drawer.js
+++ b/src/components/nav_drawer/nav_drawer.js
@@ -9,6 +9,8 @@ import { EuiI18n } from '../i18n';
 import { EuiFlexItem, EuiFlexGroup } from '../flex';
 import { throttle } from '../color_picker/utils';
 
+const MENU_ELEMENT_ID = 'navDrawerMenu';
+
 export class EuiNavDrawer extends Component {
   constructor(props) {
     super(props);
@@ -21,6 +23,7 @@ export class EuiNavDrawer extends Component {
       outsideClickDisabled: true,
       isManagingFocus: false,
       toolTipsEnabled: true,
+      focusReturnRef: null,
     };
   }
 
@@ -161,7 +164,7 @@ export class EuiNavDrawer extends Component {
     }, 0);
   };
 
-  expandFlyout = (links, title) => {
+  expandFlyout = (links, title, item) => {
     const content = links;
 
     if (this.state.navFlyoutTitle === title) {
@@ -174,22 +177,38 @@ export class EuiNavDrawer extends Component {
         isCollapsed: this.state.isLocked ? false : true,
         toolTipsEnabled: false,
         outsideClickDisabled: false,
+        focusReturnRef: item.label,
       });
     }
   };
 
-  collapseFlyout = () => {
-    this.setState({
-      flyoutIsCollapsed: true,
-      navFlyoutTitle: null,
-      navFlyoutContent: null,
-      toolTipsEnabled: this.state.isLocked ? false : true,
-    });
+  collapseFlyout = (shouldReturnFocus = true) => {
+    const focusReturn = this.state.focusReturnRef;
+    this.setState(
+      {
+        flyoutIsCollapsed: true,
+        navFlyoutTitle: null,
+        navFlyoutContent: null,
+        toolTipsEnabled: this.state.isLocked ? false : true,
+        focusReturnRef: null,
+      },
+      () => {
+        if (shouldReturnFocus) {
+          // Ideally this uses React `ref` instead of `querySelector`, but the menu composition
+          // does not allow for deep `ref` element management at present
+          const element = document.querySelector(
+            `#${MENU_ELEMENT_ID} [aria-label='${focusReturn}']`
+          );
+          if (!element) return;
+          requestAnimationFrame(() => element.focus());
+        }
+      }
+    );
   };
 
   closeBoth = () => {
     if (!this.state.isLocked) this.collapseDrawer();
-    this.collapseFlyout();
+    this.collapseFlyout(false);
   };
 
   handleDrawerMenuClick = e => {
@@ -325,6 +344,7 @@ export class EuiNavDrawer extends Component {
         isCollapsed={this.state.flyoutIsCollapsed}
         listItems={this.state.navFlyoutContent}
         wrapText
+        onClose={this.collapseFlyout}
       />
     );
 
@@ -349,7 +369,7 @@ export class EuiNavDrawer extends Component {
             onFocus={this.manageFocus}>
             <EuiFlexItem grow={false}>
               <div
-                id="navDrawerMenu"
+                id={MENU_ELEMENT_ID}
                 className={menuClasses}
                 onClick={this.handleDrawerMenuClick}>
                 {/* TODO: Add a "skip navigation" keyboard only button */}
diff --git a/src/components/nav_drawer/nav_drawer_flyout.js b/src/components/nav_drawer/nav_drawer_flyout.js
index b7b2d8c9cee..758ce73233b 100644
--- a/src/components/nav_drawer/nav_drawer_flyout.js
+++ b/src/components/nav_drawer/nav_drawer_flyout.js
@@ -2,9 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+import { keyCodes } from '../../services';
+
 import { EuiTitle } from '../title';
 import { EuiNavDrawerGroup } from './nav_drawer_group';
 import { EuiListGroup } from '../list_group/list_group';
+import { EuiFocusTrap } from '../focus_trap';
 
 export const EuiNavDrawerFlyout = ({
   className,
@@ -12,6 +15,7 @@ export const EuiNavDrawerFlyout = ({
   isCollapsed,
   listItems,
   wrapText,
+  onClose,
   ...rest
 }) => {
   const classes = classNames(
@@ -23,16 +27,30 @@ export const EuiNavDrawerFlyout = ({
     className
   );
 
+  const handleKeyDown = e => {
+    if (e.keyCode === keyCodes.ESCAPE) {
+      onClose();
+    }
+  };
+
   return (
-    <div className={classes} aria-labelledby="navDrawerFlyoutTitle" {...rest}>
+    <div
+      className={classes}
+      aria-labelledby="navDrawerFlyoutTitle"
+      onKeyDown={handleKeyDown}
+      {...rest}>
       <EuiTitle className="euiNavDrawerFlyout__title" tabIndex="-1" size="xxs">
         <div id="navDrawerFlyoutTitle">{title}</div>
       </EuiTitle>
-      <EuiNavDrawerGroup
-        className="euiNavDrawerFlyout__listGroup"
-        listItems={listItems}
-        wrapText={wrapText}
-      />
+      <EuiFocusTrap returnFocus={false}>
+        <EuiNavDrawerGroup
+          id="flyoutLinks"
+          className="euiNavDrawerFlyout__listGroup"
+          listItems={listItems}
+          wrapText={wrapText}
+          onClose={() => onClose(false)}
+        />
+      </EuiFocusTrap>
     </div>
   );
 };
@@ -51,6 +69,12 @@ EuiNavDrawerFlyout.propTypes = {
    * Toggle the nav drawer between collapsed and expanded
    */
   isCollapsed: PropTypes.bool,
+
+  /**
+   * Passthrough function to be called when the flyout is closing
+   * See ./nav_drawer.js
+   */
+  onClose: PropTypes.func,
 };
 
 EuiNavDrawerFlyout.defaultProps = {
diff --git a/src/components/nav_drawer/nav_drawer_group.js b/src/components/nav_drawer/nav_drawer_group.js
index 46cca1c6b37..9c8c0a2c37e 100644
--- a/src/components/nav_drawer/nav_drawer_group.js
+++ b/src/components/nav_drawer/nav_drawer_group.js
@@ -9,6 +9,7 @@ export const EuiNavDrawerGroup = ({
   className,
   listItems,
   flyoutMenuButtonClick,
+  onClose = () => {},
   ...rest
 }) => {
   const classes = classNames('euiNavDrawerGroup', className);
@@ -20,11 +21,18 @@ export const EuiNavDrawerGroup = ({
     ? undefined
     : listItems.map(item => {
         // If the flyout menu exists, pass back the list of times and the title with the onClick handler of the item
-        const { flyoutMenu, ...itemProps } = item;
+        const { flyoutMenu, onClick, ...itemProps } = item;
         if (flyoutMenu && flyoutMenuButtonClick) {
           const items = [...flyoutMenu.listItems];
           const title = `${flyoutMenu.title}`;
-          itemProps.onClick = () => flyoutMenuButtonClick(items, title);
+          itemProps.onClick = e => flyoutMenuButtonClick(items, title, item, e);
+        } else {
+          itemProps.onClick = (...args) => {
+            if (onClick) {
+              onClick(...args);
+            }
+            onClose();
+          };
         }
 
         // Make some declarations of props for the side nav implementation
@@ -69,4 +77,9 @@ EuiNavDrawerGroup.propTypes = {
    * of the flyout menu button click
    */
   flyoutMenuButtonClick: PropTypes.func,
+  /**
+   * Passthrough function to be called when the flyout is closing
+   * See ./nav_drawer.js
+   */
+  onClose: PropTypes.func,
 };

From 1698ffa726c2b3bff2c6ee500aae08f9735890a9 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Thu, 9 Jan 2020 12:27:05 -0600
Subject: [PATCH 02/12] clean up

---
 .../nav_drawer/__snapshots__/nav_drawer.test.js.snap           | 3 ---
 src/components/nav_drawer/nav_drawer_flyout.js                 | 1 -
 src/components/nav_drawer/nav_drawer_group.js                  | 2 +-
 3 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap b/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap
index 05ff946e4fc..8f06b68e7db 100644
--- a/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap
+++ b/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap
@@ -309,7 +309,6 @@ exports[`EuiNavDrawer is rendered 1`] = `
       >
         <ul
           class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup euiNavDrawerFlyout__listGroup"
-          id="flyoutLinks"
         />
       </div>
       <div
@@ -569,7 +568,6 @@ exports[`EuiNavDrawer renders with falsy children 1`] = `
       >
         <ul
           class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup euiNavDrawerFlyout__listGroup"
-          id="flyoutLinks"
         />
       </div>
       <div
@@ -891,7 +889,6 @@ exports[`EuiNavDrawer renders with fragments 1`] = `
       >
         <ul
           class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup euiNavDrawerFlyout__listGroup"
-          id="flyoutLinks"
         />
       </div>
       <div
diff --git a/src/components/nav_drawer/nav_drawer_flyout.js b/src/components/nav_drawer/nav_drawer_flyout.js
index 758ce73233b..75103482c77 100644
--- a/src/components/nav_drawer/nav_drawer_flyout.js
+++ b/src/components/nav_drawer/nav_drawer_flyout.js
@@ -44,7 +44,6 @@ export const EuiNavDrawerFlyout = ({
       </EuiTitle>
       <EuiFocusTrap returnFocus={false}>
         <EuiNavDrawerGroup
-          id="flyoutLinks"
           className="euiNavDrawerFlyout__listGroup"
           listItems={listItems}
           wrapText={wrapText}
diff --git a/src/components/nav_drawer/nav_drawer_group.js b/src/components/nav_drawer/nav_drawer_group.js
index 9c8c0a2c37e..c14752c3eb6 100644
--- a/src/components/nav_drawer/nav_drawer_group.js
+++ b/src/components/nav_drawer/nav_drawer_group.js
@@ -25,7 +25,7 @@ export const EuiNavDrawerGroup = ({
         if (flyoutMenu && flyoutMenuButtonClick) {
           const items = [...flyoutMenu.listItems];
           const title = `${flyoutMenu.title}`;
-          itemProps.onClick = e => flyoutMenuButtonClick(items, title, item, e);
+          itemProps.onClick = () => flyoutMenuButtonClick(items, title, item);
         } else {
           itemProps.onClick = (...args) => {
             if (onClick) {

From c8c1cc29b13f29014e27735887376a5f0dd76b08 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Thu, 9 Jan 2020 14:36:11 -0600
Subject: [PATCH 03/12] update example

---
 src-docs/src/views/nav_drawer/nav_drawer.js | 314 ++++++++++++++------
 1 file changed, 221 insertions(+), 93 deletions(-)

diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js
index d9bb48d6df2..08b4bfe7722 100644
--- a/src-docs/src/views/nav_drawer/nav_drawer.js
+++ b/src-docs/src/views/nav_drawer/nav_drawer.js
@@ -121,110 +121,223 @@ export default class extends Component {
       },
     ];
 
-    this.exploreLinks = [
+    this.adminLinks = [
       {
-        label: 'Canvas',
-        href: '#/layout/nav-drawer',
-        iconType: 'canvasApp',
-        isActive: true,
-        extraAction: {
-          ...pinExtraActionFn('Canvas'),
-          alwaysShow: true,
+        label: 'Admin',
+        iconType: 'managementApp',
+        flyoutMenu: {
+          title: 'Tools and settings',
+          listItems: [
+            {
+              label: 'Dev tools',
+              href: '#/layout/nav-drawer',
+              iconType: 'devToolsApp',
+              extraAction: {
+                color: 'subdued',
+                iconType: 'starEmpty',
+                iconSize: 's',
+                'aria-label': 'Add to favorites',
+              },
+            },
+            {
+              label: 'Stack Monitoring',
+              href: '#/layout/nav-drawer',
+              iconType: 'monitoringApp',
+              extraAction: {
+                color: 'subdued',
+                iconType: 'starEmpty',
+                iconSize: 's',
+                'aria-label': 'Add to favorites',
+              },
+            },
+            {
+              label: 'Stack Management',
+              href: '#/layout/nav-drawer',
+              iconType: 'managementApp',
+              extraAction: {
+                color: 'subdued',
+                iconType: 'starEmpty',
+                iconSize: 's',
+                'aria-label': 'Add to favorites',
+              },
+            },
+            {
+              label: 'Nature Plugin (image as icon)',
+              href: '#/layout/nav-drawer',
+              extraAction: { ...pinExtraActionFn('Nature Plugin') },
+              icon: (
+                <EuiImage
+                  size="s"
+                  alt="Random nature image"
+                  url="https://source.unsplash.com/300x300/?Nature"
+                />
+              ),
+            },
+          ],
         },
       },
-      {
-        label: 'Discover',
-        href: '#/layout/nav-drawer',
-        iconType: 'discoverApp',
-        extraAction: { ...pinExtraActionFn('Discover') },
-      },
-      {
-        label: 'Visualize',
-        href: '#/layout/nav-drawer',
-        iconType: 'visualizeApp',
-        extraAction: { ...pinExtraActionFn('Visualize') },
-      },
-      {
-        label: 'Dashboard',
-        href: '#/layout/nav-drawer',
-        iconType: 'dashboardApp',
-        extraAction: { ...pinExtraActionFn('Dashboard') },
-      },
-      {
-        label: 'Machine learning',
-        href: '#/layout/nav-drawer',
-        iconType: 'machineLearningApp',
-        extraAction: { ...pinExtraActionFn('Machine learning') },
-      },
-      {
-        label: 'Custom Plugin (no icon)',
-        href: '#/layout/nav-drawer',
-        extraAction: { ...pinExtraActionFn('Custom Plugin') },
-      },
-      {
-        label: 'Nature Plugin (image as icon)',
-        href: '#/layout/nav-drawer',
-        extraAction: { ...pinExtraActionFn('Nature Plugin') },
-        icon: (
-          <EuiImage
-            size="s"
-            alt="Random nature image"
-            url="https://source.unsplash.com/300x300/?Nature"
-          />
-        ),
-      },
     ];
 
-    this.solutionsLinks = [
-      {
-        label: 'APM',
-        href: '#/layout/nav-drawer',
-        iconType: 'apmApp',
-        extraAction: { ...pinExtraActionFn('APM') },
-      },
-      {
-        label: 'Metrics',
-        href: '#/layout/nav-drawer',
-        iconType: 'metricsApp',
-        extraAction: { ...pinExtraActionFn('Infrastructure') },
-      },
-      {
-        label: 'Logs',
-        href: '#/layout/nav-drawer',
-        iconType: 'logsApp',
-        extraAction: { ...pinExtraActionFn('Log viewer') },
-      },
+    this.analyzeLinks = [
       {
-        label: 'Uptime',
-        href: '#/layout/nav-drawer',
-        iconType: 'upgradeAssistantApp',
-        extraAction: { ...pinExtraActionFn('Uptime') },
+        label: 'Analyze',
+        iconType: 'logoBusinessAnalytics',
+        flyoutMenu: {
+          title: 'Analyze your data',
+          listItems: [
+            {
+              label: 'Discover',
+              href: '#/layout/nav-drawer',
+              iconType: 'discoverApp',
+              extraAction: {
+                color: 'subdued',
+                iconType: 'starEmpty',
+                iconSize: 's',
+                'aria-label': 'Add to favorites',
+              },
+            },
+            {
+              label: 'Visualize',
+              href: '#/layout/nav-drawer',
+              iconType: 'visualizeApp',
+              extraAction: {
+                color: 'subdued',
+                iconType: 'starEmpty',
+                iconSize: 's',
+                'aria-label': 'Add to favorites',
+              },
+            },
+            {
+              label: 'Canvas',
+              href: '#/layout/nav-drawer',
+              iconType: 'canvasApp',
+              extraAction: {
+                color: 'subdued',
+                iconType: 'starEmpty',
+                iconSize: 's',
+                'aria-label': 'Add to favorites',
+              },
+            },
+            {
+              label: 'Maps',
+              href: '#/layout/nav-drawer',
+              iconType: 'gisApp',
+              extraAction: {
+                color: 'subdued',
+                iconType: 'starEmpty',
+                iconSize: 's',
+                'aria-label': 'Add to favorites',
+              },
+            },
+            {
+              label: 'Machine Learning',
+              href: '#/layout/nav-drawer',
+              iconType: 'machineLearningApp',
+              extraAction: {
+                color: 'subdued',
+                iconType: 'starEmpty',
+                iconSize: 's',
+                'aria-label': 'Add to favorites',
+              },
+            },
+            {
+              label: 'Graph',
+              href: '#/layout/nav-drawer',
+              iconType: 'graphApp',
+              extraAction: {
+                color: 'subdued',
+                iconType: 'starEmpty',
+                iconSize: 's',
+                'aria-label': 'Add to favorites',
+              },
+            },
+          ],
+        },
       },
+    ];
+    this.securityLinks = [
       {
-        label: 'Maps',
-        href: '#/layout/nav-drawer',
-        iconType: 'gisApp',
-        extraAction: { ...pinExtraActionFn('Maps') },
+        label: 'Security',
+        iconType: 'logoSecurity',
+        flyoutMenu: {
+          title: 'Security',
+          listItems: [
+            {
+              label: 'SIEM',
+              href: '#/layout/nav-drawer',
+              iconType: 'securityApp',
+              extraAction: { ...pinExtraActionFn('SIEM') },
+            },
+            {
+              label: 'Endpoints',
+              href: '#/layout/nav-drawer',
+              iconType: 'securityAnalyticsApp',
+              extraAction: {
+                color: 'subdued',
+                iconType: 'starEmpty',
+                iconSize: 's',
+                'aria-label': 'Add to favorites',
+              },
+            },
+          ],
+        },
       },
+    ];
+    this.searchLinks = [
       {
-        label: 'SIEM',
-        href: '#/layout/nav-drawer',
-        iconType: 'securityAnalyticsApp',
-        extraAction: { ...pinExtraActionFn('SIEM') },
+        label: 'Enterprise Search',
+        iconType: 'logoAppSearch',
+        flyoutMenu: {
+          title: 'Enterprise search',
+          listItems: [
+            {
+              label: 'Site search',
+              href: '#/layout/nav-drawer',
+              iconType: 'searchProfilerApp',
+              extraAction: {
+                color: 'subdued',
+                iconType: 'starEmpty',
+                iconSize: 's',
+                'aria-label': 'Add to favorites',
+              },
+            },
+            {
+              label: 'App search',
+              href: '#/layout/nav-drawer',
+              iconType: 'searchProfilerApp',
+              extraAction: {
+                color: 'subdued',
+                iconType: 'starEmpty',
+                iconSize: 's',
+                'aria-label': 'Add to favorites',
+              },
+            },
+            {
+              label: 'Workplace search',
+              href: '#/layout/nav-drawer',
+              iconType: 'searchProfilerApp',
+              extraAction: {
+                color: 'subdued',
+                iconType: 'starEmpty',
+                iconSize: 's',
+                'aria-label': 'Add to favorites',
+              },
+            },
+          ],
+        },
       },
     ];
-
-    this.adminLinks = [
+    this.observabilityLinks = [
       {
-        label: 'Admin',
-        iconType: 'managementApp',
+        label: 'Observability',
+        iconType: 'logoMetrics',
         flyoutMenu: {
-          title: 'Tools and settings',
+          title: 'Observe your operations',
           listItems: [
             {
-              label: 'Dev tools',
+              label: 'Logs',
               href: '#/layout/nav-drawer',
-              iconType: 'devToolsApp',
+              iconType: 'logsApp',
               extraAction: {
                 color: 'subdued',
                 iconType: 'starEmpty',
@@ -233,9 +346,9 @@ export default class extends Component {
               },
             },
             {
-              label: 'Stack Monitoring',
+              label: 'Metrics',
               href: '#/layout/nav-drawer',
-              iconType: 'monitoringApp',
+              iconType: 'metricsApp',
               extraAction: {
                 color: 'subdued',
                 iconType: 'starEmpty',
@@ -244,9 +357,20 @@ export default class extends Component {
               },
             },
             {
-              label: 'Stack Management',
+              label: 'APM',
               href: '#/layout/nav-drawer',
-              iconType: 'managementApp',
+              iconType: 'apmApp',
+              extraAction: {
+                color: 'subdued',
+                iconType: 'starEmpty',
+                iconSize: 's',
+                'aria-label': 'Add to favorites',
+              },
+            },
+            {
+              label: 'Uptime',
+              href: '#/layout/nav-drawer',
+              iconType: 'uptimeApp',
               extraAction: {
                 color: 'subdued',
                 iconType: 'starEmpty',
@@ -387,9 +511,13 @@ export default class extends Component {
             <EuiNavDrawer ref={this.setNavDrawerRef}>
               <EuiNavDrawerGroup listItems={this.topLinks} />
               <EuiHorizontalRule margin="none" />
-              <EuiNavDrawerGroup listItems={this.exploreLinks} />
+              <EuiNavDrawerGroup listItems={this.analyzeLinks} />
+              <EuiHorizontalRule margin="none" />
+              <EuiNavDrawerGroup listItems={this.securityLinks} />
+              <EuiHorizontalRule margin="none" />
+              <EuiNavDrawerGroup listItems={this.searchLinks} />
               <EuiHorizontalRule margin="none" />
-              <EuiNavDrawerGroup listItems={this.solutionsLinks} />
+              <EuiNavDrawerGroup listItems={this.observabilityLinks} />
               <EuiHorizontalRule margin="none" />
               <EuiNavDrawerGroup listItems={this.adminLinks} />
             </EuiNavDrawer>

From c52893a3d2cf5affb12faca529fb2fd2b7524017 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Thu, 9 Jan 2020 16:54:30 -0600
Subject: [PATCH 04/12] aria improvements

---
 src/components/list_group/list_group.tsx      |  8 ++-
 .../__snapshots__/nav_drawer.test.js.snap     | 29 +++++++++++
 src/components/nav_drawer/nav_drawer.js       | 50 ++++++++++++-------
 .../nav_drawer/nav_drawer_flyout.js           |  6 ++-
 src/components/nav_drawer/nav_drawer_group.js |  4 ++
 5 files changed, 75 insertions(+), 22 deletions(-)

diff --git a/src/components/list_group/list_group.tsx b/src/components/list_group/list_group.tsx
index c87b74bf513..9f4e3c7de44 100644
--- a/src/components/list_group/list_group.tsx
+++ b/src/components/list_group/list_group.tsx
@@ -39,6 +39,7 @@ type EuiListGroupProps = CommonProps &
      * Allow link text to wrap
      */
     wrapText?: boolean;
+    ariaLabelledby?: string;
   };
 
 export const EuiListGroup: FunctionComponent<EuiListGroupProps> = ({
@@ -51,6 +52,7 @@ export const EuiListGroup: FunctionComponent<EuiListGroupProps> = ({
   wrapText = false,
   maxWidth = true,
   showToolTips = false,
+  ariaLabelledby,
   ...rest
 }) => {
   let newStyle: CSSProperties | undefined;
@@ -105,7 +107,11 @@ export const EuiListGroup: FunctionComponent<EuiListGroupProps> = ({
   }
 
   return (
-    <ul className={classes} style={newStyle || style} {...rest}>
+    <ul
+      className={classes}
+      style={newStyle || style}
+      aria-labelledby={ariaLabelledby}
+      {...rest}>
       {childrenOrListItems}
     </ul>
   );
diff --git a/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap b/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap
index 8f06b68e7db..35a5a8e4f78 100644
--- a/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap
+++ b/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap
@@ -57,8 +57,10 @@ exports[`EuiNavDrawer is rendered 1`] = `
               class="euiToolTipAnchor euiListGroupItem__tooltip"
             >
               <button
+                aria-expanded="false"
                 aria-label="Recently viewed"
                 class="euiListGroupItem__button"
+                data-name="Recently viewed"
                 type="button"
               >
                 <svg
@@ -86,8 +88,10 @@ exports[`EuiNavDrawer is rendered 1`] = `
               class="euiToolTipAnchor euiListGroupItem__tooltip"
             >
               <button
+                aria-expanded="false"
                 aria-label="Favorites"
                 class="euiListGroupItem__button"
+                data-name="Favorites"
                 type="button"
               >
                 <svg
@@ -121,6 +125,7 @@ exports[`EuiNavDrawer is rendered 1`] = `
               <a
                 aria-label="Canvas"
                 class="euiListGroupItem__button"
+                data-name="Canvas"
                 href="#"
               >
                 <svg
@@ -150,6 +155,7 @@ exports[`EuiNavDrawer is rendered 1`] = `
               <a
                 aria-label="Discover"
                 class="euiListGroupItem__button"
+                data-name="Discover"
                 href="#"
               >
                 <svg
@@ -179,6 +185,7 @@ exports[`EuiNavDrawer is rendered 1`] = `
               <a
                 aria-label="Visualize"
                 class="euiListGroupItem__button"
+                data-name="Visualize"
                 href="#"
               >
                 <svg
@@ -208,6 +215,7 @@ exports[`EuiNavDrawer is rendered 1`] = `
               <a
                 aria-label="Dashboard"
                 class="euiListGroupItem__button"
+                data-name="Dashboard"
                 href="#"
               >
                 <svg
@@ -237,6 +245,7 @@ exports[`EuiNavDrawer is rendered 1`] = `
               <a
                 aria-label="Machine learning"
                 class="euiListGroupItem__button"
+                data-name="Machine learning"
                 href="#"
               >
                 <svg
@@ -266,6 +275,7 @@ exports[`EuiNavDrawer is rendered 1`] = `
               <a
                 aria-label="Custom Plugin (no icon)"
                 class="euiListGroupItem__button"
+                data-name="Custom Plugin (no icon)"
                 href="#"
               >
                 <span
@@ -308,6 +318,7 @@ exports[`EuiNavDrawer is rendered 1`] = `
         data-focus-lock-disabled="false"
       >
         <ul
+          aria-labelledby="navDrawerFlyoutTitle"
           class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup euiNavDrawerFlyout__listGroup"
         />
       </div>
@@ -380,6 +391,7 @@ exports[`EuiNavDrawer renders with falsy children 1`] = `
               <a
                 aria-label="Canvas"
                 class="euiListGroupItem__button"
+                data-name="Canvas"
                 href="#"
               >
                 <svg
@@ -409,6 +421,7 @@ exports[`EuiNavDrawer renders with falsy children 1`] = `
               <a
                 aria-label="Discover"
                 class="euiListGroupItem__button"
+                data-name="Discover"
                 href="#"
               >
                 <svg
@@ -438,6 +451,7 @@ exports[`EuiNavDrawer renders with falsy children 1`] = `
               <a
                 aria-label="Visualize"
                 class="euiListGroupItem__button"
+                data-name="Visualize"
                 href="#"
               >
                 <svg
@@ -467,6 +481,7 @@ exports[`EuiNavDrawer renders with falsy children 1`] = `
               <a
                 aria-label="Dashboard"
                 class="euiListGroupItem__button"
+                data-name="Dashboard"
                 href="#"
               >
                 <svg
@@ -496,6 +511,7 @@ exports[`EuiNavDrawer renders with falsy children 1`] = `
               <a
                 aria-label="Machine learning"
                 class="euiListGroupItem__button"
+                data-name="Machine learning"
                 href="#"
               >
                 <svg
@@ -525,6 +541,7 @@ exports[`EuiNavDrawer renders with falsy children 1`] = `
               <a
                 aria-label="Custom Plugin (no icon)"
                 class="euiListGroupItem__button"
+                data-name="Custom Plugin (no icon)"
                 href="#"
               >
                 <span
@@ -567,6 +584,7 @@ exports[`EuiNavDrawer renders with falsy children 1`] = `
         data-focus-lock-disabled="false"
       >
         <ul
+          aria-labelledby="navDrawerFlyoutTitle"
           class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup euiNavDrawerFlyout__listGroup"
         />
       </div>
@@ -637,8 +655,10 @@ exports[`EuiNavDrawer renders with fragments 1`] = `
               class="euiToolTipAnchor euiListGroupItem__tooltip"
             >
               <button
+                aria-expanded="false"
                 aria-label="Recently viewed"
                 class="euiListGroupItem__button"
+                data-name="Recently viewed"
                 type="button"
               >
                 <svg
@@ -666,8 +686,10 @@ exports[`EuiNavDrawer renders with fragments 1`] = `
               class="euiToolTipAnchor euiListGroupItem__tooltip"
             >
               <button
+                aria-expanded="false"
                 aria-label="Favorites"
                 class="euiListGroupItem__button"
+                data-name="Favorites"
                 type="button"
               >
                 <svg
@@ -701,6 +723,7 @@ exports[`EuiNavDrawer renders with fragments 1`] = `
               <a
                 aria-label="Canvas"
                 class="euiListGroupItem__button"
+                data-name="Canvas"
                 href="#"
               >
                 <svg
@@ -730,6 +753,7 @@ exports[`EuiNavDrawer renders with fragments 1`] = `
               <a
                 aria-label="Discover"
                 class="euiListGroupItem__button"
+                data-name="Discover"
                 href="#"
               >
                 <svg
@@ -759,6 +783,7 @@ exports[`EuiNavDrawer renders with fragments 1`] = `
               <a
                 aria-label="Visualize"
                 class="euiListGroupItem__button"
+                data-name="Visualize"
                 href="#"
               >
                 <svg
@@ -788,6 +813,7 @@ exports[`EuiNavDrawer renders with fragments 1`] = `
               <a
                 aria-label="Dashboard"
                 class="euiListGroupItem__button"
+                data-name="Dashboard"
                 href="#"
               >
                 <svg
@@ -817,6 +843,7 @@ exports[`EuiNavDrawer renders with fragments 1`] = `
               <a
                 aria-label="Machine learning"
                 class="euiListGroupItem__button"
+                data-name="Machine learning"
                 href="#"
               >
                 <svg
@@ -846,6 +873,7 @@ exports[`EuiNavDrawer renders with fragments 1`] = `
               <a
                 aria-label="Custom Plugin (no icon)"
                 class="euiListGroupItem__button"
+                data-name="Custom Plugin (no icon)"
                 href="#"
               >
                 <span
@@ -888,6 +916,7 @@ exports[`EuiNavDrawer renders with fragments 1`] = `
         data-focus-lock-disabled="false"
       >
         <ul
+          aria-labelledby="navDrawerFlyoutTitle"
           class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup euiNavDrawerFlyout__listGroup"
         />
       </div>
diff --git a/src/components/nav_drawer/nav_drawer.js b/src/components/nav_drawer/nav_drawer.js
index 98c412de66f..137d8369472 100644
--- a/src/components/nav_drawer/nav_drawer.js
+++ b/src/components/nav_drawer/nav_drawer.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { EuiListGroup, EuiListGroupItem } from '../list_group';
 import { EuiNavDrawerFlyout } from './nav_drawer_flyout';
-import { EuiNavDrawerGroup } from './nav_drawer_group';
+import { EuiNavDrawerGroup, ATTR_SELECTOR } from './nav_drawer_group';
 import { EuiOutsideClickDetector } from '../outside_click_detector';
 import { EuiI18n } from '../i18n';
 import { EuiFlexItem, EuiFlexGroup } from '../flex';
@@ -170,15 +170,23 @@ export class EuiNavDrawer extends Component {
     if (this.state.navFlyoutTitle === title) {
       this.collapseFlyout();
     } else {
-      this.setState({
-        flyoutIsCollapsed: false,
-        navFlyoutTitle: title,
-        navFlyoutContent: content,
-        isCollapsed: this.state.isLocked ? false : true,
-        toolTipsEnabled: false,
-        outsideClickDisabled: false,
-        focusReturnRef: item.label,
-      });
+      this.setState(
+        {
+          flyoutIsCollapsed: false,
+          navFlyoutTitle: title,
+          navFlyoutContent: content,
+          isCollapsed: this.state.isLocked ? false : true,
+          toolTipsEnabled: false,
+          outsideClickDisabled: false,
+          focusReturnRef: item.label,
+        },
+        () => {
+          const element = document.querySelector(
+            `#${MENU_ELEMENT_ID} [${ATTR_SELECTOR}='${item.label}']`
+          );
+          element.setAttribute('aria-expanded', 'true');
+        }
+      );
     }
   };
 
@@ -193,15 +201,19 @@ export class EuiNavDrawer extends Component {
         focusReturnRef: null,
       },
       () => {
-        if (shouldReturnFocus) {
-          // Ideally this uses React `ref` instead of `querySelector`, but the menu composition
-          // does not allow for deep `ref` element management at present
-          const element = document.querySelector(
-            `#${MENU_ELEMENT_ID} [aria-label='${focusReturn}']`
-          );
-          if (!element) return;
-          requestAnimationFrame(() => element.focus());
-        }
+        // Ideally this uses React `ref` instead of `querySelector`, but the menu composition
+        // does not allow for deep `ref` element management at present
+        const element = document.querySelector(
+          `#${MENU_ELEMENT_ID} [${ATTR_SELECTOR}='${focusReturn}']`
+        );
+        if (!element) return;
+        requestAnimationFrame(() => {
+          element.setAttribute('aria-expanded', 'false');
+        });
+        if (!shouldReturnFocus) return;
+        requestAnimationFrame(() => {
+          element.focus();
+        });
       }
     );
   };
diff --git a/src/components/nav_drawer/nav_drawer_flyout.js b/src/components/nav_drawer/nav_drawer_flyout.js
index 75103482c77..5b21e9423e3 100644
--- a/src/components/nav_drawer/nav_drawer_flyout.js
+++ b/src/components/nav_drawer/nav_drawer_flyout.js
@@ -18,6 +18,7 @@ export const EuiNavDrawerFlyout = ({
   onClose,
   ...rest
 }) => {
+  const LABEL = 'navDrawerFlyoutTitle';
   const classes = classNames(
     'euiNavDrawerFlyout',
     {
@@ -36,15 +37,16 @@ export const EuiNavDrawerFlyout = ({
   return (
     <div
       className={classes}
-      aria-labelledby="navDrawerFlyoutTitle"
+      aria-labelledby={LABEL}
       onKeyDown={handleKeyDown}
       {...rest}>
       <EuiTitle className="euiNavDrawerFlyout__title" tabIndex="-1" size="xxs">
-        <div id="navDrawerFlyoutTitle">{title}</div>
+        <div id={LABEL}>{title}</div>
       </EuiTitle>
       <EuiFocusTrap returnFocus={false}>
         <EuiNavDrawerGroup
           className="euiNavDrawerFlyout__listGroup"
+          ariaLabelledby={LABEL}
           listItems={listItems}
           wrapText={wrapText}
           onClose={() => onClose(false)}
diff --git a/src/components/nav_drawer/nav_drawer_group.js b/src/components/nav_drawer/nav_drawer_group.js
index c14752c3eb6..b7d383151d7 100644
--- a/src/components/nav_drawer/nav_drawer_group.js
+++ b/src/components/nav_drawer/nav_drawer_group.js
@@ -5,6 +5,8 @@ import classNames from 'classnames';
 import { EuiListGroup } from '../list_group/list_group';
 import { toInitials } from '../../services';
 
+export const ATTR_SELECTOR = 'data-name';
+
 export const EuiNavDrawerGroup = ({
   className,
   listItems,
@@ -26,6 +28,7 @@ export const EuiNavDrawerGroup = ({
           const items = [...flyoutMenu.listItems];
           const title = `${flyoutMenu.title}`;
           itemProps.onClick = () => flyoutMenuButtonClick(items, title, item);
+          itemProps['aria-expanded'] = false;
         } else {
           itemProps.onClick = (...args) => {
             if (onClick) {
@@ -41,6 +44,7 @@ export const EuiNavDrawerGroup = ({
           item.className
         );
         itemProps.size = item.size || 's';
+        itemProps[ATTR_SELECTOR] = item.label;
         itemProps['aria-label'] = item['aria-label'] || item.label;
 
         // Add an avatar in place of non-existent icons

From 22b2000d85701fbe391f55b3711342ce01dcb211 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Thu, 9 Jan 2020 18:07:37 -0600
Subject: [PATCH 05/12] more a11y

---
 .../__snapshots__/nav_drawer.test.js.snap     | 165 +++++++++---------
 src/components/nav_drawer/nav_drawer.js       |   3 +
 .../nav_drawer/nav_drawer_flyout.js           |  35 ++--
 3 files changed, 108 insertions(+), 95 deletions(-)

diff --git a/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap b/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap
index 35a5a8e4f78..837f497bc5c 100644
--- a/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap
+++ b/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap
@@ -298,35 +298,38 @@ exports[`EuiNavDrawer is rendered 1`] = `
       aria-labelledby="navDrawerFlyoutTitle"
       class="euiNavDrawerFlyout euiNavDrawerFlyout-isCollapsed"
       id="navDrawerFlyout"
+      role="dialog"
     >
-      <div
-        class="euiTitle euiTitle--xxsmall euiNavDrawerFlyout__title"
-        id="navDrawerFlyoutTitle"
-        tabindex="-1"
-      />
-      <div
-        data-focus-guard="true"
-        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-        tabindex="0"
-      />
-      <div
-        data-focus-guard="true"
-        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-        tabindex="1"
-      />
-      <div
-        data-focus-lock-disabled="false"
-      >
-        <ul
-          aria-labelledby="navDrawerFlyoutTitle"
-          class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup euiNavDrawerFlyout__listGroup"
+      <div>
+        <div
+          class="euiTitle euiTitle--xxsmall euiNavDrawerFlyout__title"
+          id="navDrawerFlyoutTitle"
+          tabindex="-1"
+        />
+        <div
+          data-focus-guard="true"
+          style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+          tabindex="0"
+        />
+        <div
+          data-focus-guard="true"
+          style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+          tabindex="1"
+        />
+        <div
+          data-focus-lock-disabled="false"
+        >
+          <ul
+            aria-labelledby="navDrawerFlyoutTitle"
+            class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup euiNavDrawerFlyout__listGroup"
+          />
+        </div>
+        <div
+          data-focus-guard="true"
+          style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+          tabindex="0"
         />
       </div>
-      <div
-        data-focus-guard="true"
-        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-        tabindex="0"
-      />
     </div>
   </div>
 </nav>
@@ -564,35 +567,38 @@ exports[`EuiNavDrawer renders with falsy children 1`] = `
       aria-labelledby="navDrawerFlyoutTitle"
       class="euiNavDrawerFlyout euiNavDrawerFlyout-isCollapsed"
       id="navDrawerFlyout"
+      role="dialog"
     >
-      <div
-        class="euiTitle euiTitle--xxsmall euiNavDrawerFlyout__title"
-        id="navDrawerFlyoutTitle"
-        tabindex="-1"
-      />
-      <div
-        data-focus-guard="true"
-        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-        tabindex="0"
-      />
-      <div
-        data-focus-guard="true"
-        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-        tabindex="1"
-      />
-      <div
-        data-focus-lock-disabled="false"
-      >
-        <ul
-          aria-labelledby="navDrawerFlyoutTitle"
-          class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup euiNavDrawerFlyout__listGroup"
+      <div>
+        <div
+          class="euiTitle euiTitle--xxsmall euiNavDrawerFlyout__title"
+          id="navDrawerFlyoutTitle"
+          tabindex="-1"
+        />
+        <div
+          data-focus-guard="true"
+          style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+          tabindex="0"
+        />
+        <div
+          data-focus-guard="true"
+          style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+          tabindex="1"
+        />
+        <div
+          data-focus-lock-disabled="false"
+        >
+          <ul
+            aria-labelledby="navDrawerFlyoutTitle"
+            class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup euiNavDrawerFlyout__listGroup"
+          />
+        </div>
+        <div
+          data-focus-guard="true"
+          style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+          tabindex="0"
         />
       </div>
-      <div
-        data-focus-guard="true"
-        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-        tabindex="0"
-      />
     </div>
   </div>
 </nav>
@@ -896,35 +902,38 @@ exports[`EuiNavDrawer renders with fragments 1`] = `
       aria-labelledby="navDrawerFlyoutTitle"
       class="euiNavDrawerFlyout euiNavDrawerFlyout-isCollapsed"
       id="navDrawerFlyout"
+      role="dialog"
     >
-      <div
-        class="euiTitle euiTitle--xxsmall euiNavDrawerFlyout__title"
-        id="navDrawerFlyoutTitle"
-        tabindex="-1"
-      />
-      <div
-        data-focus-guard="true"
-        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-        tabindex="0"
-      />
-      <div
-        data-focus-guard="true"
-        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-        tabindex="1"
-      />
-      <div
-        data-focus-lock-disabled="false"
-      >
-        <ul
-          aria-labelledby="navDrawerFlyoutTitle"
-          class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup euiNavDrawerFlyout__listGroup"
+      <div>
+        <div
+          class="euiTitle euiTitle--xxsmall euiNavDrawerFlyout__title"
+          id="navDrawerFlyoutTitle"
+          tabindex="-1"
+        />
+        <div
+          data-focus-guard="true"
+          style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+          tabindex="0"
+        />
+        <div
+          data-focus-guard="true"
+          style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+          tabindex="1"
+        />
+        <div
+          data-focus-lock-disabled="false"
+        >
+          <ul
+            aria-labelledby="navDrawerFlyoutTitle"
+            class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup euiNavDrawerFlyout__listGroup"
+          />
+        </div>
+        <div
+          data-focus-guard="true"
+          style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+          tabindex="0"
         />
       </div>
-      <div
-        data-focus-guard="true"
-        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-        tabindex="0"
-      />
     </div>
   </div>
 </nav>
diff --git a/src/components/nav_drawer/nav_drawer.js b/src/components/nav_drawer/nav_drawer.js
index 137d8369472..41a82bb8a10 100644
--- a/src/components/nav_drawer/nav_drawer.js
+++ b/src/components/nav_drawer/nav_drawer.js
@@ -181,9 +181,12 @@ export class EuiNavDrawer extends Component {
           focusReturnRef: item.label,
         },
         () => {
+          // Ideally this uses React `ref` instead of `querySelector`, but the menu composition
+          // does not allow for deep `ref` element management at present
           const element = document.querySelector(
             `#${MENU_ELEMENT_ID} [${ATTR_SELECTOR}='${item.label}']`
           );
+          if (!element) return;
           element.setAttribute('aria-expanded', 'true');
         }
       );
diff --git a/src/components/nav_drawer/nav_drawer_flyout.js b/src/components/nav_drawer/nav_drawer_flyout.js
index 5b21e9423e3..d20ac6f79f6 100644
--- a/src/components/nav_drawer/nav_drawer_flyout.js
+++ b/src/components/nav_drawer/nav_drawer_flyout.js
@@ -35,23 +35,24 @@ export const EuiNavDrawerFlyout = ({
   };
 
   return (
-    <div
-      className={classes}
-      aria-labelledby={LABEL}
-      onKeyDown={handleKeyDown}
-      {...rest}>
-      <EuiTitle className="euiNavDrawerFlyout__title" tabIndex="-1" size="xxs">
-        <div id={LABEL}>{title}</div>
-      </EuiTitle>
-      <EuiFocusTrap returnFocus={false}>
-        <EuiNavDrawerGroup
-          className="euiNavDrawerFlyout__listGroup"
-          ariaLabelledby={LABEL}
-          listItems={listItems}
-          wrapText={wrapText}
-          onClose={() => onClose(false)}
-        />
-      </EuiFocusTrap>
+    <div role="dialog" className={classes} aria-labelledby={LABEL} {...rest}>
+      <div onKeyDown={handleKeyDown}>
+        <EuiTitle
+          className="euiNavDrawerFlyout__title"
+          tabIndex="-1"
+          size="xxs">
+          <div id={LABEL}>{title}</div>
+        </EuiTitle>
+        <EuiFocusTrap returnFocus={false}>
+          <EuiNavDrawerGroup
+            className="euiNavDrawerFlyout__listGroup"
+            ariaLabelledby={LABEL}
+            listItems={listItems}
+            wrapText={wrapText}
+            onClose={() => onClose(false)}
+          />
+        </EuiFocusTrap>
+      </div>
     </div>
   );
 };

From d7781f6bb21c3b128883f762cf1b7e6831385a6e Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Thu, 9 Jan 2020 18:12:30 -0600
Subject: [PATCH 06/12] CL

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2886eba5e98..d08bb437649 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,8 @@
 - Converted `EuiRangeInput` to TypeScript ([#2732](https://github.com/elastic/eui/pull/2732))
 - Added `bellSlash` glyph to `EuiIcon` ([#2714](https://github.com/elastic/eui/pull/2714))
 - Added `legend` prop to `EuiCheckboxGroup` and `EuiRadioGroup` to add `EuiFieldset` wrappers for title the groups ([#2739](https://github.com/elastic/eui/pull/2739))
+- Changed `EuiNavDrawerFlyout` to close after child nav items are clicked ([#2749](https://github.com/elastic/eui/pull/2749))
+- Changed `EuiNavDrawerFlyout` to trap focus while navigating via keyboard ([#2749](https://github.com/elastic/eui/pull/2749))
 
 **Bug fixes**
 

From b6deabf4b420c55eaec9dbbd495613b73488a9a4 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Fri, 10 Jan 2020 09:49:48 -0600
Subject: [PATCH 07/12] tabbables trial

---
 .../__snapshots__/nav_drawer.test.js.snap     | 15 ++++++++
 .../nav_drawer/nav_drawer_flyout.js           | 38 +++++++++++++++++--
 2 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap b/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap
index 837f497bc5c..18696568a02 100644
--- a/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap
+++ b/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap
@@ -300,6 +300,11 @@ exports[`EuiNavDrawer is rendered 1`] = `
       id="navDrawerFlyout"
       role="dialog"
     >
+      <p
+        class="euiScreenReaderOnly"
+      >
+        You are in a dialog. To close this dialog, hit escape.
+      </p>
       <div>
         <div
           class="euiTitle euiTitle--xxsmall euiNavDrawerFlyout__title"
@@ -569,6 +574,11 @@ exports[`EuiNavDrawer renders with falsy children 1`] = `
       id="navDrawerFlyout"
       role="dialog"
     >
+      <p
+        class="euiScreenReaderOnly"
+      >
+        You are in a dialog. To close this dialog, hit escape.
+      </p>
       <div>
         <div
           class="euiTitle euiTitle--xxsmall euiNavDrawerFlyout__title"
@@ -904,6 +914,11 @@ exports[`EuiNavDrawer renders with fragments 1`] = `
       id="navDrawerFlyout"
       role="dialog"
     >
+      <p
+        class="euiScreenReaderOnly"
+      >
+        You are in a dialog. To close this dialog, hit escape.
+      </p>
       <div>
         <div
           class="euiTitle euiTitle--xxsmall euiNavDrawerFlyout__title"
diff --git a/src/components/nav_drawer/nav_drawer_flyout.js b/src/components/nav_drawer/nav_drawer_flyout.js
index d20ac6f79f6..4d8e290088e 100644
--- a/src/components/nav_drawer/nav_drawer_flyout.js
+++ b/src/components/nav_drawer/nav_drawer_flyout.js
@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import tabbable from 'tabbable';
 
 import { keyCodes } from '../../services';
 
@@ -8,6 +9,8 @@ import { EuiTitle } from '../title';
 import { EuiNavDrawerGroup } from './nav_drawer_group';
 import { EuiListGroup } from '../list_group/list_group';
 import { EuiFocusTrap } from '../focus_trap';
+import { EuiScreenReaderOnly } from '../accessibility';
+import { EuiI18n } from '../i18n';
 
 export const EuiNavDrawerFlyout = ({
   className,
@@ -18,6 +21,8 @@ export const EuiNavDrawerFlyout = ({
   onClose,
   ...rest
 }) => {
+  const [menuEl, setMenuEl] = useState();
+  const [tabbables, setTabbables] = useState();
   const LABEL = 'navDrawerFlyoutTitle';
   const classes = classNames(
     'euiNavDrawerFlyout',
@@ -30,13 +35,38 @@ export const EuiNavDrawerFlyout = ({
 
   const handleKeyDown = e => {
     if (e.keyCode === keyCodes.ESCAPE) {
-      onClose();
+      handleClose();
+    } else if (e.keyCode === keyCodes.TAB) {
+      let tabs = tabbables;
+      if (!tabs) {
+        tabs = tabbable(menuEl).filter(el => el.tagName !== 'DIV');
+        setTabbables(tabs);
+      }
+      if (
+        (!e.shiftKey && document.activeElement === tabs[tabs.length - 1]) ||
+        (e.shiftKey && document.activeElement === tabs[0])
+      ) {
+        handleClose();
+      }
     }
   };
 
+  const handleClose = (shouldReturnFocus = true) => {
+    setTabbables(null);
+    onClose(shouldReturnFocus);
+  };
+
   return (
     <div role="dialog" className={classes} aria-labelledby={LABEL} {...rest}>
-      <div onKeyDown={handleKeyDown}>
+      <EuiScreenReaderOnly>
+        <p>
+          <EuiI18n
+            token="euiNavDrawerFlyout.screenReaderAnnouncement"
+            default="You are in a dialog. To close this dialog, hit escape."
+          />
+        </p>
+      </EuiScreenReaderOnly>
+      <div onKeyDown={handleKeyDown} ref={setMenuEl}>
         <EuiTitle
           className="euiNavDrawerFlyout__title"
           tabIndex="-1"
@@ -49,7 +79,7 @@ export const EuiNavDrawerFlyout = ({
             ariaLabelledby={LABEL}
             listItems={listItems}
             wrapText={wrapText}
-            onClose={() => onClose(false)}
+            onClose={() => handleClose(false)}
           />
         </EuiFocusTrap>
       </div>

From 7bf5bd73f764c54bf3537dec04bb7de0a3940973 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Fri, 10 Jan 2020 10:10:00 -0600
Subject: [PATCH 08/12] formalize tab-through

---
 .../__snapshots__/nav_drawer.test.js.snap     | 174 ++++++++----------
 .../nav_drawer/nav_drawer_flyout.js           |  46 ++---
 2 files changed, 93 insertions(+), 127 deletions(-)

diff --git a/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap b/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap
index 18696568a02..35a5a8e4f78 100644
--- a/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap
+++ b/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap
@@ -298,43 +298,35 @@ exports[`EuiNavDrawer is rendered 1`] = `
       aria-labelledby="navDrawerFlyoutTitle"
       class="euiNavDrawerFlyout euiNavDrawerFlyout-isCollapsed"
       id="navDrawerFlyout"
-      role="dialog"
     >
-      <p
-        class="euiScreenReaderOnly"
+      <div
+        class="euiTitle euiTitle--xxsmall euiNavDrawerFlyout__title"
+        id="navDrawerFlyoutTitle"
+        tabindex="-1"
+      />
+      <div
+        data-focus-guard="true"
+        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+        tabindex="0"
+      />
+      <div
+        data-focus-guard="true"
+        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+        tabindex="1"
+      />
+      <div
+        data-focus-lock-disabled="false"
       >
-        You are in a dialog. To close this dialog, hit escape.
-      </p>
-      <div>
-        <div
-          class="euiTitle euiTitle--xxsmall euiNavDrawerFlyout__title"
-          id="navDrawerFlyoutTitle"
-          tabindex="-1"
-        />
-        <div
-          data-focus-guard="true"
-          style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-          tabindex="0"
-        />
-        <div
-          data-focus-guard="true"
-          style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-          tabindex="1"
-        />
-        <div
-          data-focus-lock-disabled="false"
-        >
-          <ul
-            aria-labelledby="navDrawerFlyoutTitle"
-            class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup euiNavDrawerFlyout__listGroup"
-          />
-        </div>
-        <div
-          data-focus-guard="true"
-          style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-          tabindex="0"
+        <ul
+          aria-labelledby="navDrawerFlyoutTitle"
+          class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup euiNavDrawerFlyout__listGroup"
         />
       </div>
+      <div
+        data-focus-guard="true"
+        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+        tabindex="0"
+      />
     </div>
   </div>
 </nav>
@@ -572,43 +564,35 @@ exports[`EuiNavDrawer renders with falsy children 1`] = `
       aria-labelledby="navDrawerFlyoutTitle"
       class="euiNavDrawerFlyout euiNavDrawerFlyout-isCollapsed"
       id="navDrawerFlyout"
-      role="dialog"
     >
-      <p
-        class="euiScreenReaderOnly"
+      <div
+        class="euiTitle euiTitle--xxsmall euiNavDrawerFlyout__title"
+        id="navDrawerFlyoutTitle"
+        tabindex="-1"
+      />
+      <div
+        data-focus-guard="true"
+        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+        tabindex="0"
+      />
+      <div
+        data-focus-guard="true"
+        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+        tabindex="1"
+      />
+      <div
+        data-focus-lock-disabled="false"
       >
-        You are in a dialog. To close this dialog, hit escape.
-      </p>
-      <div>
-        <div
-          class="euiTitle euiTitle--xxsmall euiNavDrawerFlyout__title"
-          id="navDrawerFlyoutTitle"
-          tabindex="-1"
-        />
-        <div
-          data-focus-guard="true"
-          style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-          tabindex="0"
-        />
-        <div
-          data-focus-guard="true"
-          style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-          tabindex="1"
-        />
-        <div
-          data-focus-lock-disabled="false"
-        >
-          <ul
-            aria-labelledby="navDrawerFlyoutTitle"
-            class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup euiNavDrawerFlyout__listGroup"
-          />
-        </div>
-        <div
-          data-focus-guard="true"
-          style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-          tabindex="0"
+        <ul
+          aria-labelledby="navDrawerFlyoutTitle"
+          class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup euiNavDrawerFlyout__listGroup"
         />
       </div>
+      <div
+        data-focus-guard="true"
+        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+        tabindex="0"
+      />
     </div>
   </div>
 </nav>
@@ -912,43 +896,35 @@ exports[`EuiNavDrawer renders with fragments 1`] = `
       aria-labelledby="navDrawerFlyoutTitle"
       class="euiNavDrawerFlyout euiNavDrawerFlyout-isCollapsed"
       id="navDrawerFlyout"
-      role="dialog"
     >
-      <p
-        class="euiScreenReaderOnly"
+      <div
+        class="euiTitle euiTitle--xxsmall euiNavDrawerFlyout__title"
+        id="navDrawerFlyoutTitle"
+        tabindex="-1"
+      />
+      <div
+        data-focus-guard="true"
+        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+        tabindex="0"
+      />
+      <div
+        data-focus-guard="true"
+        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+        tabindex="1"
+      />
+      <div
+        data-focus-lock-disabled="false"
       >
-        You are in a dialog. To close this dialog, hit escape.
-      </p>
-      <div>
-        <div
-          class="euiTitle euiTitle--xxsmall euiNavDrawerFlyout__title"
-          id="navDrawerFlyoutTitle"
-          tabindex="-1"
-        />
-        <div
-          data-focus-guard="true"
-          style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-          tabindex="0"
-        />
-        <div
-          data-focus-guard="true"
-          style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-          tabindex="1"
-        />
-        <div
-          data-focus-lock-disabled="false"
-        >
-          <ul
-            aria-labelledby="navDrawerFlyoutTitle"
-            class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup euiNavDrawerFlyout__listGroup"
-          />
-        </div>
-        <div
-          data-focus-guard="true"
-          style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-          tabindex="0"
+        <ul
+          aria-labelledby="navDrawerFlyoutTitle"
+          class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup euiNavDrawerFlyout__listGroup"
         />
       </div>
+      <div
+        data-focus-guard="true"
+        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
+        tabindex="0"
+      />
     </div>
   </div>
 </nav>
diff --git a/src/components/nav_drawer/nav_drawer_flyout.js b/src/components/nav_drawer/nav_drawer_flyout.js
index 4d8e290088e..df50c48a2bb 100644
--- a/src/components/nav_drawer/nav_drawer_flyout.js
+++ b/src/components/nav_drawer/nav_drawer_flyout.js
@@ -9,8 +9,6 @@ import { EuiTitle } from '../title';
 import { EuiNavDrawerGroup } from './nav_drawer_group';
 import { EuiListGroup } from '../list_group/list_group';
 import { EuiFocusTrap } from '../focus_trap';
-import { EuiScreenReaderOnly } from '../accessibility';
-import { EuiI18n } from '../i18n';
 
 export const EuiNavDrawerFlyout = ({
   className,
@@ -57,32 +55,24 @@ export const EuiNavDrawerFlyout = ({
   };
 
   return (
-    <div role="dialog" className={classes} aria-labelledby={LABEL} {...rest}>
-      <EuiScreenReaderOnly>
-        <p>
-          <EuiI18n
-            token="euiNavDrawerFlyout.screenReaderAnnouncement"
-            default="You are in a dialog. To close this dialog, hit escape."
-          />
-        </p>
-      </EuiScreenReaderOnly>
-      <div onKeyDown={handleKeyDown} ref={setMenuEl}>
-        <EuiTitle
-          className="euiNavDrawerFlyout__title"
-          tabIndex="-1"
-          size="xxs">
-          <div id={LABEL}>{title}</div>
-        </EuiTitle>
-        <EuiFocusTrap returnFocus={false}>
-          <EuiNavDrawerGroup
-            className="euiNavDrawerFlyout__listGroup"
-            ariaLabelledby={LABEL}
-            listItems={listItems}
-            wrapText={wrapText}
-            onClose={() => handleClose(false)}
-          />
-        </EuiFocusTrap>
-      </div>
+    <div
+      className={classes}
+      aria-labelledby={LABEL}
+      onKeyDown={handleKeyDown}
+      ref={setMenuEl}
+      {...rest}>
+      <EuiTitle className="euiNavDrawerFlyout__title" tabIndex="-1" size="xxs">
+        <div id={LABEL}>{title}</div>
+      </EuiTitle>
+      <EuiFocusTrap returnFocus={false}>
+        <EuiNavDrawerGroup
+          className="euiNavDrawerFlyout__listGroup"
+          ariaLabelledby={LABEL}
+          listItems={listItems}
+          wrapText={wrapText}
+          onClose={() => handleClose(false)}
+        />
+      </EuiFocusTrap>
     </div>
   );
 };

From 8b8b6f229c4b91a8c3612767d2bb283ef96a48c9 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Fri, 10 Jan 2020 08:51:35 -0800
Subject: [PATCH 09/12] fix grouping

---
 src-docs/src/views/nav_drawer/nav_drawer.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js
index 08b4bfe7722..bd4f1e0878a 100644
--- a/src-docs/src/views/nav_drawer/nav_drawer.js
+++ b/src-docs/src/views/nav_drawer/nav_drawer.js
@@ -255,6 +255,7 @@ export default class extends Component {
         },
       },
     ];
+
     this.securityLinks = [
       {
         label: 'Security',
@@ -283,6 +284,7 @@ export default class extends Component {
         },
       },
     ];
+
     this.searchLinks = [
       {
         label: 'Enterprise Search',
@@ -327,6 +329,7 @@ export default class extends Component {
         },
       },
     ];
+
     this.observabilityLinks = [
       {
         label: 'Observability',
@@ -512,11 +515,8 @@ export default class extends Component {
               <EuiNavDrawerGroup listItems={this.topLinks} />
               <EuiHorizontalRule margin="none" />
               <EuiNavDrawerGroup listItems={this.analyzeLinks} />
-              <EuiHorizontalRule margin="none" />
               <EuiNavDrawerGroup listItems={this.securityLinks} />
-              <EuiHorizontalRule margin="none" />
               <EuiNavDrawerGroup listItems={this.searchLinks} />
-              <EuiHorizontalRule margin="none" />
               <EuiNavDrawerGroup listItems={this.observabilityLinks} />
               <EuiHorizontalRule margin="none" />
               <EuiNavDrawerGroup listItems={this.adminLinks} />

From 98d75e9c82cc4e873223c75e7b9c284a6393ee82 Mon Sep 17 00:00:00 2001
From: Dave Snider <dave.snider@gmail.com>
Date: Fri, 10 Jan 2020 09:02:08 -0800
Subject: [PATCH 10/12] fix fav text

---
 src-docs/src/views/nav_drawer/nav_drawer.js | 34 ++++++++++-----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js
index bd4f1e0878a..4fab1293271 100644
--- a/src-docs/src/views/nav_drawer/nav_drawer.js
+++ b/src-docs/src/views/nav_drawer/nav_drawer.js
@@ -136,7 +136,7 @@ export default class extends Component {
                 color: 'subdued',
                 iconType: 'starEmpty',
                 iconSize: 's',
-                'aria-label': 'Add to favorites',
+                'aria-label': 'Add to Tools and Settings to favorites',
               },
             },
             {
@@ -147,7 +147,7 @@ export default class extends Component {
                 color: 'subdued',
                 iconType: 'starEmpty',
                 iconSize: 's',
-                'aria-label': 'Add to favorites',
+                'aria-label': 'Add Stack Monitoring to favorites',
               },
             },
             {
@@ -158,7 +158,7 @@ export default class extends Component {
                 color: 'subdued',
                 iconType: 'starEmpty',
                 iconSize: 's',
-                'aria-label': 'Add to favorites',
+                'aria-label': 'Add Stack Management to favorites',
               },
             },
             {
@@ -193,7 +193,7 @@ export default class extends Component {
                 color: 'subdued',
                 iconType: 'starEmpty',
                 iconSize: 's',
-                'aria-label': 'Add to favorites',
+                'aria-label': 'Add Discover to favorites',
               },
             },
             {
@@ -204,7 +204,7 @@ export default class extends Component {
                 color: 'subdued',
                 iconType: 'starEmpty',
                 iconSize: 's',
-                'aria-label': 'Add to favorites',
+                'aria-label': 'Add Visualize to favorites',
               },
             },
             {
@@ -215,7 +215,7 @@ export default class extends Component {
                 color: 'subdued',
                 iconType: 'starEmpty',
                 iconSize: 's',
-                'aria-label': 'Add to favorites',
+                'aria-label': 'Add Canvas to favorites',
               },
             },
             {
@@ -226,7 +226,7 @@ export default class extends Component {
                 color: 'subdued',
                 iconType: 'starEmpty',
                 iconSize: 's',
-                'aria-label': 'Add to favorites',
+                'aria-label': 'Add Maps to favorites',
               },
             },
             {
@@ -237,7 +237,7 @@ export default class extends Component {
                 color: 'subdued',
                 iconType: 'starEmpty',
                 iconSize: 's',
-                'aria-label': 'Add to favorites',
+                'aria-label': 'Add Machine Learning to favorites',
               },
             },
             {
@@ -248,7 +248,7 @@ export default class extends Component {
                 color: 'subdued',
                 iconType: 'starEmpty',
                 iconSize: 's',
-                'aria-label': 'Add to favorites',
+                'aria-label': 'Add Graph to favorites',
               },
             },
           ],
@@ -277,7 +277,7 @@ export default class extends Component {
                 color: 'subdued',
                 iconType: 'starEmpty',
                 iconSize: 's',
-                'aria-label': 'Add to favorites',
+                'aria-label': 'Add SIEM to favorites',
               },
             },
           ],
@@ -300,7 +300,7 @@ export default class extends Component {
                 color: 'subdued',
                 iconType: 'starEmpty',
                 iconSize: 's',
-                'aria-label': 'Add to favorites',
+                'aria-label': 'Add Enterprise search to favorites',
               },
             },
             {
@@ -311,7 +311,7 @@ export default class extends Component {
                 color: 'subdued',
                 iconType: 'starEmpty',
                 iconSize: 's',
-                'aria-label': 'Add to favorites',
+                'aria-label': 'Add App Search to favorites',
               },
             },
             {
@@ -322,7 +322,7 @@ export default class extends Component {
                 color: 'subdued',
                 iconType: 'starEmpty',
                 iconSize: 's',
-                'aria-label': 'Add to favorites',
+                'aria-label': 'Add Workplace Search to favorites',
               },
             },
           ],
@@ -345,7 +345,7 @@ export default class extends Component {
                 color: 'subdued',
                 iconType: 'starEmpty',
                 iconSize: 's',
-                'aria-label': 'Add to favorites',
+                'aria-label': 'Add Logs to favorites',
               },
             },
             {
@@ -356,7 +356,7 @@ export default class extends Component {
                 color: 'subdued',
                 iconType: 'starEmpty',
                 iconSize: 's',
-                'aria-label': 'Add to favorites',
+                'aria-label': 'Add Metrics to favorites',
               },
             },
             {
@@ -367,7 +367,7 @@ export default class extends Component {
                 color: 'subdued',
                 iconType: 'starEmpty',
                 iconSize: 's',
-                'aria-label': 'Add to favorites',
+                'aria-label': 'Add APM to favorites',
               },
             },
             {
@@ -378,7 +378,7 @@ export default class extends Component {
                 color: 'subdued',
                 iconType: 'starEmpty',
                 iconSize: 's',
-                'aria-label': 'Add to favorites',
+                'aria-label': 'Add Uptime to favorites',
               },
             },
           ],

From dd581e131e4ca269a24922155507a9f68816af4e Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Fri, 10 Jan 2020 11:09:34 -0600
Subject: [PATCH 11/12] update delay for focus management

---
 .../__snapshots__/nav_drawer.test.js.snap     | 69 -------------------
 .../nav_drawer/nav_drawer_flyout.js           | 20 +++---
 2 files changed, 11 insertions(+), 78 deletions(-)

diff --git a/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap b/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap
index 35a5a8e4f78..37f23825483 100644
--- a/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap
+++ b/src/components/nav_drawer/__snapshots__/nav_drawer.test.js.snap
@@ -304,29 +304,6 @@ exports[`EuiNavDrawer is rendered 1`] = `
         id="navDrawerFlyoutTitle"
         tabindex="-1"
       />
-      <div
-        data-focus-guard="true"
-        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-        tabindex="0"
-      />
-      <div
-        data-focus-guard="true"
-        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-        tabindex="1"
-      />
-      <div
-        data-focus-lock-disabled="false"
-      >
-        <ul
-          aria-labelledby="navDrawerFlyoutTitle"
-          class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup euiNavDrawerFlyout__listGroup"
-        />
-      </div>
-      <div
-        data-focus-guard="true"
-        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-        tabindex="0"
-      />
     </div>
   </div>
 </nav>
@@ -570,29 +547,6 @@ exports[`EuiNavDrawer renders with falsy children 1`] = `
         id="navDrawerFlyoutTitle"
         tabindex="-1"
       />
-      <div
-        data-focus-guard="true"
-        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-        tabindex="0"
-      />
-      <div
-        data-focus-guard="true"
-        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-        tabindex="1"
-      />
-      <div
-        data-focus-lock-disabled="false"
-      >
-        <ul
-          aria-labelledby="navDrawerFlyoutTitle"
-          class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup euiNavDrawerFlyout__listGroup"
-        />
-      </div>
-      <div
-        data-focus-guard="true"
-        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-        tabindex="0"
-      />
     </div>
   </div>
 </nav>
@@ -902,29 +856,6 @@ exports[`EuiNavDrawer renders with fragments 1`] = `
         id="navDrawerFlyoutTitle"
         tabindex="-1"
       />
-      <div
-        data-focus-guard="true"
-        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-        tabindex="0"
-      />
-      <div
-        data-focus-guard="true"
-        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-        tabindex="1"
-      />
-      <div
-        data-focus-lock-disabled="false"
-      >
-        <ul
-          aria-labelledby="navDrawerFlyoutTitle"
-          class="euiListGroup euiListGroup-maxWidthDefault euiNavDrawerGroup euiNavDrawerFlyout__listGroup"
-        />
-      </div>
-      <div
-        data-focus-guard="true"
-        style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-        tabindex="0"
-      />
     </div>
   </div>
 </nav>
diff --git a/src/components/nav_drawer/nav_drawer_flyout.js b/src/components/nav_drawer/nav_drawer_flyout.js
index df50c48a2bb..043043d4ea6 100644
--- a/src/components/nav_drawer/nav_drawer_flyout.js
+++ b/src/components/nav_drawer/nav_drawer_flyout.js
@@ -64,15 +64,17 @@ export const EuiNavDrawerFlyout = ({
       <EuiTitle className="euiNavDrawerFlyout__title" tabIndex="-1" size="xxs">
         <div id={LABEL}>{title}</div>
       </EuiTitle>
-      <EuiFocusTrap returnFocus={false}>
-        <EuiNavDrawerGroup
-          className="euiNavDrawerFlyout__listGroup"
-          ariaLabelledby={LABEL}
-          listItems={listItems}
-          wrapText={wrapText}
-          onClose={() => handleClose(false)}
-        />
-      </EuiFocusTrap>
+      {listItems ? (
+        <EuiFocusTrap returnFocus={false}>
+          <EuiNavDrawerGroup
+            className="euiNavDrawerFlyout__listGroup"
+            ariaLabelledby={LABEL}
+            listItems={listItems}
+            wrapText={wrapText}
+            onClose={() => handleClose(false)}
+          />
+        </EuiFocusTrap>
+      ) : null}
     </div>
   );
 };

From d6d6035bcead5b24ac5f9722418f021bafaae618 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Fri, 10 Jan 2020 13:10:04 -0600
Subject: [PATCH 12/12] fix firefox expansion

---
 src/components/nav_drawer/_nav_drawer.scss |  4 ++
 src/components/nav_drawer/nav_drawer.js    | 56 +++++-----------------
 2 files changed, 15 insertions(+), 45 deletions(-)

diff --git a/src/components/nav_drawer/_nav_drawer.scss b/src/components/nav_drawer/_nav_drawer.scss
index 8275724e303..ad9d03a0720 100644
--- a/src/components/nav_drawer/_nav_drawer.scss
+++ b/src/components/nav_drawer/_nav_drawer.scss
@@ -16,6 +16,7 @@
   .euiNavDrawerMenu {
     @include euiScrollBar;
     overflow-y: auto;
+    overflow-x: hidden;
     width: $euiNavDrawerWidthCollapsed;
     height: 100%;
 
@@ -141,6 +142,9 @@
       // Instead of one collapsed and one expanded, they're now both expanded
       // Double the width of expanded sidebars
       width: $euiNavDrawerWidthExpanded * 2 !important; // sass-lint:disable-line no-important
+      // Prevents a shift in the main menu on initial open.
+      // The lack of horizontal transition is less alarming than the shift.
+      transition: none;
     }
   }
 
diff --git a/src/components/nav_drawer/nav_drawer.js b/src/components/nav_drawer/nav_drawer.js
index 41a82bb8a10..6c5401d6f92 100644
--- a/src/components/nav_drawer/nav_drawer.js
+++ b/src/components/nav_drawer/nav_drawer.js
@@ -51,8 +51,6 @@ export class EuiNavDrawer extends Component {
     // reacts every 50ms to resize changes and always gets the final update
   }, 50);
 
-  timeoutID;
-
   sideNavLockClicked = () => {
     if (this.state.isLocked) {
       window.removeEventListener('resize', this.functionToCallOnWindowResize);
@@ -133,37 +131,6 @@ export class EuiNavDrawer extends Component {
     window.removeEventListener('resize', this.functionToCallOnWindowResize);
   };
 
-  manageFocus = () => {
-    // This prevents the drawer from collapsing when tabbing through children
-    // by clearing the timeout thus cancelling the onBlur event (see focusOut).
-    // This means isManagingFocus remains true as long as a child element
-    // has focus. This is the case since React bubbles up onFocus and onBlur
-    // events from the child elements.
-    clearTimeout(this.timeoutID);
-
-    if (!this.state.isManagingFocus) {
-      this.setState({
-        isManagingFocus: true,
-      });
-    }
-  };
-
-  focusOut = () => {
-    // This collapses the drawer when no children have focus (i.e. tabbed out).
-    // In other words, if focus does not bubble up from a child element, then
-    // the drawer will collapse. See the corresponding block in expandDrawer
-    // (called by onFocus) which cancels this operation via clearTimeout.
-    this.timeoutID = setTimeout(() => {
-      if (this.state.isManagingFocus) {
-        this.setState({
-          isManagingFocus: false,
-        });
-
-        this.closeBoth();
-      }
-    }, 0);
-  };
-
   expandFlyout = (links, title, item) => {
     const content = links;
 
@@ -171,14 +138,16 @@ export class EuiNavDrawer extends Component {
       this.collapseFlyout();
     } else {
       this.setState(
-        {
-          flyoutIsCollapsed: false,
-          navFlyoutTitle: title,
-          navFlyoutContent: content,
-          isCollapsed: this.state.isLocked ? false : true,
-          toolTipsEnabled: false,
-          outsideClickDisabled: false,
-          focusReturnRef: item.label,
+        ({ isLocked }) => {
+          return {
+            flyoutIsCollapsed: false,
+            navFlyoutTitle: title,
+            navFlyoutContent: content,
+            isCollapsed: isLocked ? false : true,
+            toolTipsEnabled: false,
+            outsideClickDisabled: false,
+            focusReturnRef: item.label,
+          };
         },
         () => {
           // Ideally this uses React `ref` instead of `querySelector`, but the menu composition
@@ -378,10 +347,7 @@ export class EuiNavDrawer extends Component {
         onOutsideClick={() => this.closeBoth()}
         isDisabled={this.state.outsideClickDisabled}>
         <nav className={classes} {...rest}>
-          <EuiFlexGroup
-            gutterSize="none"
-            onBlur={this.focusOut}
-            onFocus={this.manageFocus}>
+          <EuiFlexGroup gutterSize="none">
             <EuiFlexItem grow={false}>
               <div
                 id={MENU_ELEMENT_ID}