Improve a11y in EuiNavDrawer

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Added `currency` glyph to 'EuiIcon' ([#2398](https://github.com/elastic/eui/pull/2398))
 - Migrate `EuiBreadcrumbs`, `EuiHeader` etc, and `EuiLink` to TypeScript ([#2391](https://github.com/elastic/eui/pull/2391))
 - Added focus state to `EuiListGroupItem` ([#2406](https://github.com/elastic/eui/pull/2406))
+- Improved a11y in `EuiNavDrawer` ([#2417](https://github.com/elastic/eui/pull/2417))
 
 **Bug fixes**
 

src-docs/src/views/nav_drawer/nav_drawer.js

@@ -50,7 +50,11 @@ export default class extends Component {
       color: 'subdued',
       iconType: 'pin',
       iconSize: 's',
-      'aria-label': 'Pin to top',
+    };
+
+    const pinExtraActionFn = val => {
+      pinExtraAction['aria-label'] = `Pin ${val} to top`;
+      return pinExtraAction;
     };
 
     this.topLinks = [
@@ -124,43 +128,43 @@ export default class extends Component {
         iconType: 'canvasApp',
         isActive: true,
         extraAction: {
-          ...pinExtraAction,
+          ...pinExtraActionFn('Canvas'),
           alwaysShow: true,
         },
       },
       {
         label: 'Discover',
         href: '#/layout/nav-drawer',
         iconType: 'discoverApp',
-        extraAction: pinExtraAction,
+        extraAction: { ...pinExtraActionFn('Discover') },
       },
       {
         label: 'Visualize',
         href: '#/layout/nav-drawer',
         iconType: 'visualizeApp',
-        extraAction: pinExtraAction,
+        extraAction: { ...pinExtraActionFn('Visualize') },
       },
       {
         label: 'Dashboard',
         href: '#/layout/nav-drawer',
         iconType: 'dashboardApp',
-        extraAction: pinExtraAction,
+        extraAction: { ...pinExtraActionFn('Dashboard') },
       },
       {
         label: 'Machine learning',
         href: '#/layout/nav-drawer',
         iconType: 'machineLearningApp',
-        extraAction: pinExtraAction,
+        extraAction: { ...pinExtraActionFn('Machine learning') },
       },
       {
         label: 'Custom Plugin (no icon)',
         href: '#/layout/nav-drawer',
-        extraAction: pinExtraAction,
+        extraAction: { ...pinExtraActionFn('Custom Plugin') },
       },
       {
         label: 'Nature Plugin (image as icon)',
         href: '#/layout/nav-drawer',
-        extraAction: pinExtraAction,
+        extraAction: { ...pinExtraActionFn('Nature Plugin') },
         icon: (
           <EuiImage
             size="s"
@@ -176,37 +180,37 @@ export default class extends Component {
         label: 'APM',
         href: '#/layout/nav-drawer',
         iconType: 'apmApp',
-        extraAction: pinExtraAction,
+        extraAction: { ...pinExtraActionFn('APM') },
       },
       {
         label: 'Infrastructure',
         href: '#/layout/nav-drawer',
         iconType: 'infraApp',
-        extraAction: pinExtraAction,
+        extraAction: { ...pinExtraActionFn('Infrastructure') },
       },
       {
         label: 'Log viewer',
         href: '#/layout/nav-drawer',
         iconType: 'loggingApp',
-        extraAction: pinExtraAction,
+        extraAction: { ...pinExtraActionFn('Log viewer') },
       },
       {
         label: 'Uptime',
         href: '#/layout/nav-drawer',
         iconType: 'upgradeAssistantApp',
-        extraAction: pinExtraAction,
+        extraAction: { ...pinExtraActionFn('Uptime') },
       },
       {
         label: 'Maps',
         href: '#/layout/nav-drawer',
         iconType: 'gisApp',
-        extraAction: pinExtraAction,
+        extraAction: { ...pinExtraActionFn('Maps') },
       },
       {
         label: 'SIEM',
         href: '#/layout/nav-drawer',
         iconType: 'securityAnalyticsApp',
-        extraAction: pinExtraAction,
+        extraAction: { ...pinExtraActionFn('SIEM') },
       },
     ];
 

src/components/nav_drawer/_nav_drawer.scss

@@ -33,9 +33,13 @@
     transition: width $euiAnimSpeedExtraFast;
     z-index: $euiZHeader + 1;
 
-    .euiListGroupItem__button {
+    .navDrawerExpandButton-isExpanded .euiListGroupItem__button {
       padding: $euiSizeM $euiSize;
     }
+
+    .navDrawerExpandButton-isCollapsed .euiListGroupItem__button {
+      max-width: $euiSizeXL;
+    }
   }
 
   &.euiNavDrawer-isCollapsed  {

src/components/nav_drawer/nav_drawer.js

@@ -229,7 +229,7 @@ export class EuiNavDrawer extends Component {
     let footerContent;
     if (showExpandButton) {
       footerContent = (
-        <EuiListGroup className="euiNavDrawer__expandButton" flush>
+        <EuiListGroup className="euiNavDrawer__expandButton">
           <EuiI18n
             tokens={[
               'euiNavDrawer.sideNavCollapse',
@@ -256,6 +256,11 @@ export class EuiNavDrawer extends Component {
                 label={this.state.isCollapsed ? sideNavExpand : sideNavCollapse}
                 iconType={this.state.isCollapsed ? 'menuRight' : 'menuLeft'}
                 size="s"
+                className={
+                  this.state.isCollapsed
+                    ? 'navDrawerExpandButton-isCollapsed'
+                    : 'navDrawerExpandButton-isExpanded'
+                }
                 showToolTip={this.state.isCollapsed}
                 extraAction={{
                   className: 'euiNavDrawer__expandButtonLockAction',
@@ -319,25 +324,27 @@ export class EuiNavDrawer extends Component {
       <EuiOutsideClickDetector
         onOutsideClick={() => this.closeBoth()}
         isDisabled={this.state.outsideClickDisabled}>
-        <div
-          className={classes}
-          onBlur={this.focusOut}
-          onFocus={this.manageFocus}
-          {...rest}>
-          <EuiFlexItem grow={false}>
-            <div
-              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}
-            </div>
-          </EuiFlexItem>
-
-          {flyoutContent}
-        </div>
+        <nav>
+          <div
+            className={classes}
+            onBlur={this.focusOut}
+            onFocus={this.manageFocus}
+            {...rest}>
+            <EuiFlexItem grow={false}>
+              <div
+                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 */}
+                {modifiedChildren}
+                {footerContent}
+              </div>
+            </EuiFlexItem>
+
+            {flyoutContent}
+          </div>
+        </nav>
       </EuiOutsideClickDetector>
     );
   }