[Monitoring] h1 elements for accessibility (#52276)

* Add header element to indices page for WCAG

* Add h1 element for WCAG to node page

* Add h1 element for WCAG to stack monitoring overview page

* Add h1 to advanced nodes page in stack monitoring

* Add h1 to nodes page in stack monitoring

* Add h1 header for index advanced page in stack monitoring

* Standarize more on ide for h1 tag

* Give heading element to beats overview

* Update Beats listing page for H1 compat with WAVE

* Modified beat page to comply with heading rules from WCAG

* Kibana instance listing page updated for header WCAG

* Add WCAG header fix to logstash listing page

* Added headings for WCAG to logstash overview page

* Update pipeline listing page for WCAG A headings

* Fix WCAG heading problems in pipeline viewer

* Fix screen reader heading for APM overview page

* Update APM instances page for screen reader headings

* Update APM instance page for screen reader heading

* Update ccr page for screen reader headings

* More a11y fixes for headings in stack monitoring

* Fixup

* Consistant captalization per review

* Removed help text per review comment

* Include Elasticsearch node into screen reader message, per review feedback

* Update snapshots

* Linting

* Implement review suggestion for i8n compat

* Revert back to just plain string

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/legacy/plugins/monitoring/public/components/apm/instance/instance.js

@@ -14,8 +14,10 @@ import {
   EuiPageBody,
   EuiFlexGroup,
   EuiPageContent,
+  EuiScreenReaderOnly,
 } from '@elastic/eui';
 import { Status } from './status';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 export function ApmServerInstance({ summary, metrics, ...props }) {
   const seriesToShow = [
@@ -45,6 +47,14 @@ export function ApmServerInstance({ summary, metrics, ...props }) {
   return (
     <EuiPage>
       <EuiPageBody>
+        <EuiScreenReaderOnly>
+          <h1>
+            <FormattedMessage
+              id="xpack.monitoring.apm.instance.heading"
+              defaultMessage="APM Instance"
+            />
+          </h1>
+        </EuiScreenReaderOnly>
         <EuiPageContent>
           <Status stats={summary} />
           <EuiSpacer size="s" />

x-pack/legacy/plugins/monitoring/public/components/apm/instances/instances.js

@@ -8,14 +8,22 @@ import React, { Fragment } from 'react';
 import moment from 'moment';
 import { uniq, get } from 'lodash';
 import { EuiMonitoringTable } from '../../table';
-import { EuiLink, EuiPage, EuiPageBody, EuiPageContent, EuiSpacer } from '@elastic/eui';
+import {
+  EuiLink,
+  EuiPage,
+  EuiPageBody,
+  EuiPageContent,
+  EuiSpacer,
+  EuiScreenReaderOnly,
+} from '@elastic/eui';
 import { Status } from './status';
 import { formatMetric } from '../../../lib/format_number';
 import { formatTimestampToDuration } from '../../../../common';
 import { i18n } from '@kbn/i18n';
 import { APM_SYSTEM_ID } from '../../../../common/constants';
 import { ListingCallOut } from '../../setup_mode/listing_callout';
 import { SetupModeBadge } from '../../setup_mode/badge';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 function getColumns(setupMode) {
   return [
@@ -133,6 +141,14 @@ export function ApmServerInstances({ apms, setupMode }) {
   return (
     <EuiPage>
       <EuiPageBody>
+        <EuiScreenReaderOnly>
+          <h1>
+            <FormattedMessage
+              id="xpack.monitoring.apm.instances.heading"
+              defaultMessage="APM Instances"
+            />
+          </h1>
+        </EuiScreenReaderOnly>
         <EuiPageContent>
           <Status stats={data.stats} />
           <EuiSpacer size="m" />

x-pack/legacy/plugins/monitoring/public/components/apm/overview/index.js

@@ -14,8 +14,10 @@ import {
   EuiPageBody,
   EuiPanel,
   EuiPageContent,
+  EuiScreenReaderOnly,
 } from '@elastic/eui';
 import { Status } from '../instances/status';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 export function ApmOverview({ stats, metrics, ...props }) {
   const seriesToShow = [
@@ -45,6 +47,14 @@ export function ApmOverview({ stats, metrics, ...props }) {
   return (
     <EuiPage>
       <EuiPageBody>
+        <EuiScreenReaderOnly>
+          <h1>
+            <FormattedMessage
+              id="xpack.monitoring.apm.overview.heading"
+              defaultMessage="APM Overview"
+            />
+          </h1>
+        </EuiScreenReaderOnly>
         <EuiPageContent>
           <Status stats={stats} />
           <EuiSpacer size="s" />

x-pack/legacy/plugins/monitoring/public/components/beats/beat/beat.js

@@ -15,9 +15,11 @@ import {
   EuiSpacer,
   EuiPageContent,
   EuiPanel,
+  EuiScreenReaderOnly,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { SummaryStatus } from '../../summary_status';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 export function Beat({ summary, metrics, ...props }) {
   const metricsToShow = [
@@ -137,6 +139,11 @@ export function Beat({ summary, metrics, ...props }) {
         </EuiPanel>
         <EuiSpacer size="m" />
         <EuiPageContent>
+          <EuiScreenReaderOnly>
+            <h1>
+              <FormattedMessage id="xpack.monitoring.beats.beat.heading" defaultMessage="Beat" />
+            </h1>
+          </EuiScreenReaderOnly>
           <EuiFlexGrid columns={2} gutterSize="s">
             {metricsToShow.map((metric, index) => (
               <EuiFlexItem key={index}>

x-pack/legacy/plugins/monitoring/public/components/beats/listing/listing.js

@@ -6,14 +6,22 @@
 
 import React, { PureComponent } from 'react';
 import { uniq, get } from 'lodash';
-import { EuiPage, EuiPageBody, EuiPageContent, EuiSpacer, EuiLink } from '@elastic/eui';
+import {
+  EuiPage,
+  EuiPageBody,
+  EuiPageContent,
+  EuiSpacer,
+  EuiLink,
+  EuiScreenReaderOnly,
+} from '@elastic/eui';
 import { Stats } from 'plugins/monitoring/components/beats';
 import { formatMetric } from 'plugins/monitoring/lib/format_number';
 import { EuiMonitoringTable } from 'plugins/monitoring/components/table';
 import { i18n } from '@kbn/i18n';
 import { BEATS_SYSTEM_ID } from '../../../../common/constants';
 import { ListingCallOut } from '../../setup_mode/listing_callout';
 import { SetupModeBadge } from '../../setup_mode/badge';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 export class Listing extends PureComponent {
   getColumns() {
@@ -139,6 +147,14 @@ export class Listing extends PureComponent {
     return (
       <EuiPage>
         <EuiPageBody>
+          <EuiScreenReaderOnly>
+            <h1>
+              <FormattedMessage
+                id="xpack.monitoring.beats.listing.heading"
+                defaultMessage="Beats listing"
+              />
+            </h1>
+          </EuiScreenReaderOnly>
           <EuiPageContent>
             <Stats stats={stats} />
             <EuiSpacer size="m" />

x-pack/legacy/plugins/monitoring/public/components/beats/overview/overview.js

@@ -20,6 +20,7 @@ import {
   EuiPageBody,
   EuiPanel,
   EuiPageContent,
+  EuiScreenReaderOnly,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
@@ -31,12 +32,12 @@ function renderLatestActive(latestActive, latestTypes, latestVersions) {
         <EuiFlexItem>
           <EuiPanel>
             <EuiTitle size="s">
-              <h3>
+              <h2>
                 <FormattedMessage
                   id="xpack.monitoring.beats.overview.activeBeatsInLastDayTitle"
                   defaultMessage="Active Beats in Last Day"
                 />
-              </h3>
+              </h2>
             </EuiTitle>
             <EuiSpacer size="s" />
             <LatestActive latestActive={latestActive} />
@@ -45,12 +46,12 @@ function renderLatestActive(latestActive, latestTypes, latestVersions) {
         <EuiFlexItem>
           <EuiPanel>
             <EuiTitle size="s">
-              <h3>
+              <h2>
                 <FormattedMessage
                   id="xpack.monitoring.beats.overview.top5BeatTypesInLastDayTitle"
                   defaultMessage="Top 5 Beat Types in Last Day"
                 />
-              </h3>
+              </h2>
             </EuiTitle>
             <EuiSpacer size="s" />
             <LatestTypes latestTypes={latestTypes} />
@@ -59,12 +60,12 @@ function renderLatestActive(latestActive, latestTypes, latestVersions) {
         <EuiFlexItem>
           <EuiPanel>
             <EuiTitle size="s">
-              <h3>
+              <h2>
                 <FormattedMessage
                   id="xpack.monitoring.beats.overview.top5VersionsInLastDayTitle"
                   defaultMessage="Top 5 Versions in Last Day"
                 />
-              </h3>
+              </h2>
             </EuiTitle>
             <EuiSpacer size="s" />
             <LatestVersions latestVersions={latestVersions} />
@@ -109,6 +110,14 @@ export function BeatsOverview({
   return (
     <EuiPage>
       <EuiPageBody>
+        <EuiScreenReaderOnly>
+          <h1>
+            <FormattedMessage
+              id="xpack.monitoring.beats.overview.heading"
+              defaultMessage="Beats Overview"
+            />
+          </h1>
+        </EuiScreenReaderOnly>
         <EuiPageContent>
           <Stats stats={stats} />
           {renderLatestActive(latestActive, latestTypes, latestVersions)}

x-pack/legacy/plugins/monitoring/public/components/cluster/overview/alerts_panel.js

@@ -91,12 +91,12 @@ export function AlertsPanel({ alerts, changeUrl }) {
       <EuiFlexGroup justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
           <EuiTitle size="s">
-            <h4>
+            <h2>
               <FormattedMessage
                 id="xpack.monitoring.cluster.overview.alertsPanel.topClusterTitle"
                 defaultMessage="Top cluster alerts"
               />
-            </h4>
+            </h2>
           </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>

x-pack/legacy/plugins/monitoring/public/components/cluster/overview/index.js

@@ -11,16 +11,25 @@ import { LogstashPanel } from './logstash_panel';
 import { AlertsPanel } from './alerts_panel';
 import { BeatsPanel } from './beats_panel';
 
-import { EuiPage, EuiPageBody } from '@elastic/eui';
+import { EuiPage, EuiPageBody, EuiScreenReaderOnly } from '@elastic/eui';
 import { ApmPanel } from './apm_panel';
 import { STANDALONE_CLUSTER_CLUSTER_UUID } from '../../../../common/constants';
+import { FormattedMessage } from '@kbn/i18n/react';
 
 export function Overview(props) {
   const isFromStandaloneCluster = props.cluster.cluster_uuid === STANDALONE_CLUSTER_CLUSTER_UUID;
 
   return (
     <EuiPage>
       <EuiPageBody>
+        <EuiScreenReaderOnly>
+          <h1>
+            <FormattedMessage
+              id="xpack.monitoring.overview.heading"
+              defaultMessage="Stack Monitoring Overview"
+            />
+          </h1>
+        </EuiScreenReaderOnly>
         <AlertsPanel alerts={props.cluster.alerts} changeUrl={props.changeUrl} />
 
         {!isFromStandaloneCluster ? (

x-pack/legacy/plugins/monitoring/public/components/elasticsearch/ccr/ccr.js

@@ -15,6 +15,7 @@ import {
   EuiIcon,
   EuiIconTip,
   EuiTextColor,
+  EuiScreenReaderOnly,
 } from '@elastic/eui';
 
 import './ccr.css';
@@ -270,6 +271,14 @@ export class Ccr extends Component {
     return (
       <EuiPage>
         <EuiPageBody>
+          <EuiScreenReaderOnly>
+            <h1>
+              <FormattedMessage
+                id="xpack.monitoring.elasticsearch.ccr.heading"
+                defaultMessage="CCR"
+              />
+            </h1>
+          </EuiScreenReaderOnly>
           <EuiPageContent>
             <EuiPageContentBody>{this.renderTable()}</EuiPageContentBody>
           </EuiPageContent>