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

This commit is contained in:
Alison Goryachev 2019-10-24 12:15:51 -04:00 committed by GitHub
parent 275f982384
commit 46073cbff2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
32 changed files with 99 additions and 91 deletions

View file

@ -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),

View file

@ -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">

View file

@ -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}

View file

@ -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>

View file

@ -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">

View file

@ -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">

View file

@ -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">

View file

@ -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" />

View file

@ -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>

View file

@ -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" />

View file

@ -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" />

View file

@ -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" />

View file

@ -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>"`;

View file

@ -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>

View file

@ -549,7 +549,7 @@ export class JobCreateUi extends Component {
<Fragment>
<EuiPageContent>
<EuiPageContentHeader>
<EuiTitle size="m">
<EuiTitle size="l">
<h1>
<FormattedMessage
id="xpack.rollupJobs.createTitle"

View file

@ -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>

View file

@ -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={(

View file

@ -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={

View file

@ -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"/>

View file

@ -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()}

View file

@ -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" />

View file

@ -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>

View file

@ -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>

View file

@ -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

View file

@ -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>

View file

@ -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={

View file

@ -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>

View file

@ -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

View file

@ -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>

View file

@ -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',

View file

@ -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">

View file

@ -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">