maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Accessibility tests for Stack management > advanced settings page (#78102)

Browse source 
* 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:
Rashmi Kulkarni 2020-09-29 12:54:22 -07:00 committed by GitHub
parent c2ef407d04
commit f27b6fef19
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 178 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/core/public/notifications/toasts/__snapshots__/global_toast_list.test.tsx.snap generated
View file

@ -2,6 +2,7 @@
exports[`renders matching snapshot 1`] = `
<EuiGlobalToastList
aria-label="Notification message list"
data-test-subj="globalToastList"
dismissToast={[Function]}
side="right"

4
src/core/public/notifications/toasts/global_toast_list.tsx
View file

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

7
src/plugins/advanced_settings/public/management_app/components/advanced_settings_voice_announcement/__snapshots__/advanced_settings_voice_announcement.test.tsx.snap generated
View file

@ -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
src/plugins/advanced_settings/public/management_app/components/advanced_settings_voice_announcement/advanced_settings_voice_announcement.tsx
View file

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

146
src/plugins/advanced_settings/public/management_app/components/field/__snapshots__/field.test.tsx.snap generated
View file

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

18
src/plugins/advanced_settings/public/management_app/components/field/field.tsx
View file

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

4
src/plugins/management/public/components/management_app_wrapper/management_app_wrapper.tsx
View file

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

1
x-pack/test/accessibility/config.ts
View file

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