[a11y] fix page heading structure in management apps (#48936)

elastic · Oct 24, 2019 · 841abd1 · 841abd1
1 parent d9133c1
commit 841abd1
Show file tree

Hide file tree

Showing 32 changed files with 99 additions and 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
@@ -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/...ndex_lifecycle_management/public/sections/edit_policy/components/cold_phase/cold_phase.js b/...ndex_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/..._lifecycle_management/public/sections/edit_policy/components/delete_phase/delete_phase.js b/..._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/.../index_lifecycle_management/public/sections/edit_policy/components/hot_phase/hot_phase.js b/.../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/...s/index_lifecycle_management/public/sections/edit_policy/components/set_priority_input.js b/...s/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/...ndex_lifecycle_management/public/sections/edit_policy/components/warm_phase/warm_phase.js b/...ndex_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
@@ -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/...ck/legacy/plugins/index_management/public/components/template_form/steps/step_aliases.tsx b/...ck/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/.../legacy/plugins/index_management/public/components/template_form/steps/step_logistics.tsx b/.../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/...k/legacy/plugins/index_management/public/components/template_form/steps/step_mappings.tsx b/...k/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
@@ -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/...k/legacy/plugins/index_management/public/components/template_form/steps/step_settings.tsx b/...k/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
diff --git a/...ins/license_management/public/sections/license_dashboard/license_status/license_status.js b/...ins/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
@@ -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/...ck/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_date_histogram.js b/...ck/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
@@ -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={(