Add navigation accessibility attributes/controls

elastic · Aug 11, 2020 · b97c75e · b97c75e
1 parent 5bbc24a
commit b97c75e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/layout.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/layout/layout.tsx
@@ -32,6 +32,12 @@ export const Layout: React.FC<ILayoutProps> = ({ children, navigation }) => {
             size="s"
             iconType={isNavOpen ? 'arrowDown' : 'arrowRight'}
             iconSide="right"
+            aria-label={i18n.translate('xpack.enterpriseSearch.nav.toggleMenu', {
+              defaultMessage: 'Toggle secondary navigation',
+            })}
+            aria-expanded={isNavOpen}
+            aria-pressed={isNavOpen}
+            aria-controls="enterpriseSearchNav"
             onClick={toggleNavigation}
             data-test-subj="enterpriseSearchNavToggle"
           >

diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.tsx
@@ -8,6 +8,7 @@ import React from 'react';
 import { useLocation } from 'react-router-dom';
 import classNames from 'classnames';
 
+import { i18n } from '@kbn/i18n';
 import { EuiIcon, EuiTitle, EuiText, EuiLink as EuiLinkExternal } from '@elastic/eui'; // TODO: Remove EuiLinkExternal after full Kibana transition
 import { EuiLink } from '../react_router_helpers';
 
@@ -29,7 +30,12 @@ interface ISideNavProps {
 
 export const SideNav: React.FC<ISideNavProps> = ({ product, children }) => {
   return (
-    <nav>
+    <nav
+      id="enterpriseSearchNav"
+      aria-label={i18n.translate('xpack.enterpriseSearch.nav.hierarchy', {
+        defaultMessage: 'Secondary', // The main Kibana nav is primary
+      })}
+    >
       <div className={`enterpriseSearchProduct enterpriseSearchProduct--${product.ID}`}>
         <div className="enterpriseSearchProduct__icon">
           <EuiIcon type="logoEnterpriseSearch" />