Accessibility tests for Stack management > advanced settings page (#78102)
* wip * advanced settings * removed unused vars * unused vars * fix label issue and ignore duplicate id issue * fixing advanced management * fixing jest tests * i18n translations * i18n translations * fixed jest tests * addressed review comments * addressed review comments * addressed review comments * reverted the snapshot Co-authored-by: Michail Yasonik <michail.yasonik@elastic.co> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
parent
c2ef407d04
commit
f27b6fef19
|
@ -2,6 +2,7 @@
|
|||
|
||||
exports[`renders matching snapshot 1`] = `
|
||||
<EuiGlobalToastList
|
||||
aria-label="Notification message list"
|
||||
data-test-subj="globalToastList"
|
||||
dismissToast={[Function]}
|
||||
side="right"
|
||||
|
|
|
@ -20,6 +20,7 @@
|
|||
import { EuiGlobalToastList, EuiGlobalToastListToast as EuiToast } from '@elastic/eui';
|
||||
import React from 'react';
|
||||
import * as Rx from 'rxjs';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
||||
import { MountWrapper } from '../../utils';
|
||||
import { Toast } from './toasts_api';
|
||||
|
@ -61,6 +62,9 @@ export class GlobalToastList extends React.Component<Props, State> {
|
|||
public render() {
|
||||
return (
|
||||
<EuiGlobalToastList
|
||||
aria-label={i18n.translate('core.notifications.globalToast.ariaLabel', {
|
||||
defaultMessage: 'Notification message list',
|
||||
})}
|
||||
data-test-subj="globalToastList"
|
||||
toasts={this.state.toasts.map(convertToEui)}
|
||||
dismissToast={({ id }) => this.props.dismissToast(id)}
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
exports[`Advanced Settings: Voice Announcement should render announcement 1`] = `
|
||||
<EuiScreenReaderOnly>
|
||||
<div
|
||||
aria-label="Advanced Settings results info"
|
||||
aria-live="polite"
|
||||
role="region"
|
||||
>
|
||||
|
@ -28,6 +29,7 @@ exports[`Advanced Settings: Voice Announcement should render announcement 1`] =
|
|||
exports[`Advanced Settings: Voice Announcement should render nothing 1`] = `
|
||||
<EuiScreenReaderOnly>
|
||||
<div
|
||||
aria-label="Advanced Settings results info"
|
||||
aria-live="polite"
|
||||
role="region"
|
||||
>
|
||||
|
@ -35,12 +37,11 @@ exports[`Advanced Settings: Voice Announcement should render nothing 1`] = `
|
|||
delay={500}
|
||||
>
|
||||
<FormattedMessage
|
||||
defaultMessage="You searched for {query}. There {optionLenght, plural, one {is # option} other {are # options}} in {sectionLenght, plural, one {# section} other {# sections}}"
|
||||
id="advancedSettings.voiceAnnouncement.searchResultScreenReaderMessage"
|
||||
defaultMessage="There {optionLenght, plural, one {is # option} other {are # options}} in {sectionLenght, plural, one {# section} other {# sections}}"
|
||||
id="advancedSettings.voiceAnnouncement.noSearchResultScreenReaderMessage"
|
||||
values={
|
||||
Object {
|
||||
"optionLenght": 1,
|
||||
"query": "",
|
||||
"sectionLenght": 1,
|
||||
}
|
||||
}
|
||||
|
|
|
@ -40,6 +40,7 @@
|
|||
import React, { Component } from 'react';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
import { EuiScreenReaderOnly, EuiDelayRender } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { FieldSetting } from '../../types';
|
||||
|
||||
interface Props {
|
||||
|
@ -66,19 +67,34 @@ export class AdvancedSettingsVoiceAnnouncement extends Component<Props> {
|
|||
const filteredOptions = [...filteredSections];
|
||||
return (
|
||||
<EuiScreenReaderOnly>
|
||||
<div role="region" aria-live="polite">
|
||||
<div
|
||||
role="region"
|
||||
aria-live="polite"
|
||||
aria-label={i18n.translate('advancedSettings.voiceAnnouncement.ariaLabel', {
|
||||
defaultMessage: 'Advanced Settings results info',
|
||||
})}
|
||||
>
|
||||
<EuiDelayRender>
|
||||
<FormattedMessage
|
||||
id="advancedSettings.voiceAnnouncement.searchResultScreenReaderMessage"
|
||||
defaultMessage="You searched for {query}.
|
||||
There {optionLenght, plural, one {is # option} other {are # options}}
|
||||
in {sectionLenght, plural, one {# section} other {# sections}}"
|
||||
values={{
|
||||
query: this.props.queryText,
|
||||
sectionLenght: filteredSections.length,
|
||||
optionLenght: filteredOptions.length,
|
||||
}}
|
||||
/>
|
||||
{this.props.queryText ? (
|
||||
<FormattedMessage
|
||||
id="advancedSettings.voiceAnnouncement.searchResultScreenReaderMessage"
|
||||
defaultMessage="You searched for {query}. There {optionLenght, plural, one {is # option} other {are # options}} in {sectionLenght, plural, one {# section} other {# sections}}"
|
||||
values={{
|
||||
query: this.props.queryText,
|
||||
sectionLenght: filteredSections.length,
|
||||
optionLenght: filteredOptions.length,
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<FormattedMessage
|
||||
id="advancedSettings.voiceAnnouncement.noSearchResultScreenReaderMessage"
|
||||
defaultMessage="There {optionLenght, plural, one {is # option} other {are # options}} in {sectionLenght, plural, one {# section} other {# sections}}"
|
||||
values={{
|
||||
sectionLenght: filteredSections.length,
|
||||
optionLenght: filteredOptions.length,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</EuiDelayRender>
|
||||
</div>
|
||||
</EuiScreenReaderOnly>
|
||||
|
|
|
@ -15,7 +15,7 @@ exports[`Field for array setting should render as read only if saving is disable
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="array:test:setting"
|
||||
id="array:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -88,7 +88,7 @@ exports[`Field for array setting should render as read only with help text if ov
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="array:test:setting"
|
||||
id="array:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -149,7 +149,7 @@ exports[`Field for array setting should render custom setting icon if it is cust
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="array:test:setting"
|
||||
id="array:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -211,7 +211,7 @@ exports[`Field for array setting should render default value if there is no user
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="array:test:setting"
|
||||
id="array:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -262,7 +262,7 @@ exports[`Field for array setting should render unsaved value if there are unsave
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="array:test:setting"
|
||||
id="array:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -304,7 +304,7 @@ exports[`Field for array setting should render unsaved value if there are unsave
|
|||
labelType="label"
|
||||
>
|
||||
<EuiFieldText
|
||||
aria-describedby="array:test:setting"
|
||||
aria-describedby="array:test:setting-group array:test:setting-unsaved"
|
||||
aria-label="array test setting"
|
||||
data-test-subj="advancedSetting-editField-array:test:setting"
|
||||
disabled={false}
|
||||
|
@ -318,7 +318,7 @@ exports[`Field for array setting should render unsaved value if there are unsave
|
|||
/>
|
||||
<EuiScreenReaderOnly>
|
||||
<p
|
||||
id="array:test:setting"
|
||||
id="array:test:setting-unsaved"
|
||||
>
|
||||
Setting is currently not saved.
|
||||
</p>
|
||||
|
@ -364,7 +364,7 @@ exports[`Field for array setting should render user value if there is user value
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="array:test:setting"
|
||||
id="array:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -432,7 +432,7 @@ exports[`Field for boolean setting should render as read only if saving is disab
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="boolean:test:setting"
|
||||
id="boolean:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -511,7 +511,7 @@ exports[`Field for boolean setting should render as read only with help text if
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="boolean:test:setting"
|
||||
id="boolean:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -578,7 +578,7 @@ exports[`Field for boolean setting should render custom setting icon if it is cu
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="boolean:test:setting"
|
||||
id="boolean:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -646,7 +646,7 @@ exports[`Field for boolean setting should render default value if there is no us
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="boolean:test:setting"
|
||||
id="boolean:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -703,7 +703,7 @@ exports[`Field for boolean setting should render unsaved value if there are unsa
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="boolean:test:setting"
|
||||
id="boolean:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -745,7 +745,7 @@ exports[`Field for boolean setting should render unsaved value if there are unsa
|
|||
labelType="label"
|
||||
>
|
||||
<EuiSwitch
|
||||
aria-describedby="boolean:test:setting"
|
||||
aria-describedby="boolean:test:setting-group boolean:test:setting-unsaved"
|
||||
aria-label="boolean test setting"
|
||||
checked={false}
|
||||
data-test-subj="advancedSetting-editField-boolean:test:setting"
|
||||
|
@ -761,7 +761,7 @@ exports[`Field for boolean setting should render unsaved value if there are unsa
|
|||
/>
|
||||
<EuiScreenReaderOnly>
|
||||
<p
|
||||
id="boolean:test:setting"
|
||||
id="boolean:test:setting-unsaved"
|
||||
>
|
||||
Setting is currently not saved.
|
||||
</p>
|
||||
|
@ -807,7 +807,7 @@ exports[`Field for boolean setting should render user value if there is user val
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="boolean:test:setting"
|
||||
id="boolean:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -881,7 +881,7 @@ exports[`Field for image setting should render as read only if saving is disable
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="image:test:setting"
|
||||
id="image:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -907,6 +907,7 @@ exports[`Field for image setting should render as read only if saving is disable
|
|||
>
|
||||
<EuiFilePicker
|
||||
accept=".jpg,.jpeg,.png"
|
||||
aria-label="image:test:setting"
|
||||
compressed={false}
|
||||
data-test-subj="advancedSetting-editField-image:test:setting"
|
||||
disabled={true}
|
||||
|
@ -956,7 +957,7 @@ exports[`Field for image setting should render as read only with help text if ov
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="image:test:setting"
|
||||
id="image:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -1015,7 +1016,7 @@ exports[`Field for image setting should render custom setting icon if it is cust
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="image:test:setting"
|
||||
id="image:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -1052,6 +1053,7 @@ exports[`Field for image setting should render custom setting icon if it is cust
|
|||
>
|
||||
<EuiFilePicker
|
||||
accept=".jpg,.jpeg,.png"
|
||||
aria-label="image:test:setting"
|
||||
compressed={false}
|
||||
data-test-subj="advancedSetting-editField-image:test:setting"
|
||||
disabled={false}
|
||||
|
@ -1079,7 +1081,7 @@ exports[`Field for image setting should render default value if there is no user
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="image:test:setting"
|
||||
id="image:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -1105,6 +1107,7 @@ exports[`Field for image setting should render default value if there is no user
|
|||
>
|
||||
<EuiFilePicker
|
||||
accept=".jpg,.jpeg,.png"
|
||||
aria-label="image:test:setting"
|
||||
compressed={false}
|
||||
data-test-subj="advancedSetting-editField-image:test:setting"
|
||||
disabled={false}
|
||||
|
@ -1132,7 +1135,7 @@ exports[`Field for image setting should render unsaved value if there are unsave
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="image:test:setting"
|
||||
id="image:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -1175,6 +1178,7 @@ exports[`Field for image setting should render unsaved value if there are unsave
|
|||
>
|
||||
<EuiFilePicker
|
||||
accept=".jpg,.jpeg,.png"
|
||||
aria-label="image:test:setting"
|
||||
compressed={false}
|
||||
data-test-subj="advancedSetting-editField-image:test:setting"
|
||||
disabled={false}
|
||||
|
@ -1185,7 +1189,7 @@ exports[`Field for image setting should render unsaved value if there are unsave
|
|||
/>
|
||||
<EuiScreenReaderOnly>
|
||||
<p
|
||||
id="image:test:setting"
|
||||
id="image:test:setting-unsaved"
|
||||
>
|
||||
Setting is currently not saved.
|
||||
</p>
|
||||
|
@ -1231,7 +1235,7 @@ exports[`Field for image setting should render user value if there is user value
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="image:test:setting"
|
||||
id="image:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -1335,7 +1339,7 @@ exports[`Field for json setting should render as read only if saving is disabled
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="json:test:setting"
|
||||
id="json:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -1431,7 +1435,7 @@ exports[`Field for json setting should render as read only with help text if ove
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="json:test:setting"
|
||||
id="json:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -1512,7 +1516,7 @@ exports[`Field for json setting should render custom setting icon if it is custo
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="json:test:setting"
|
||||
id="json:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -1619,7 +1623,7 @@ exports[`Field for json setting should render default value if there is no user
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="json:test:setting"
|
||||
id="json:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -1707,7 +1711,7 @@ exports[`Field for json setting should render unsaved value if there are unsaved
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="json:test:setting"
|
||||
id="json:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -1752,7 +1756,7 @@ exports[`Field for json setting should render unsaved value if there are unsaved
|
|||
data-test-subj="advancedSetting-editField-json:test:setting"
|
||||
>
|
||||
<EuiCodeEditor
|
||||
aria-describedby="json:test:setting"
|
||||
aria-describedby="json:test:setting-group json:test:setting-unsaved"
|
||||
aria-label="json test setting"
|
||||
editorProps={
|
||||
Object {
|
||||
|
@ -1783,7 +1787,7 @@ exports[`Field for json setting should render unsaved value if there are unsaved
|
|||
</div>
|
||||
<EuiScreenReaderOnly>
|
||||
<p
|
||||
id="json:test:setting"
|
||||
id="json:test:setting-unsaved"
|
||||
>
|
||||
Setting is currently not saved.
|
||||
</p>
|
||||
|
@ -1832,7 +1836,7 @@ exports[`Field for json setting should render user value if there is user value
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="json:test:setting"
|
||||
id="json:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -1920,7 +1924,7 @@ exports[`Field for markdown setting should render as read only if saving is disa
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="markdown:test:setting"
|
||||
id="markdown:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -2013,7 +2017,7 @@ exports[`Field for markdown setting should render as read only with help text if
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="markdown:test:setting"
|
||||
id="markdown:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -2094,7 +2098,7 @@ exports[`Field for markdown setting should render custom setting icon if it is c
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="markdown:test:setting"
|
||||
id="markdown:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -2176,7 +2180,7 @@ exports[`Field for markdown setting should render default value if there is no u
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="markdown:test:setting"
|
||||
id="markdown:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -2247,7 +2251,7 @@ exports[`Field for markdown setting should render unsaved value if there are uns
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="markdown:test:setting"
|
||||
id="markdown:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -2292,7 +2296,7 @@ exports[`Field for markdown setting should render unsaved value if there are uns
|
|||
data-test-subj="advancedSetting-editField-markdown:test:setting"
|
||||
>
|
||||
<EuiCodeEditor
|
||||
aria-describedby="markdown:test:setting"
|
||||
aria-describedby="markdown:test:setting-group markdown:test:setting-unsaved"
|
||||
aria-label="markdown test setting"
|
||||
editorProps={
|
||||
Object {
|
||||
|
@ -2319,7 +2323,7 @@ exports[`Field for markdown setting should render unsaved value if there are uns
|
|||
</div>
|
||||
<EuiScreenReaderOnly>
|
||||
<p
|
||||
id="markdown:test:setting"
|
||||
id="markdown:test:setting-unsaved"
|
||||
>
|
||||
Setting is currently not saved.
|
||||
</p>
|
||||
|
@ -2365,7 +2369,7 @@ exports[`Field for markdown setting should render user value if there is user va
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="markdown:test:setting"
|
||||
id="markdown:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -2453,7 +2457,7 @@ exports[`Field for number setting should render as read only if saving is disabl
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="number:test:setting"
|
||||
id="number:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -2526,7 +2530,7 @@ exports[`Field for number setting should render as read only with help text if o
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="number:test:setting"
|
||||
id="number:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -2587,7 +2591,7 @@ exports[`Field for number setting should render custom setting icon if it is cus
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="number:test:setting"
|
||||
id="number:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -2649,7 +2653,7 @@ exports[`Field for number setting should render default value if there is no use
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="number:test:setting"
|
||||
id="number:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -2700,7 +2704,7 @@ exports[`Field for number setting should render unsaved value if there are unsav
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="number:test:setting"
|
||||
id="number:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -2742,7 +2746,7 @@ exports[`Field for number setting should render unsaved value if there are unsav
|
|||
labelType="label"
|
||||
>
|
||||
<EuiFieldNumber
|
||||
aria-describedby="number:test:setting"
|
||||
aria-describedby="number:test:setting-group number:test:setting-unsaved"
|
||||
aria-label="number test setting"
|
||||
data-test-subj="advancedSetting-editField-number:test:setting"
|
||||
disabled={false}
|
||||
|
@ -2752,7 +2756,7 @@ exports[`Field for number setting should render unsaved value if there are unsav
|
|||
/>
|
||||
<EuiScreenReaderOnly>
|
||||
<p
|
||||
id="number:test:setting"
|
||||
id="number:test:setting-unsaved"
|
||||
>
|
||||
Setting is currently not saved.
|
||||
</p>
|
||||
|
@ -2798,7 +2802,7 @@ exports[`Field for number setting should render user value if there is user valu
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="number:test:setting"
|
||||
id="number:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -2866,7 +2870,7 @@ exports[`Field for select setting should render as read only if saving is disabl
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="select:test:setting"
|
||||
id="select:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -2955,7 +2959,7 @@ exports[`Field for select setting should render as read only with help text if o
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="select:test:setting"
|
||||
id="select:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -3032,7 +3036,7 @@ exports[`Field for select setting should render custom setting icon if it is cus
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="select:test:setting"
|
||||
id="select:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -3110,7 +3114,7 @@ exports[`Field for select setting should render default value if there is no use
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="select:test:setting"
|
||||
id="select:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -3177,7 +3181,7 @@ exports[`Field for select setting should render unsaved value if there are unsav
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="select:test:setting"
|
||||
id="select:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -3219,7 +3223,7 @@ exports[`Field for select setting should render unsaved value if there are unsav
|
|||
labelType="label"
|
||||
>
|
||||
<EuiSelect
|
||||
aria-describedby="select:test:setting"
|
||||
aria-describedby="select:test:setting-group select:test:setting-unsaved"
|
||||
aria-label="select test setting"
|
||||
data-test-subj="advancedSetting-editField-select:test:setting"
|
||||
disabled={false}
|
||||
|
@ -3245,7 +3249,7 @@ exports[`Field for select setting should render unsaved value if there are unsav
|
|||
/>
|
||||
<EuiScreenReaderOnly>
|
||||
<p
|
||||
id="select:test:setting"
|
||||
id="select:test:setting-unsaved"
|
||||
>
|
||||
Setting is currently not saved.
|
||||
</p>
|
||||
|
@ -3291,7 +3295,7 @@ exports[`Field for select setting should render user value if there is user valu
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="select:test:setting"
|
||||
id="select:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -3375,7 +3379,7 @@ exports[`Field for string setting should render as read only if saving is disabl
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="string:test:setting"
|
||||
id="string:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -3448,7 +3452,7 @@ exports[`Field for string setting should render as read only with help text if o
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="string:test:setting"
|
||||
id="string:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -3509,7 +3513,7 @@ exports[`Field for string setting should render custom setting icon if it is cus
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="string:test:setting"
|
||||
id="string:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -3571,7 +3575,7 @@ exports[`Field for string setting should render default value if there is no use
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="string:test:setting"
|
||||
id="string:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -3622,7 +3626,7 @@ exports[`Field for string setting should render unsaved value if there are unsav
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="string:test:setting"
|
||||
id="string:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -3664,7 +3668,7 @@ exports[`Field for string setting should render unsaved value if there are unsav
|
|||
labelType="label"
|
||||
>
|
||||
<EuiFieldText
|
||||
aria-describedby="string:test:setting"
|
||||
aria-describedby="string:test:setting-group string:test:setting-unsaved"
|
||||
aria-label="string test setting"
|
||||
data-test-subj="advancedSetting-editField-string:test:setting"
|
||||
disabled={false}
|
||||
|
@ -3674,7 +3678,7 @@ exports[`Field for string setting should render unsaved value if there are unsav
|
|||
/>
|
||||
<EuiScreenReaderOnly>
|
||||
<p
|
||||
id="string:test:setting"
|
||||
id="string:test:setting-unsaved"
|
||||
>
|
||||
Setting is currently not saved.
|
||||
</p>
|
||||
|
@ -3720,7 +3724,7 @@ exports[`Field for string setting should render user value if there is user valu
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="string:test:setting"
|
||||
id="string:test:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -3788,7 +3792,7 @@ exports[`Field for stringWithValidation setting should render as read only if sa
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="string:test-validation:setting"
|
||||
id="string:test-validation:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -3861,7 +3865,7 @@ exports[`Field for stringWithValidation setting should render as read only with
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="string:test-validation:setting"
|
||||
id="string:test-validation:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -3922,7 +3926,7 @@ exports[`Field for stringWithValidation setting should render custom setting ico
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="string:test-validation:setting"
|
||||
id="string:test-validation:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -3984,7 +3988,7 @@ exports[`Field for stringWithValidation setting should render default value if t
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="string:test-validation:setting"
|
||||
id="string:test-validation:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -4035,7 +4039,7 @@ exports[`Field for stringWithValidation setting should render unsaved value if t
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="string:test-validation:setting"
|
||||
id="string:test-validation:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
@ -4077,7 +4081,7 @@ exports[`Field for stringWithValidation setting should render unsaved value if t
|
|||
labelType="label"
|
||||
>
|
||||
<EuiFieldText
|
||||
aria-describedby="string:test-validation:setting"
|
||||
aria-describedby="string:test-validation:setting-group string:test-validation:setting-unsaved"
|
||||
aria-label="string test validation setting"
|
||||
data-test-subj="advancedSetting-editField-string:test-validation:setting"
|
||||
disabled={false}
|
||||
|
@ -4087,7 +4091,7 @@ exports[`Field for stringWithValidation setting should render unsaved value if t
|
|||
/>
|
||||
<EuiScreenReaderOnly>
|
||||
<p
|
||||
id="string:test-validation:setting"
|
||||
id="string:test-validation:setting-unsaved"
|
||||
>
|
||||
Setting is currently not saved.
|
||||
</p>
|
||||
|
@ -4133,7 +4137,7 @@ exports[`Field for stringWithValidation setting should render user value if ther
|
|||
</React.Fragment>
|
||||
}
|
||||
fullWidth={true}
|
||||
id="string:test-validation:setting"
|
||||
id="string:test-validation:setting-group"
|
||||
title={
|
||||
<h3>
|
||||
<span
|
||||
|
|
|
@ -28,12 +28,10 @@ import {
|
|||
EuiCode,
|
||||
EuiCodeBlock,
|
||||
EuiScreenReaderOnly,
|
||||
// @ts-ignore
|
||||
EuiCodeEditor,
|
||||
EuiDescribedFormGroup,
|
||||
EuiFieldNumber,
|
||||
EuiFieldText,
|
||||
// @ts-ignore
|
||||
EuiFilePicker,
|
||||
EuiFormRow,
|
||||
EuiIconTip,
|
||||
|
@ -289,7 +287,7 @@ export class Field extends PureComponent<FieldProps> {
|
|||
}
|
||||
};
|
||||
|
||||
renderField(id: string, setting: FieldSetting) {
|
||||
renderField(setting: FieldSetting, ariaDescribedBy?: string) {
|
||||
const { enableSaving, unsavedChanges, loading } = this.props;
|
||||
const {
|
||||
name,
|
||||
|
@ -301,10 +299,10 @@ export class Field extends PureComponent<FieldProps> {
|
|||
defVal,
|
||||
ariaName,
|
||||
} = setting;
|
||||
const a11yProps: { [key: string]: string } = unsavedChanges
|
||||
const a11yProps: { [key: string]: string } = ariaDescribedBy
|
||||
? {
|
||||
'aria-label': ariaName,
|
||||
'aria-describedby': id,
|
||||
'aria-describedby': ariaDescribedBy,
|
||||
}
|
||||
: {
|
||||
'aria-label': ariaName,
|
||||
|
@ -370,6 +368,7 @@ export class Field extends PureComponent<FieldProps> {
|
|||
ref={this.changeImageForm}
|
||||
fullWidth
|
||||
data-test-subj={`advancedSetting-editField-${name}`}
|
||||
aria-label={name}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
@ -669,11 +668,12 @@ export class Field extends PureComponent<FieldProps> {
|
|||
// eslint-disable-next-line @typescript-eslint/naming-convention
|
||||
'mgtAdvancedSettings__field--invalid': isInvalid,
|
||||
});
|
||||
const id = setting.name;
|
||||
const groupId = `${setting.name}-group`;
|
||||
const unsavedId = `${setting.name}-unsaved`;
|
||||
|
||||
return (
|
||||
<EuiDescribedFormGroup
|
||||
id={id}
|
||||
id={groupId}
|
||||
className={className}
|
||||
title={this.renderTitle(setting)}
|
||||
description={this.renderDescription(setting)}
|
||||
|
@ -689,10 +689,10 @@ export class Field extends PureComponent<FieldProps> {
|
|||
fullWidth
|
||||
>
|
||||
<>
|
||||
{this.renderField(id, setting)}
|
||||
{this.renderField(setting, unsavedChanges ? `${groupId} ${unsavedId}` : undefined)}
|
||||
{unsavedChanges && (
|
||||
<EuiScreenReaderOnly>
|
||||
<p id={id}>
|
||||
<p id={`${unsavedId}`}>
|
||||
{unsavedChanges.error
|
||||
? unsavedChanges.error
|
||||
: i18n.translate('advancedSettings.field.settingIsUnsaved', {
|
||||
|
|
|
@ -32,7 +32,7 @@ interface ManagementSectionWrapperProps {
|
|||
|
||||
export class ManagementAppWrapper extends Component<ManagementSectionWrapperProps> {
|
||||
private unmount?: Unmount;
|
||||
private mountElementRef = createRef<HTMLElement>();
|
||||
private mountElementRef = createRef<HTMLDivElement>();
|
||||
|
||||
componentDidMount() {
|
||||
const { setBreadcrumbs, app, onAppMounted, history } = this.props;
|
||||
|
@ -64,6 +64,6 @@ export class ManagementAppWrapper extends Component<ManagementSectionWrapperProp
|
|||
}
|
||||
|
||||
render() {
|
||||
return <main ref={this.mountElementRef} />;
|
||||
return <div ref={this.mountElementRef} />;
|
||||
}
|
||||
}
|
||||
|
|
54
x-pack/test/accessibility/apps/advanced_settings.ts
Normal file
54
x-pack/test/accessibility/apps/advanced_settings.ts
Normal file
|
@ -0,0 +1,54 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import { FtrProviderContext } from '../ftr_provider_context';
|
||||
|
||||
export default function ({ getService, getPageObjects }: FtrProviderContext) {
|
||||
const PageObjects = getPageObjects(['common', 'settings', 'header']);
|
||||
const a11y = getService('a11y');
|
||||
const testSubjects = getService('testSubjects');
|
||||
|
||||
describe('Stack Management -Advanced Settings', () => {
|
||||
// click on Management > Advanced settings
|
||||
it('click on advanced settings ', async () => {
|
||||
await PageObjects.common.navigateToUrl('management', 'kibana/settings', {
|
||||
shouldUseHashForSubUrl: false,
|
||||
});
|
||||
await testSubjects.click('settings');
|
||||
await a11y.testAppSnapshot();
|
||||
});
|
||||
|
||||
// clicking on the top search bar
|
||||
it('adv settings - search ', async () => {
|
||||
await testSubjects.click('settingsSearchBar');
|
||||
await a11y.testAppSnapshot();
|
||||
});
|
||||
|
||||
// clicking on the category dropdown
|
||||
it('adv settings - category -dropdown ', async () => {
|
||||
await testSubjects.click('settingsSearchBar');
|
||||
await a11y.testAppSnapshot();
|
||||
});
|
||||
|
||||
// clicking on the toggle button
|
||||
it('adv settings - toggle ', async () => {
|
||||
await testSubjects.click('advancedSetting-editField-csv:quoteValues');
|
||||
await a11y.testAppSnapshot();
|
||||
});
|
||||
|
||||
// clicking on editor panel
|
||||
it('adv settings - edit ', async () => {
|
||||
await testSubjects.click('advancedSetting-editField-csv:separator');
|
||||
await a11y.testAppSnapshot();
|
||||
});
|
||||
|
||||
// clicking on save button
|
||||
it('adv settings - save', async () => {
|
||||
await testSubjects.click('advancedSetting-saveButton');
|
||||
await a11y.testAppSnapshot();
|
||||
});
|
||||
});
|
||||
}
|
|
@ -21,6 +21,7 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) {
|
|||
require.resolve('./apps/search_profiler'),
|
||||
require.resolve('./apps/uptime'),
|
||||
require.resolve('./apps/spaces'),
|
||||
require.resolve('./apps/advanced_settings'),
|
||||
require.resolve('./apps/dashboard_edit_panel'),
|
||||
],
|
||||
|
||||
|
|
Loading…
Reference in a new issue