main and nav landmark a11y fixes (#48381)

* main and nav landmark a11y fixes * deduping i18n keys * renaming appNav aria-label prop
elastic · Oct 18, 2019 · 894fff0 · 894fff0
1 parent f13949a
commit 894fff0
Show file tree

Hide file tree

Showing 12 changed files with 56 additions and 27 deletions.
diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx
@@ -406,12 +406,26 @@ class HeaderUI extends Component<Props, State> {
           data-test-subj="navDrawer"
           isLocked={isLocked}
           onIsLockedUpdate={onIsLockedUpdate}
+          aria-label={i18n.translate('core.ui.primaryNav.screenReaderLabel', {
+            defaultMessage: 'Primary',
+          })}
         >
-          <nav>
-            <EuiNavDrawerGroup listItems={recentLinksArray} />
+          <>
+            <EuiNavDrawerGroup
+              listItems={recentLinksArray}
+              aria-label={i18n.translate('core.ui.recentLinks.screenReaderLabel', {
+                defaultMessage: 'Recently viewed links, navigation',
+              })}
+            />
             <EuiHorizontalRule margin="none" />
-            <EuiNavDrawerGroup data-test-subj="navDrawerAppsMenu" listItems={navLinksArray} />
-          </nav>
+            <EuiNavDrawerGroup
+              data-test-subj="navDrawerAppsMenu"
+              listItems={navLinksArray}
+              aria-label={i18n.translate('core.ui.primaryNavList.screenReaderLabel', {
+                defaultMessage: 'Primary navigation links',
+              })}
+            />
+          </>
         </EuiNavDrawer>
       </header>
     );

diff --git a/src/legacy/core_plugins/kibana/public/dev_tools/partials/dev_tools_app.html b/src/legacy/core_plugins/kibana/public/dev_tools/partials/dev_tools_app.html
@@ -1,9 +1,9 @@
-<div class="devApp app-container">
-    <!-- Tabs. -->
+<main class="devApp app-container">
+  <!-- Tabs. -->
   <div class="euiTabs" role="tablist">
     <a
       role="tab"
-      aria-selected="{{kbnDevToolsApp.currentPath === item.url}}"
+      aria-selected="{{ kbnDevToolsApp.currentPath === item.url }}"
       ng-repeat="item in kbnDevToolsApp.devTools"
       class="euiTab"
       ng-class="{'euiTab-isSelected': kbnDevToolsApp.currentPath === item.url, 'euiTab-isDisabled': item.disabled}"
@@ -18,5 +18,5 @@
       {{::item.display}}
     </a>
   </div>
-  <main class="devApp__container" role="tabpanel" ng-transclude></main>
-</div>
+  <div class="devApp__container" role="tabpanel" ng-transclude></div>
+</main>
diff --git a/src/legacy/ui/public/chrome/directives/kbn_chrome.html b/src/legacy/ui/public/chrome/directives/kbn_chrome.html
@@ -1,9 +1,9 @@
 <div class="app-wrapper-panel">
   <div id="globalBannerList"></div>
 
-  <main
+  <div
     class="application"
     ng-class="'tab-' + getFirstPathSegment() + ' ' + chrome.getApplicationClasses()"
     ng-view
-  ></main>
+  ></div>
 </div>
diff --git a/src/legacy/ui/public/management/components/sidebar_nav.tsx b/src/legacy/ui/public/management/components/sidebar_nav.tsx
@@ -19,6 +19,7 @@
 
 import { EuiIcon, EuiSideNav, IconType } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { IndexedArray } from 'ui/indexed_array';
 
@@ -73,6 +74,9 @@ export class SidebarNav extends React.Component<SidebarNavProps, SidebarNavState
   public render() {
     return (
       <EuiSideNav
+        aria-label={i18n.translate('common.ui.management.nav.label', {
+          defaultMessage: 'Management',
+        })}
         mobileTitle={this.renderMobileTitle()}
         isOpenOnMobile={this.state.isSideNavOpenOnMobile}
         toggleOpenOnMobile={this.toggleOpenOnMobile}

diff --git a/x-pack/legacy/plugins/apm/public/new-platform/plugin.tsx b/x-pack/legacy/plugins/apm/public/new-platform/plugin.tsx
@@ -24,7 +24,7 @@ import { MatchedRouteProvider } from '../context/MatchedRouteContext';
 
 export const REACT_APP_ROOT_ID = 'react-apm-root';
 
-const MainContainer = styled.div`
+const MainContainer = styled.main`
   min-width: ${px(unit * 50)};
   padding: ${px(units.plus)};
 `;

diff --git a/x-pack/legacy/plugins/code/public/components/admin_page/admin.tsx b/x-pack/legacy/plugins/code/public/components/admin_page/admin.tsx
@@ -131,7 +131,7 @@ class AdminPage extends React.PureComponent<Props, State> {
 
   public render() {
     return (
-      <div className="codeContainer__root">
+      <main className="codeContainer__root">
         <div className="codeContainer__rootInner">
           <div className="codeContainer__adminWrapper">
             <SearchBar
@@ -147,7 +147,7 @@ class AdminPage extends React.PureComponent<Props, State> {
             </div>
           </div>
         </div>
-      </div>
+      </main>
     );
   }
 }

diff --git a/x-pack/legacy/plugins/infra/public/components/navigation/app_navigation.tsx b/x-pack/legacy/plugins/infra/public/components/navigation/app_navigation.tsx
@@ -9,11 +9,12 @@ import React from 'react';
 import euiStyled from '../../../../../common/eui_styled_components';
 
 interface AppNavigationProps {
+  'aria-label': string;
   children: React.ReactNode;
 }
 
-export const AppNavigation = ({ children }: AppNavigationProps) => (
-  <Nav>
+export const AppNavigation = ({ 'aria-label': label, children }: AppNavigationProps) => (
+  <Nav aria-label={label}>
     <EuiFlexGroup gutterSize="m" alignItems="center" justifyContent="spaceBetween">
       <EuiFlexItem>{children}</EuiFlexItem>
     </EuiFlexGroup>
@@ -25,7 +26,7 @@ const Nav = euiStyled.nav`
   border-bottom: ${props => props.theme.eui.euiBorderThin};
   padding: ${props =>
     `${props.theme.eui.euiSize} ${props.theme.eui.euiSizeL} ${props.theme.eui.euiSize} ${props.theme.eui.euiSizeL}`}
-  
+
   .euiTabs {
     padding-left: 3px;
     margin-left: -3px;

diff --git a/x-pack/legacy/plugins/infra/public/lib/adapters/framework/kibana_framework_adapter.ts b/x-pack/legacy/plugins/infra/public/lib/adapters/framework/kibana_framework_adapter.ts
@@ -115,10 +115,10 @@ export class InfraKibanaFrameworkAdapter implements InfraFrameworkAdapter {
       }),
       scope: true,
       template: `
-        <div
+        <main
           id="${ROOT_ELEMENT_ID}"
           class="infReactRoot"
-        ></div>
+        ></main>
       `,
     }));
 

diff --git a/x-pack/legacy/plugins/infra/public/pages/infrastructure/index.tsx b/x-pack/legacy/plugins/infra/public/pages/infrastructure/index.tsx
@@ -58,7 +58,11 @@ export const InfrastructurePage = injectUICapabilities(
           readOnlyBadge={!uiCapabilities.infrastructure.save}
         />
 
-        <AppNavigation>
+        <AppNavigation
+          aria-label={i18n.translate('xpack.infra.header.infrastructureNavigationTitle', {
+            defaultMessage: 'Metrics',
+          })}
+        >
           <RoutedTabs
             tabs={[
               {

diff --git a/x-pack/legacy/plugins/infra/public/pages/logs/index.tsx b/x-pack/legacy/plugins/infra/public/pages/logs/index.tsx
@@ -89,6 +89,9 @@ export const LogsPage = injectUICapabilities(({ match, uiCapabilities }: LogsPag
     }),
     path: `${match.path}/settings`,
   };
+  const pageTitle = i18n.translate('xpack.infra.header.logsTitle', {
+    defaultMessage: 'Logs',
+  });
   return (
     <Source.Context.Provider value={source}>
       <LogAnalysisCapabilities.Context.Provider value={logAnalysisCapabilities}>
@@ -110,9 +113,7 @@ export const LogsPage = injectUICapabilities(({ match, uiCapabilities }: LogsPag
           <Header
             breadcrumbs={[
               {
-                text: i18n.translate('xpack.infra.header.logsTitle', {
-                  defaultMessage: 'Logs',
-                }),
+                text: pageTitle,
               },
             ]}
             readOnlyBadge={!uiCapabilities.logs.save}
@@ -129,7 +130,7 @@ export const LogsPage = injectUICapabilities(({ match, uiCapabilities }: LogsPag
             />
           ) : (
             <>
-              <AppNavigation>
+              <AppNavigation aria-label={pageTitle}>
                 <RoutedTabs
                   tabs={
                     logAnalysisCapabilities.hasLogAnalysisCapabilites

diff --git a/x-pack/legacy/plugins/siem/public/pages/home/index.tsx b/x-pack/legacy/plugins/siem/public/pages/home/index.tsx
@@ -10,6 +10,7 @@ import * as React from 'react';
 import { Redirect, Route, Switch } from 'react-router-dom';
 import { pure } from 'recompose';
 import styled from 'styled-components';
+import { i18n } from '@kbn/i18n';
 
 import { AutoSizer } from '../../components/auto_sizer';
 import { DragDropContextWrapper } from '../../components/drag_and_drop/drag_drop_context_wrapper';
@@ -104,7 +105,11 @@ export const HomePage = pure(() => (
                 </Flyout>
 
                 <EuiPageBody>
-                  <NavGlobal>
+                  <NavGlobal
+                    aria-label={i18n.translate('xpack.siem.global.navigationLabel', {
+                      defaultMessage: 'SIEM app',
+                    })}
+                  >
                     <EuiFlexGroup alignItems="center" gutterSize="m" justifyContent="spaceBetween">
                       <EuiFlexItem>
                         <SiemNavigation navTabs={navTabs} />

diff --git a/x-pack/legacy/plugins/uptime/public/uptime_app.tsx b/x-pack/legacy/plugins/uptime/public/uptime_app.tsx
@@ -158,7 +158,7 @@ const Application = (props: UptimeAppProps) => {
                   <UptimeRefreshContext.Provider value={{ lastRefresh, ...rootRouteProps }}>
                     <UptimeSettingsContext.Provider value={initializeSettingsContextValues()}>
                       <EuiPage className="app-wrapper-panel " data-test-subj="uptimeApp">
-                        <div>
+                        <main>
                           <EuiFlexGroup
                             alignItems="center"
                             justifyContent="spaceBetween"
@@ -200,7 +200,7 @@ const Application = (props: UptimeAppProps) => {
                             />
                             <Route component={NotFoundPage} />
                           </Switch>
-                        </div>
+                        </main>
                       </EuiPage>
                     </UptimeSettingsContext.Provider>
                   </UptimeRefreshContext.Provider>