More a11y fixes for headings in stack monitoring

elastic · Dec 13, 2019 · 13479ca · 13479ca
1 parent fe0ab27
commit 13479ca
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 9 deletions.
diff --git a/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/alerts_panel.js b/x-pack/legacy/plugins/monitoring/public/components/cluster/overview/alerts_panel.js
@@ -85,12 +85,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}>

diff --git a/...monitoring/public/components/elasticsearch/ccr_shard/__snapshots__/ccr_shard.test.js.snap b/...monitoring/public/components/elasticsearch/ccr_shard/__snapshots__/ccr_shard.test.js.snap
diff --git a/x-pack/legacy/plugins/monitoring/public/components/elasticsearch/ccr_shard/ccr_shard.js b/x-pack/legacy/plugins/monitoring/public/components/elasticsearch/ccr_shard/ccr_shard.js
@@ -113,7 +113,7 @@ export class CcrShard extends PureComponent {
       >
         <Fragment>
           <EuiTitle size="s">
-            <h4>{formatDateTimeLocal(timestamp)}</h4>
+            <h2>{formatDateTimeLocal(timestamp)}</h2>
           </EuiTitle>
           <EuiHorizontalRule/>
           <EuiCodeBlock language="json">

diff --git a/x-pack/legacy/plugins/monitoring/public/components/license/index.js b/x-pack/legacy/plugins/monitoring/public/components/license/index.js
@@ -14,7 +14,8 @@ import {
   EuiText,
   EuiLink,
   EuiFlexGroup,
-  EuiFlexItem
+  EuiFlexItem,
+  EuiScreenReaderOnly,
 } from '@elastic/eui';
 import { LicenseStatus, AddLicense } from 'plugins/xpack_main/components';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -61,6 +62,14 @@ export function License(props) {
   const { status, type, isExpired, expiryDate } = props;
   return (
     <EuiPage>
+      <EuiScreenReaderOnly>
+        <h1>
+          <FormattedMessage
+            id="xpack.monitoring.license.heading"
+            defaultMessage="License"
+          />
+        </h1>
+      </EuiScreenReaderOnly>
       <EuiPageBody>
         <LicenseStatus
           isExpired={isExpired}

diff --git a/...logstash/pipeline_viewer/views/__test__/__snapshots__/statement_list_heading.test.js.snap b/...logstash/pipeline_viewer/views/__test__/__snapshots__/statement_list_heading.test.js.snap
diff --git a/x-pack/legacy/plugins/monitoring/public/components/no_data/no_data.js b/x-pack/legacy/plugins/monitoring/public/components/no_data/no_data.js
@@ -19,7 +19,8 @@ import {
   EuiText,
   EuiTitle,
   EuiTextColor,
-  EuiButtonEmpty
+  EuiButtonEmpty,
+  EuiScreenReaderOnly,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { toggleSetupMode } from '../../lib/setup_mode';
@@ -54,6 +55,14 @@ export function NoData(props) {
   if (useInternalCollection) {
     return (
       <EuiPage>
+        <EuiScreenReaderOnly>
+          <h1>
+            <FormattedMessage
+              id="xpack.monitoring.no_data.internal_collection.heading"
+              defaultMessage="No monitoring data found. (Internal collection)"
+            />
+          </h1>
+        </EuiScreenReaderOnly>
         <EuiPageBody restrictWidth={600}>
           <EuiPageContent
             verticalPosition="center"
@@ -85,6 +94,14 @@ export function NoData(props) {
 
   return (
     <EuiPage>
+      <EuiScreenReaderOnly>
+        <h1>
+          <FormattedMessage
+            id="xpack.monitoring.no_data.heading"
+            defaultMessage="No monitoring data found."
+          />
+        </h1>
+      </EuiScreenReaderOnly>
       <EuiPageBody restrictWidth={600}>
         <EuiPageContent
           verticalPosition="center"