Variety of quick a11y fixes (#46569)

Focusing on heading structure and page layout for Home, Discover, Dashboard, and Visualize.

This is progress on #37539

src/core/public/chrome/ui/header/header.tsx

@@ -19,7 +19,7 @@
 
 import Url from 'url';
 
-import React, { Component, createRef, Fragment } from 'react';
+import React, { Component, createRef } from 'react';
 import * as Rx from 'rxjs';
 
 import {
@@ -376,7 +376,7 @@ class HeaderUI extends Component<Props, State> {
     ];
 
     return (
-      <Fragment>
+      <header>
         <EuiHeader>
           <EuiHeaderSection grow={false}>
             <EuiShowFor sizes={['xs', 's']}>
@@ -407,11 +407,13 @@ class HeaderUI extends Component<Props, State> {
           isLocked={isLocked}
           onIsLockedUpdate={onIsLockedUpdate}
         >
-          <EuiNavDrawerGroup listItems={recentLinksArray} />
-          <EuiHorizontalRule margin="none" />
-          <EuiNavDrawerGroup data-test-subj="navDrawerAppsMenu" listItems={navLinksArray} />
+          <nav>
+            <EuiNavDrawerGroup listItems={recentLinksArray} />
+            <EuiHorizontalRule margin="none" />
+            <EuiNavDrawerGroup data-test-subj="navDrawerAppsMenu" listItems={navLinksArray} />
+          </nav>
         </EuiNavDrawer>
-      </Fragment>
+      </header>
     );
   }
 

src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_input.tsx

@@ -19,6 +19,7 @@
 
 import { Component } from 'react';
 import React from 'react';
+import { i18n } from '@kbn/i18n';
 
 import { EuiFieldText, EuiOutsideClickDetector, PopoverAnchorPosition } from '@elastic/eui';
 
@@ -438,23 +439,30 @@ export class QueryBarInputUI extends Component<Props, State> {
   }
 
   public render() {
+    const isSuggestionsVisible = this.state.isSuggestionsVisible && {
+      'aria-controls': 'kbnTypeahead__items',
+      'aria-owns': 'kbnTypeahead__items',
+    };
+    const ariaCombobox = { ...isSuggestionsVisible, role: 'combobox' };
+
     return (
       <EuiOutsideClickDetector onOutsideClick={this.onOutsideClick}>
         <div
+          {...ariaCombobox}
           style={{ position: 'relative' }}
-          role="combobox"
+          aria-label={i18n.translate('data.query.queryBar.comboboxAriaLabel', {
+            defaultMessage: 'Search and filter the {pageType} page',
+            values: { pageType: this.services.appName },
+          })}
           aria-haspopup="true"
           aria-expanded={this.state.isSuggestionsVisible}
-          aria-owns="kbnTypeahead__items"
-          aria-controls="kbnTypeahead__items"
         >
           <div role="search">
             <div className="kuiLocalSearchAssistedInput">
               <EuiFieldText
                 placeholder={
                   this.props.placeholder ||
-                  this.props.intl.formatMessage({
-                    id: 'data.query.queryBar.searchInputPlaceholder',
+                  i18n.translate('data.query.queryBar.searchInputPlaceholder', {
                     defaultMessage: 'Search',
                   })
                 }
@@ -472,26 +480,17 @@ export class QueryBarInputUI extends Component<Props, State> {
                 }}
                 autoComplete="off"
                 spellCheck={false}
-                aria-label={
-                  this.props.screenTitle
-                    ? this.props.intl.formatMessage(
-                        {
-                          id: 'data.query.queryBar.searchInputAriaLabel',
-                          defaultMessage:
-                            'You are on search box of {previouslyTranslatedPageTitle} page. Start typing to search and filter the {pageType}',
-                        },
-                        {
-                          previouslyTranslatedPageTitle: this.props.screenTitle,
-                          pageType: this.services.appName,
-                        }
-                      )
-                    : undefined
-                }
+                aria-label={i18n.translate('data.query.queryBar.searchInputAriaLabel', {
+                  defaultMessage: 'Start typing to search and filter the {pageType} page',
+                  values: { pageType: this.services.appName },
+                })}
                 type="text"
                 aria-autocomplete="list"
-                aria-controls="kbnTypeahead__items"
+                aria-controls={this.state.isSuggestionsVisible ? 'kbnTypeahead__items' : undefined}
                 aria-activedescendant={
-                  this.state.isSuggestionsVisible ? 'suggestion-' + this.state.index : ''
+                  this.state.isSuggestionsVisible && typeof this.state.index === 'number'
+                    ? `suggestion-${this.state.index}`
+                    : undefined
                 }
                 role="textbox"
                 prepend={this.props.prepend}

src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/labels_panel.tsx

@@ -29,12 +29,12 @@ function LabelsPanel({ stateParams, setValue, setGaugeValue }: GaugeOptionsInter
   return (
     <EuiPanel paddingSize="s">
       <EuiTitle size="xs">
-        <h2>
+        <h3>
           <FormattedMessage
             id="kbnVislibVisTypes.controls.gaugeOptions.labelsTitle"
             defaultMessage="Labels"
           />
-        </h2>
+        </h3>
       </EuiTitle>
       <EuiSpacer size="s" />
 

src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/ranges_panel.tsx

@@ -38,12 +38,12 @@ function RangesPanel({
   return (
     <EuiPanel paddingSize="s">
       <EuiTitle size="xs">
-        <h2>
+        <h3>
           <FormattedMessage
             id="kbnVislibVisTypes.controls.gaugeOptions.rangesTitle"
             defaultMessage="Ranges"
           />
-        </h2>
+        </h3>
       </EuiTitle>
       <EuiSpacer size="s" />
 

src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/gauge/style_panel.tsx

@@ -34,12 +34,12 @@ function StylePanel({ aggs, setGaugeValue, stateParams, vis }: GaugeOptionsInter
   return (
     <EuiPanel paddingSize="s">
       <EuiTitle size="xs">
-        <h2>
+        <h3>
           <FormattedMessage
             id="kbnVislibVisTypes.controls.gaugeOptions.styleTitle"
             defaultMessage="Style"
           />
-        </h2>
+        </h3>
       </EuiTitle>
       <EuiSpacer size="s" />
 

src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/category_axis_panel.tsx

@@ -59,12 +59,12 @@ function CategoryAxisPanel(props: CategoryAxisPanelProps) {
   return (
     <EuiPanel paddingSize="s">
       <EuiTitle size="xs">
-        <h2>
+        <h3>
           <FormattedMessage
             id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.xAxisTitle"
             defaultMessage="X-axis"
           />
-        </h2>
+        </h3>
       </EuiTitle>
       <EuiSpacer size="s" />
 

src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/series_panel.tsx

@@ -38,12 +38,12 @@ function SeriesPanel(props: SeriesPanelProps) {
   return (
     <EuiPanel paddingSize="s">
       <EuiTitle size="xs">
-        <h2>
+        <h3>
           <FormattedMessage
             id="kbnVislibVisTypes.controls.pointSeries.series.metricsTitle"
             defaultMessage="Metrics"
           />
-        </h2>
+        </h3>
       </EuiTitle>
       <EuiSpacer size="s" />
 

src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/metrics_axes/value_axes_panel.tsx

@@ -109,12 +109,12 @@ function ValueAxesPanel(props: ValueAxesPanelProps) {
       <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween" alignItems="baseline">
         <EuiFlexItem grow={false}>
           <EuiTitle size="xs">
-            <h2>
+            <h3>
               <FormattedMessage
                 id="kbnVislibVisTypes.controls.pointSeries.valueAxes.yAxisTitle"
                 defaultMessage="Y-axes"
               />
-            </h2>
+            </h3>
           </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>

src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/pie.tsx

@@ -36,12 +36,12 @@ function PieOptions(props: VisOptionsProps<PieVisParams>) {
     <>
       <EuiPanel paddingSize="s">
         <EuiTitle size="xs">
-          <h2>
+          <h3>
             <FormattedMessage
               id="kbnVislibVisTypes.editors.pie.pieSettingsTitle"
               defaultMessage="Pie settings"
             />
-          </h2>
+          </h3>
         </EuiTitle>
         <EuiSpacer size="s" />
         <SwitchOption
@@ -59,12 +59,12 @@ function PieOptions(props: VisOptionsProps<PieVisParams>) {
 
       <EuiPanel paddingSize="s">
         <EuiTitle size="xs">
-          <div>
+          <h3>
             <FormattedMessage
               id="kbnVislibVisTypes.editors.pie.labelsSettingsTitle"
               defaultMessage="Labels settings"
             />
-          </div>
+          </h3>
         </EuiTitle>
         <EuiSpacer size="s" />
         <SwitchOption

src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/grid_panel.tsx

@@ -59,12 +59,12 @@ function GridPanel({ stateParams, setValue, hasHistogramAgg }: VisOptionsProps<B
   return (
     <EuiPanel paddingSize="s">
       <EuiTitle size="xs">
-        <h2>
+        <h3>
           <FormattedMessage
             id="kbnVislibVisTypes.controls.pointSeries.gridAxis.gridText"
             defaultMessage="Grid"
           />
-        </h2>
+        </h3>
       </EuiTitle>
 
       <EuiSpacer size="m" />