From 46073cbff24bc16135be1d6087c36f4cd4704e98 Mon Sep 17 00:00:00 2001
From: Alison Goryachev <alison.goryachev@elastic.co>
Date: Thu, 24 Oct 2019 12:15:51 -0400
Subject: [PATCH] [a11y] fix page heading structure in management apps (#48936)
 (#49196)

---
 .../application/containers/main/main.tsx      | 10 +++++++-
 .../components/cold_phase/cold_phase.js       |  8 +++----
 .../components/delete_phase/delete_phase.js   |  4 ++--
 .../components/hot_phase/hot_phase.js         |  4 ++--
 .../components/set_priority_input.js          |  4 ++--
 .../components/warm_phase/warm_phase.js       | 12 +++++-----
 .../sections/edit_policy/edit_policy.js       |  6 ++---
 .../template_form/steps/step_aliases.tsx      |  4 ++--
 .../template_form/steps/step_logistics.tsx    |  6 ++---
 .../template_form/steps/step_mappings.tsx     |  4 ++--
 .../template_form/steps/step_review.tsx       |  4 ++--
 .../template_form/steps/step_settings.tsx     |  4 ++--
 .../__snapshots__/license_status.test.js.snap |  4 ++--
 .../license_status/license_status.js          |  2 +-
 .../sections/job_create/job_create.js         |  2 +-
 .../job_create/steps/step_date_histogram.js   |  4 ++--
 .../job_create/steps/step_histogram.js        |  8 +++----
 .../job_create/steps/step_logistics.js        | 24 +++++++++----------
 .../sections/job_create/steps/step_metrics.js |  4 ++--
 .../sections/job_create/steps/step_review.js  |  4 ++--
 .../sections/job_create/steps/step_terms.js   |  4 ++--
 .../policy_form/steps/step_logistics.tsx      |  4 ++--
 .../policy_form/steps/step_retention.tsx      |  4 ++--
 .../policy_form/steps/step_review.tsx         |  4 ++--
 .../policy_form/steps/step_settings.tsx       |  4 ++--
 .../components/repository_form/step_one.tsx   | 12 +++++-----
 .../steps/step_logistics.tsx                  |  4 ++--
 .../steps/step_review.tsx                     |  4 ++--
 .../steps/step_settings.tsx                   |  4 ++--
 .../json_watch_edit_simulate.tsx              | 16 ++++++-------
 .../threshold_watch_action_panel.tsx          |  4 ++--
 .../threshold_watch_edit.tsx                  |  4 ++--
 32 files changed, 99 insertions(+), 91 deletions(-)

diff --git a/src/legacy/core_plugins/console/np_ready/public/application/containers/main/main.tsx b/src/legacy/core_plugins/console/np_ready/public/application/containers/main/main.tsx
index 82256cf739882..4e5afbdb5821e 100644
--- a/src/legacy/core_plugins/console/np_ready/public/application/containers/main/main.tsx
+++ b/src/legacy/core_plugins/console/np_ready/public/application/containers/main/main.tsx
@@ -19,7 +19,8 @@
 
 import React, { useCallback, useState } from 'react';
 import { debounce } from 'lodash';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
 
 import { EditorOutput, Editor, ConsoleHistory } from '../editor';
 import { Settings } from '../settings';
@@ -77,6 +78,13 @@ export function Main() {
         responsive={false}
       >
         <EuiFlexItem grow={false}>
+          <EuiTitle className="euiScreenReaderOnly">
+            <h1>
+              {i18n.translate('console.pageHeading', {
+                defaultMessage: 'Console',
+              })}
+            </h1>
+          </EuiTitle>
           <TopNavMenu
             items={getTopNavConfig({
               onClickHistory: () => setShowHistory(!showingHistory),
diff --git a/x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/components/cold_phase/cold_phase.js b/x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/components/cold_phase/cold_phase.js
index 493da3e19b9f3..91fbb4f63cbc3 100644
--- a/x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/components/cold_phase/cold_phase.js
+++ b/x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/components/cold_phase/cold_phase.js
@@ -58,12 +58,12 @@ export class ColdPhase extends PureComponent {
         <EuiDescribedFormGroup
           title={
             <div>
-              <span className="eui-displayInlineBlock eui-alignMiddle">
+              <h2 className="eui-displayInlineBlock eui-alignMiddle">
                 <FormattedMessage
                   id="xpack.indexLifecycleMgmt.editPolicy.coldPhase.coldPhaseLabel"
                   defaultMessage="Cold phase"
                 />
-              </span>{' '}
+              </h2>{' '}
               {phaseData[PHASE_ENABLED] && !isShowingErrors ? <ActiveBadge /> : null}
               <PhaseErrorMessage isShowingErrors={isShowingErrors} />
             </div>
@@ -162,12 +162,12 @@ export class ColdPhase extends PureComponent {
           <Fragment>
             <EuiDescribedFormGroup
               title={
-                <p>
+                <h3>
                   <FormattedMessage
                     id="xpack.indexLifecycleMgmt.editPolicy.coldPhase.freezeText"
                     defaultMessage="Freeze"
                   />
-                </p>
+                </h3>
               }
               description={
                 <EuiTextColor color="subdued">
diff --git a/x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/components/delete_phase/delete_phase.js b/x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/components/delete_phase/delete_phase.js
index 0e7663a6aef7d..d5eb76889494c 100644
--- a/x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/components/delete_phase/delete_phase.js
+++ b/x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/components/delete_phase/delete_phase.js
@@ -43,12 +43,12 @@ export class DeletePhase extends PureComponent {
         <EuiDescribedFormGroup
           title={
             <div>
-              <span className="eui-displayInlineBlock eui-alignMiddle">
+              <h2 className="eui-displayInlineBlock eui-alignMiddle">
                 <FormattedMessage
                   id="xpack.indexLifecycleMgmt.editPolicy.deletePhase.deletePhaseLabel"
                   defaultMessage="Delete phase"
                 />
-              </span>{' '}
+              </h2>{' '}
               {phaseData[PHASE_ENABLED] && !isShowingErrors ? (
                 <ActiveBadge />
               ) : null}
diff --git a/x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/components/hot_phase/hot_phase.js b/x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/components/hot_phase/hot_phase.js
index 69370ab2d0a38..e7ac890a20ebc 100644
--- a/x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/components/hot_phase/hot_phase.js
+++ b/x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/components/hot_phase/hot_phase.js
@@ -54,12 +54,12 @@ export class HotPhase extends PureComponent {
         <EuiDescribedFormGroup
           title={
             <div>
-              <span className="eui-displayInlineBlock eui-alignMiddle">
+              <h2 className="eui-displayInlineBlock eui-alignMiddle">
                 <FormattedMessage
                   id="xpack.indexLifecycleMgmt.editPolicy.hotPhase.hotPhaseLabel"
                   defaultMessage="Hot phase"
                 />
-              </span>{' '}
+              </h2>{' '}
               {isShowingErrors ? null : <ActiveBadge />}
               <PhaseErrorMessage isShowingErrors={isShowingErrors} />
             </div>
diff --git a/x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/components/set_priority_input.js b/x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/components/set_priority_input.js
index 3f4c32b05a2dc..c2c2b002a7693 100644
--- a/x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/components/set_priority_input.js
+++ b/x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/components/set_priority_input.js
@@ -21,12 +21,12 @@ export const SetPriorityInput = props => {
   return (
     <EuiDescribedFormGroup
       title={
-        <p>
+        <h3>
           <FormattedMessage
             id="xpack.indexLifecycleMgmt.editPolicy.indexPriorityText"
             defaultMessage="Index priority"
           />
-        </p>
+        </h3>
       }
       description={
         <EuiTextColor color="subdued">
diff --git a/x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/components/warm_phase/warm_phase.js b/x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/components/warm_phase/warm_phase.js
index 2f88578e128ef..77afd4f7051dc 100644
--- a/x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/components/warm_phase/warm_phase.js
+++ b/x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/components/warm_phase/warm_phase.js
@@ -77,12 +77,12 @@ export class WarmPhase extends PureComponent {
         <EuiDescribedFormGroup
           title={
             <div>
-              <span className="eui-displayInlineBlock eui-alignMiddle">
+              <h2 className="eui-displayInlineBlock eui-alignMiddle">
                 <FormattedMessage
                   id="xpack.indexLifecycleMgmt.editPolicy.warmPhase.warmPhaseLabel"
                   defaultMessage="Warm phase"
                 />
-              </span>{' '}
+              </h2>{' '}
               {phaseData[PHASE_ENABLED] && !isShowingErrors ? <ActiveBadge /> : null}
               <PhaseErrorMessage isShowingErrors={isShowingErrors} />
             </div>
@@ -202,12 +202,12 @@ export class WarmPhase extends PureComponent {
           <Fragment>
             <EuiDescribedFormGroup
               title={
-                <p>
+                <h3>
                   <FormattedMessage
                     id="xpack.indexLifecycleMgmt.editPolicy.warmPhase.shrinkText"
                     defaultMessage="Shrink"
                   />
-                </p>
+                </h3>
               }
               description={
                 <EuiTextColor color="subdued">
@@ -270,12 +270,12 @@ export class WarmPhase extends PureComponent {
             </EuiDescribedFormGroup>
             <EuiDescribedFormGroup
               title={
-                <p>
+                <h3>
                   <FormattedMessage
                     id="xpack.indexLifecycleMgmt.editPolicy.warmPhase.forceMergeDataText"
                     defaultMessage="Force merge"
                   />
-                </p>
+                </h3>
               }
               description={
                 <EuiTextColor color="subdued">
diff --git a/x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/edit_policy.js b/x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/edit_policy.js
index 2b07e9615030f..ef9b6de84f1e4 100644
--- a/x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/edit_policy.js
+++ b/x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/edit_policy.js
@@ -157,8 +157,8 @@ export class EditPolicy extends Component {
             verticalPosition="center"
             horizontalPosition="center"
           >
-            <EuiTitle>
-              <h4>
+            <EuiTitle size="l">
+              <h1>
                 {isNewPolicy
                   ? i18n.translate('xpack.indexLifecycleMgmt.editPolicy.createPolicyMessage', {
                     defaultMessage: 'Create an index lifecycle policy'
@@ -167,7 +167,7 @@ export class EditPolicy extends Component {
                     defaultMessage: 'Edit index lifecycle policy {originalPolicyName}',
                     values: { originalPolicyName }
                   })}
-              </h4>
+              </h1>
             </EuiTitle>
 
             <div className="euiAnimateContentLoad">
diff --git a/x-pack/legacy/plugins/index_management/public/components/template_form/steps/step_aliases.tsx b/x-pack/legacy/plugins/index_management/public/components/template_form/steps/step_aliases.tsx
index 6c7a5a0ce922c..96abbae93d0f4 100644
--- a/x-pack/legacy/plugins/index_management/public/components/template_form/steps/step_aliases.tsx
+++ b/x-pack/legacy/plugins/index_management/public/components/template_form/steps/step_aliases.tsx
@@ -39,12 +39,12 @@ export const StepAliases: React.FunctionComponent<StepProps> = ({
       <EuiFlexGroup justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
           <EuiTitle>
-            <h3 data-test-subj="stepTitle">
+            <h2 data-test-subj="stepTitle">
               <FormattedMessage
                 id="xpack.idxMgmt.templateForm.stepAliases.stepTitle"
                 defaultMessage="Aliases (optional)"
               />
-            </h3>
+            </h2>
           </EuiTitle>
 
           <EuiSpacer size="s" />
diff --git a/x-pack/legacy/plugins/index_management/public/components/template_form/steps/step_logistics.tsx b/x-pack/legacy/plugins/index_management/public/components/template_form/steps/step_logistics.tsx
index 1b20da3a0ee4c..86ef102dcec44 100644
--- a/x-pack/legacy/plugins/index_management/public/components/template_form/steps/step_logistics.tsx
+++ b/x-pack/legacy/plugins/index_management/public/components/template_form/steps/step_logistics.tsx
@@ -22,7 +22,7 @@ import { schemas } from '../template_form_schemas';
 
 // Create or Form components with partial props that are common to all instances
 const UseField = getUseField({ component: Field });
-const FormRow = getFormRow({ titleTag: 'h4' });
+const FormRow = getFormRow({ titleTag: 'h3' });
 
 const fieldsMeta = {
   name: {
@@ -97,12 +97,12 @@ export const StepLogistics: React.FunctionComponent<StepProps> = ({
       <EuiFlexGroup justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
           <EuiTitle>
-            <h3>
+            <h2>
               <FormattedMessage
                 id="xpack.idxMgmt.templateForm.stepLogistics.stepTitle"
                 defaultMessage="Logistics"
               />
-            </h3>
+            </h2>
           </EuiTitle>
         </EuiFlexItem>
 
diff --git a/x-pack/legacy/plugins/index_management/public/components/template_form/steps/step_mappings.tsx b/x-pack/legacy/plugins/index_management/public/components/template_form/steps/step_mappings.tsx
index 17d4a06418a70..74cb09b1c8e69 100644
--- a/x-pack/legacy/plugins/index_management/public/components/template_form/steps/step_mappings.tsx
+++ b/x-pack/legacy/plugins/index_management/public/components/template_form/steps/step_mappings.tsx
@@ -39,12 +39,12 @@ export const StepMappings: React.FunctionComponent<StepProps> = ({
       <EuiFlexGroup justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
           <EuiTitle>
-            <h3 data-test-subj="stepTitle">
+            <h2 data-test-subj="stepTitle">
               <FormattedMessage
                 id="xpack.idxMgmt.templateForm.stepMappings.stepTitle"
                 defaultMessage="Mappings (optional)"
               />
-            </h3>
+            </h2>
           </EuiTitle>
 
           <EuiSpacer size="s" />
diff --git a/x-pack/legacy/plugins/index_management/public/components/template_form/steps/step_review.tsx b/x-pack/legacy/plugins/index_management/public/components/template_form/steps/step_review.tsx
index a639785c3837c..2c7fe939cc759 100644
--- a/x-pack/legacy/plugins/index_management/public/components/template_form/steps/step_review.tsx
+++ b/x-pack/legacy/plugins/index_management/public/components/template_form/steps/step_review.tsx
@@ -188,13 +188,13 @@ export const StepReview: React.FunctionComponent<StepProps> = ({ template, updat
   return (
     <div data-test-subj="stepSummary">
       <EuiTitle>
-        <h3 data-test-subj="stepTitle">
+        <h2 data-test-subj="stepTitle">
           <FormattedMessage
             id="xpack.idxMgmt.templateForm.stepReview.stepTitle"
             defaultMessage="Review details for '{templateName}'"
             values={{ templateName: name }}
           />
-        </h3>
+        </h2>
       </EuiTitle>
 
       <EuiSpacer size="l" />
diff --git a/x-pack/legacy/plugins/index_management/public/components/template_form/steps/step_settings.tsx b/x-pack/legacy/plugins/index_management/public/components/template_form/steps/step_settings.tsx
index 850f312f0d1c6..9509ca38003ba 100644
--- a/x-pack/legacy/plugins/index_management/public/components/template_form/steps/step_settings.tsx
+++ b/x-pack/legacy/plugins/index_management/public/components/template_form/steps/step_settings.tsx
@@ -39,12 +39,12 @@ export const StepSettings: React.FunctionComponent<StepProps> = ({
       <EuiFlexGroup justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
           <EuiTitle>
-            <h3 data-test-subj="stepTitle">
+            <h2 data-test-subj="stepTitle">
               <FormattedMessage
                 id="xpack.idxMgmt.templateForm.stepSettings.stepTitle"
                 defaultMessage="Index settings (optional)"
               />
-            </h3>
+            </h2>
           </EuiTitle>
 
           <EuiSpacer size="s" />
diff --git a/x-pack/legacy/plugins/license_management/__jest__/__snapshots__/license_status.test.js.snap b/x-pack/legacy/plugins/license_management/__jest__/__snapshots__/license_status.test.js.snap
index ee9abb1d1f125..b0bd05349a50c 100644
--- a/x-pack/legacy/plugins/license_management/__jest__/__snapshots__/license_status.test.js.snap
+++ b/x-pack/legacy/plugins/license_management/__jest__/__snapshots__/license_status.test.js.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`LicenseStatus component should display display warning is expired 1`] = `"<div class=\\"euiTextAlign euiTextAlign--center\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon--danger euiIcon-isLoading\\" focusable=\\"false\\"></svg></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><h2 data-test-subj=\\"licenseText\\" class=\\"euiTitle euiTitle--medium\\">Your Platinum license has expired</h2></div></div><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiText euiText--medium\\" data-test-subj=\\"licenseSubText\\">Your license expired on <strong></strong></div></div>"`;
+exports[`LicenseStatus component should display display warning is expired 1`] = `"<div class=\\"euiTextAlign euiTextAlign--center\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--medium euiIcon--danger euiIcon-isLoading\\" focusable=\\"false\\"></svg></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><h1 data-test-subj=\\"licenseText\\" class=\\"euiTitle euiTitle--medium\\">Your Platinum license has expired</h1></div></div><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiText euiText--medium\\" data-test-subj=\\"licenseSubText\\">Your license expired on <strong></strong></div></div>"`;
 
-exports[`LicenseStatus component should display normally when license is active 1`] = `"<div class=\\"euiTextAlign euiTextAlign--center\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--large euiIcon--success euiIcon-isLoading\\" focusable=\\"false\\"></svg></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><h2 data-test-subj=\\"licenseText\\" class=\\"euiTitle euiTitle--medium\\">Your Gold license is active</h2></div></div><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiText euiText--medium\\" data-test-subj=\\"licenseSubText\\">Your license will expire on <strong>October 12, 2099 7:00 PM EST</strong></div></div>"`;
+exports[`LicenseStatus component should display normally when license is active 1`] = `"<div class=\\"euiTextAlign euiTextAlign--center\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"euiIcon euiIcon--large euiIcon--success euiIcon-isLoading\\" focusable=\\"false\\"></svg></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><h1 data-test-subj=\\"licenseText\\" class=\\"euiTitle euiTitle--medium\\">Your Gold license is active</h1></div></div><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiText euiText--medium\\" data-test-subj=\\"licenseSubText\\">Your license will expire on <strong>October 12, 2099 7:00 PM EST</strong></div></div>"`;
diff --git a/x-pack/legacy/plugins/license_management/public/sections/license_dashboard/license_status/license_status.js b/x-pack/legacy/plugins/license_management/public/sections/license_dashboard/license_status/license_status.js
index 9f6d1226e4dbf..0b7867ba45e2a 100644
--- a/x-pack/legacy/plugins/license_management/public/sections/license_dashboard/license_status/license_status.js
+++ b/x-pack/legacy/plugins/license_management/public/sections/license_dashboard/license_status/license_status.js
@@ -87,7 +87,7 @@ export class LicenseStatus extends React.PureComponent {
           <EuiFlexItem grow={false}>{icon}</EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiTitle size="m">
-              <h2 data-test-subj="licenseText">{title}</h2>
+              <h1 data-test-subj="licenseText">{title}</h1>
             </EuiTitle>
           </EuiFlexItem>
         </EuiFlexGroup>
diff --git a/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/job_create.js b/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/job_create.js
index 41158167c5469..e25c91b7e40c9 100644
--- a/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/job_create.js
+++ b/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/job_create.js
@@ -549,7 +549,7 @@ export class JobCreateUi extends Component {
       <Fragment>
         <EuiPageContent>
           <EuiPageContentHeader>
-            <EuiTitle size="m">
+            <EuiTitle size="l">
               <h1>
                 <FormattedMessage
                   id="xpack.rollupJobs.createTitle"
diff --git a/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_date_histogram.js b/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_date_histogram.js
index c9959b5f64319..b3b52bbaf77e0 100644
--- a/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_date_histogram.js
+++ b/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_date_histogram.js
@@ -195,12 +195,12 @@ export class StepDateHistogramUi extends Component {
         <EuiFlexGroup justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
             <EuiTitle data-test-subj="rollupJobCreateDateHistogramTitle">
-              <h3>
+              <h2>
                 <FormattedMessage
                   id="xpack.rollupJobs.create.stepDateHistogramTitle"
                   defaultMessage="Date histogram"
                 />
-              </h3>
+              </h2>
             </EuiTitle>
           </EuiFlexItem>
 
diff --git a/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_histogram.js b/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_histogram.js
index 991280b4e10de..38aac71c86a23 100644
--- a/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_histogram.js
+++ b/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_histogram.js
@@ -82,12 +82,12 @@ export class StepHistogramUi extends Component {
         <EuiFlexGroup justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
             <EuiTitle data-test-subj="rollupJobCreateHistogramTitle">
-              <h3>
+              <h2>
                 <FormattedMessage
                   id="xpack.rollupJobs.create.stepHistogramTitle"
                   defaultMessage="Histogram (optional)"
                 />
-              </h3>
+              </h2>
             </EuiTitle>
 
             <EuiSpacer size="s" />
@@ -179,12 +179,12 @@ export class StepHistogramUi extends Component {
         <EuiDescribedFormGroup
           title={(
             <EuiTitle size="s">
-              <h4>
+              <h3>
                 <FormattedMessage
                   id="xpack.rollupJobs.create.stepHistogram.sectionHistogramIntervalTitle"
                   defaultMessage="Histogram interval"
                 />
-              </h4>
+              </h3>
             </EuiTitle>
           )}
           description={(
diff --git a/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_logistics.js b/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_logistics.js
index c3cf39bec5fad..75c70ab6ce20a 100644
--- a/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_logistics.js
+++ b/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_logistics.js
@@ -233,12 +233,12 @@ export class StepLogisticsUi extends Component {
         <EuiFlexGroup justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
             <EuiTitle data-test-subj="rollupJobCreateLogisticsTitle">
-              <h3>
+              <h2>
                 <FormattedMessage
                   id="xpack.rollupJobs.create.stepLogisticsTitle"
                   defaultMessage="Logistics"
                 />
-              </h3>
+              </h2>
             </EuiTitle>
 
             <EuiSpacer size="s" />
@@ -276,12 +276,12 @@ export class StepLogisticsUi extends Component {
           <EuiDescribedFormGroup
             title={
               <EuiTitle size="s">
-                <h4>
+                <h3>
                   <FormattedMessage
                     id="xpack.rollupJobs.create.stepLogistics.sectionIdTitle"
                     defaultMessage="Name"
                   />
-                </h4>
+                </h3>
               </EuiTitle>
             }
             description={
@@ -316,12 +316,12 @@ export class StepLogisticsUi extends Component {
           <EuiDescribedFormGroup
             title={
               <EuiTitle size="s">
-                <h4>
+                <h3>
                   <FormattedMessage
                     id="xpack.rollupJobs.create.stepLogistics.sectionDataFlowTitle"
                     defaultMessage="Data flow"
                   />
-                </h4>
+                </h3>
               </EuiTitle>
             }
             description={
@@ -393,12 +393,12 @@ export class StepLogisticsUi extends Component {
           <EuiDescribedFormGroup
             title={
               <EuiTitle size="s">
-                <h4>
+                <h3>
                   <FormattedMessage
                     id="xpack.rollupJobs.create.stepLogistics.sectionScheduleTitle"
                     defaultMessage="Schedule"
                   />
-                </h4>
+                </h3>
               </EuiTitle>
             }
             description={
@@ -415,12 +415,12 @@ export class StepLogisticsUi extends Component {
           <EuiDescribedFormGroup
             title={
               <EuiTitle size="xs">
-                <h5>
+                <h4>
                   <FormattedMessage
                     id="xpack.rollupJobs.create.stepLogistics.sectionPageSizeTitle"
                     defaultMessage="How many documents do you want to roll up at a time?"
                   />
-                </h5>
+                </h4>
               </EuiTitle>
             }
             description={
@@ -456,12 +456,12 @@ export class StepLogisticsUi extends Component {
           <EuiDescribedFormGroup
             title={
               <EuiTitle size="xs">
-                <h5>
+                <h4>
                   <FormattedMessage
                     id="xpack.rollupJobs.create.stepLogistics.sectionDelayTitle"
                     defaultMessage="How long should the rollup job wait before rolling up new data?"
                   />
-                </h5>
+                </h4>
               </EuiTitle>
             }
             description={
diff --git a/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_metrics.js b/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_metrics.js
index 7fd4052bd45f1..1ccdcceabe47a 100644
--- a/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_metrics.js
+++ b/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_metrics.js
@@ -358,12 +358,12 @@ export class StepMetricsUi extends Component {
         <EuiFlexGroup justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
             <EuiTitle data-test-subj="rollupJobCreateMetricsTitle">
-              <h3>
+              <h2>
                 <FormattedMessage
                   id="xpack.rollupJobs.create.stepMetricsTitle"
                   defaultMessage="Metrics (optional)"
                 />
-              </h3>
+              </h2>
             </EuiTitle>
 
             <EuiSpacer size="s"/>
diff --git a/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_review.js b/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_review.js
index 213a1938432fc..1f3172d8ee848 100644
--- a/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_review.js
+++ b/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_review.js
@@ -104,13 +104,13 @@ export class StepReviewUi extends Component {
     return (
       <Fragment>
         <EuiTitle data-test-subj="rollupJobCreateReviewTitle">
-          <h3>
+          <h2>
             <FormattedMessage
               id="xpack.rollupJobs.create.stepReviewTitle"
               defaultMessage="Review details for '{jobId}'"
               values={{ jobId: job.id }}
             />
-          </h3>
+          </h2>
         </EuiTitle>
 
         {this.renderTabs()}
diff --git a/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_terms.js b/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_terms.js
index d4a07dd312483..6ea8607aa9632 100644
--- a/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_terms.js
+++ b/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_terms.js
@@ -81,12 +81,12 @@ export class StepTermsUi extends Component {
         <EuiFlexGroup justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
             <EuiTitle data-test-subj="rollupJobCreateTermsTitle">
-              <h3>
+              <h2>
                 <FormattedMessage
                   id="xpack.rollupJobs.create.stepTermsTitle"
                   defaultMessage="Terms (optional)"
                 />
-              </h3>
+              </h2>
             </EuiTitle>
 
             <EuiSpacer size="s" />
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_logistics.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_logistics.tsx
index 80240ae0e7718..7c3036b3d79c2 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_logistics.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_logistics.tsx
@@ -476,12 +476,12 @@ export const PolicyStepLogistics: React.FunctionComponent<StepProps> = ({
       <EuiFlexGroup justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
           <EuiTitle>
-            <h3>
+            <h2>
               <FormattedMessage
                 id="xpack.snapshotRestore.policyForm.stepLogisticsTitle"
                 defaultMessage="Logistics"
               />
-            </h3>
+            </h2>
           </EuiTitle>
         </EuiFlexItem>
 
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_retention.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_retention.tsx
index 3944cd52c7ee2..c88cbd2736df6 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_retention.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_retention.tsx
@@ -206,12 +206,12 @@ export const PolicyStepRetention: React.FunctionComponent<StepProps> = ({
       <EuiFlexGroup justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
           <EuiTitle>
-            <h3>
+            <h2>
               <FormattedMessage
                 id="xpack.snapshotRestore.policyForm.stepRetentionTitle"
                 defaultMessage="Snapshot retention (optional)"
               />
-            </h3>
+            </h2>
           </EuiTitle>
         </EuiFlexItem>
 
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_review.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_review.tsx
index 52667ee7ebc87..3ddbcd94009ac 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_review.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_review.tsx
@@ -362,12 +362,12 @@ export const PolicyStepReview: React.FunctionComponent<StepProps> = ({
   return (
     <Fragment>
       <EuiTitle>
-        <h3>
+        <h2>
           <FormattedMessage
             id="xpack.snapshotRestore.policyForm.stepReviewTitle"
             defaultMessage="Review policy"
           />
-        </h3>
+        </h2>
       </EuiTitle>
       <EuiSpacer size="m" />
       <EuiTabbedContent
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_settings.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_settings.tsx
index 6f1b2ed2cef4d..0997d59b2216d 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_settings.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_settings.tsx
@@ -425,12 +425,12 @@ export const PolicyStepSettings: React.FunctionComponent<StepProps> = ({
       <EuiFlexGroup justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
           <EuiTitle>
-            <h3>
+            <h2>
               <FormattedMessage
                 id="xpack.snapshotRestore.policyForm.stepSettingsTitle"
                 defaultMessage="Snapshot settings"
               />
-            </h3>
+            </h2>
           </EuiTitle>
         </EuiFlexItem>
 
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/step_one.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/step_one.tsx
index 9f66353af9614..fe76d06b9c4bf 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/step_one.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/repository_form/step_one.tsx
@@ -88,12 +88,12 @@ export const RepositoryFormStepOne: React.FunctionComponent<Props> = ({
     <EuiDescribedFormGroup
       title={
         <EuiTitle size="s">
-          <h3>
+          <h2>
             <FormattedMessage
               id="xpack.snapshotRestore.repositoryForm.fields.nameDescriptionTitle"
               defaultMessage="Repository name"
             />
-          </h3>
+          </h2>
         </EuiTitle>
       }
       description={
@@ -227,12 +227,12 @@ export const RepositoryFormStepOne: React.FunctionComponent<Props> = ({
     return (
       <Fragment>
         <EuiTitle size="s">
-          <h3>
+          <h2>
             <FormattedMessage
               id="xpack.snapshotRestore.repositoryForm.fields.typeDescriptionTitle"
               defaultMessage="Repository type"
             />
-          </h3>
+          </h2>
         </EuiTitle>
         <EuiSpacer size="s" />
         <EuiText id="repositoryTypeDescription" size="s" color="subdued">
@@ -274,12 +274,12 @@ export const RepositoryFormStepOne: React.FunctionComponent<Props> = ({
     <EuiDescribedFormGroup
       title={
         <EuiTitle size="s">
-          <h3>
+          <h2>
             <FormattedMessage
               id="xpack.snapshotRestore.repositoryForm.fields.sourceOnlyDescriptionTitle"
               defaultMessage="Source-only snapshots"
             />
-          </h3>
+          </h2>
         </EuiTitle>
       }
       description={
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/restore_snapshot_form/steps/step_logistics.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/restore_snapshot_form/steps/step_logistics.tsx
index 8a0d8039bb7cd..f5a3180adbd6e 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/restore_snapshot_form/steps/step_logistics.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/restore_snapshot_form/steps/step_logistics.tsx
@@ -96,12 +96,12 @@ export const RestoreSnapshotStepLogistics: React.FunctionComponent<StepProps> =
       <EuiFlexGroup justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
           <EuiTitle>
-            <h3>
+            <h2>
               <FormattedMessage
                 id="xpack.snapshotRestore.restoreForm.stepLogisticsTitle"
                 defaultMessage="Restore details"
               />
-            </h3>
+            </h2>
           </EuiTitle>
         </EuiFlexItem>
 
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/restore_snapshot_form/steps/step_review.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/restore_snapshot_form/steps/step_review.tsx
index 65a3918d29940..92b0ee48fef01 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/restore_snapshot_form/steps/step_review.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/restore_snapshot_form/steps/step_review.tsx
@@ -350,12 +350,12 @@ export const RestoreSnapshotStepReview: React.FunctionComponent<StepProps> = ({
   return (
     <Fragment>
       <EuiTitle>
-        <h3>
+        <h2>
           <FormattedMessage
             id="xpack.snapshotRestore.restoreForm.stepReviewTitle"
             defaultMessage="Review restore details"
           />
-        </h3>
+        </h2>
       </EuiTitle>
       <EuiSpacer size="m" />
       <EuiTabbedContent
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/restore_snapshot_form/steps/step_settings.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/restore_snapshot_form/steps/step_settings.tsx
index 6933c47a10ec4..adf0a1334bfce 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/restore_snapshot_form/steps/step_settings.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/restore_snapshot_form/steps/step_settings.tsx
@@ -74,12 +74,12 @@ export const RestoreSnapshotStepSettings: React.FunctionComponent<StepProps> = (
       <EuiFlexGroup justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
           <EuiTitle>
-            <h3>
+            <h2>
               <FormattedMessage
                 id="xpack.snapshotRestore.restoreForm.stepSettingsTitle"
                 defaultMessage="Index settings"
               />
-            </h3>
+            </h2>
           </EuiTitle>
         </EuiFlexItem>
 
diff --git a/x-pack/legacy/plugins/watcher/public/sections/watch_edit/components/json_watch_edit/json_watch_edit_simulate.tsx b/x-pack/legacy/plugins/watcher/public/sections/watch_edit/components/json_watch_edit/json_watch_edit_simulate.tsx
index 5d16ac3aa18f0..e57a875aa4356 100644
--- a/x-pack/legacy/plugins/watcher/public/sections/watch_edit/components/json_watch_edit/json_watch_edit_simulate.tsx
+++ b/x-pack/legacy/plugins/watcher/public/sections/watch_edit/components/json_watch_edit/json_watch_edit_simulate.tsx
@@ -158,12 +158,12 @@ export const JsonWatchEditSimulate = ({
         <EuiDescribedFormGroup
           fullWidth
           title={
-            <h3>
+            <h2>
               {i18n.translate(
                 'xpack.watcher.sections.watchEdit.simulate.form.triggerOverridesTitle',
                 { defaultMessage: 'Trigger' }
               )}
-            </h3>
+            </h2>
           }
           description={i18n.translate(
             'xpack.watcher.sections.watchEdit.simulate.form.triggerOverridesDescription',
@@ -247,12 +247,12 @@ export const JsonWatchEditSimulate = ({
         <EuiDescribedFormGroup
           fullWidth
           title={
-            <h3>
+            <h2>
               {i18n.translate(
                 'xpack.watcher.sections.watchEdit.simulate.form.conditionOverridesTitle',
                 { defaultMessage: 'Condition' }
               )}
-            </h3>
+            </h2>
           }
           description={i18n.translate(
             'xpack.watcher.sections.watchEdit.simulate.form.conditionOverridesDescription',
@@ -283,12 +283,12 @@ export const JsonWatchEditSimulate = ({
           fullWidth
           idAria="simulateExecutionActionModesDescription"
           title={
-            <h3>
+            <h2>
               {i18n.translate(
                 'xpack.watcher.sections.watchEdit.simulate.form.actionOverridesTitle',
                 { defaultMessage: 'Actions' }
               )}
-            </h3>
+            </h2>
           }
           description={
             <FormattedMessage
@@ -331,12 +331,12 @@ export const JsonWatchEditSimulate = ({
           fullWidth
           idAria="simulateExecutionInputOverridesDescription"
           title={
-            <h3>
+            <h2>
               {i18n.translate(
                 'xpack.watcher.sections.watchEdit.simulate.form.inputOverridesTitle',
                 { defaultMessage: 'Input' }
               )}
-            </h3>
+            </h2>
           }
           description={i18n.translate(
             'xpack.watcher.sections.watchEdit.simulate.form.inputOverridesDescription',
diff --git a/x-pack/legacy/plugins/watcher/public/sections/watch_edit/components/threshold_watch_edit/threshold_watch_action_panel.tsx b/x-pack/legacy/plugins/watcher/public/sections/watch_edit/components/threshold_watch_edit/threshold_watch_action_panel.tsx
index 504c5e10ed665..a2e46652429ea 100644
--- a/x-pack/legacy/plugins/watcher/public/sections/watch_edit/components/threshold_watch_edit/threshold_watch_action_panel.tsx
+++ b/x-pack/legacy/plugins/watcher/public/sections/watch_edit/components/threshold_watch_edit/threshold_watch_action_panel.tsx
@@ -29,7 +29,7 @@ export const WatchActionsPanel: React.FunctionComponent<Props> = ({ actionErrors
       <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
         <EuiFlexItem>
           <EuiTitle size="s">
-            <h3>
+            <h2>
               {i18n.translate('xpack.watcher.sections.watchEdit.actions.title', {
                 defaultMessage:
                   'Perform {watchActionsCount, plural, one{# action} other {# actions}} when condition is met',
@@ -37,7 +37,7 @@ export const WatchActionsPanel: React.FunctionComponent<Props> = ({ actionErrors
                   watchActionsCount: watch.actions.length,
                 },
               })}
-            </h3>
+            </h2>
           </EuiTitle>
         </EuiFlexItem>
         <EuiFlexItem className="watcherThresholdWatchActionDropdownContainer">
diff --git a/x-pack/legacy/plugins/watcher/public/sections/watch_edit/components/threshold_watch_edit/threshold_watch_edit.tsx b/x-pack/legacy/plugins/watcher/public/sections/watch_edit/components/threshold_watch_edit/threshold_watch_edit.tsx
index c479cad1bc825..ee89d9bfc176a 100644
--- a/x-pack/legacy/plugins/watcher/public/sections/watch_edit/components/threshold_watch_edit/threshold_watch_edit.tsx
+++ b/x-pack/legacy/plugins/watcher/public/sections/watch_edit/components/threshold_watch_edit/threshold_watch_edit.tsx
@@ -441,12 +441,12 @@ export const ThresholdWatchEdit = ({ pageTitle }: { pageTitle: string }) => {
         {shouldShowThresholdExpression ? (
           <Fragment>
             <EuiTitle size="s">
-              <h3 data-test-subj="watchConditionTitle">
+              <h2 data-test-subj="watchConditionTitle">
                 <FormattedMessage
                   id="xpack.watcher.sections.watchEdit.watchConditionSectionTitle"
                   defaultMessage="Match the following condition"
                 />
-              </h3>
+              </h2>
             </EuiTitle>
             <EuiSpacer size="m" />
             <EuiFlexGroup gutterSize="s">