Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Advanced settings UI change to centralize save state #53693

Merged
merged 27 commits into from
Feb 24, 2020
Merged

Advanced settings UI change to centralize save state #53693

Changes from 1 commit
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
00fb9c0
feat: centralize advanced settings dirty state
mbondyra Jan 20, 2020
7b53665
fix: types fix
mbondyra Feb 12, 2020
c63e077
Merge branch 'master' into IS-27405_improve-advanced-settings-save
mbondyra Feb 12, 2020
16c5d8f
refactor: don't use lodash function
mbondyra Feb 12, 2020
88b349b
fix: hidden settings saved
mbondyra Feb 12, 2020
eed6aaa
test: corrected for form
mbondyra Feb 12, 2020
7d8d078
Merge branch 'master' into IS-27405_improve-advanced-settings-save
elasticmachine Feb 12, 2020
b9d1d18
Fixing bottom bar position based on NavDrawer and locked status
Feb 12, 2020
d6144a7
Removing `idAria` and updating snaps
Feb 12, 2020
d806bc4
test: mock localStorage
mbondyra Feb 13, 2020
a922733
Merge branch 'master' into IS-27405_improve-advanced-settings-save
mbondyra Feb 13, 2020
2fd4de6
fix: fix tests
mbondyra Feb 13, 2020
3f87057
feat: addressing accessibility review
mbondyra Feb 14, 2020
2551a3e
Merge branch 'master' into IS-27405_improve-advanced-settings-save
mbondyra Feb 14, 2020
a6d4f3d
Update src/plugins/advanced_settings/public/management_app/components…
mbondyra Feb 14, 2020
0c3e567
Merge branch 'master' into IS-27405_improve-advanced-settings-save
mbondyra Feb 20, 2020
462577f
refactor: code review
mbondyra Feb 20, 2020
b657eb3
fix: accessibility
mbondyra Feb 20, 2020
2ffa278
Merge commit '02efb01c481f9f24d8d707f06dfc68b2fb805001' into IS-27405…
mbondyra Feb 21, 2020
3fae234
fix: accesssibility again
mbondyra Feb 21, 2020
493d712
feat: mobile
mbondyra Feb 22, 2020
e5802f7
Merge commit '98aa1d2d4f974f72a9a5397b1b91f11509f6fb7a' into IS-27405…
mbondyra Feb 22, 2020
ad5834e
a11y: don't pass id not necesserilly
mbondyra Feb 22, 2020
47b3d61
fix~: remove parenthesis
mbondyra Feb 22, 2020
d1a3e8b
Merge branch 'master' into IS-27405_improve-advanced-settings-save
elasticmachine Feb 22, 2020
6cd2486
Merge branch 'master' into IS-27405_improve-advanced-settings-save
elasticmachine Feb 23, 2020
917e74e
Merge branch 'master' into IS-27405_improve-advanced-settings-save
elasticmachine Feb 24, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 14 additions & 9 deletions src/plugins/advanced_settings/public/management_app/components/field/field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
EuiBadge,
EuiCode,
EuiCodeBlock,
EuiScreenReaderOnly,
// @ts-ignore
EuiCodeEditor,
EuiDescribedFormGroup,
Expand Down Expand Up @@ -442,7 +443,7 @@ export class Field extends PureComponent<FieldProps> {
return null;
}

renderTitle(setting: FieldSetting) {
renderTitle(setting: FieldSetting, unsavedChanges: FieldState | undefined) {
return (
<h3>
{setting.displayName || setting.name}
Expand All @@ -463,6 +464,17 @@ export class Field extends PureComponent<FieldProps> {
) : (
''
)}
{unsavedChanges && (
<EuiScreenReaderOnly>
<p>
{unsavedChanges.error
? unsavedChanges.error
: i18n.translate('advancedSettings.field.settingIsUnsaved', {
defaultMessage: 'Setting is currently not saved.',
})}
</p>
</EuiScreenReaderOnly>
)}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately this doesn't work because of the way that EUI renders forms at the moment (I opened a bug for it elastic/eui#2888).

I tried a few different things and the thing that I thought worked best was moving this from the renderTitle function to the renderField function.

For each field, add an aria-describedby="{uniqueID}". Then, in the render function, right after the {this.renderField(setting)} line, you can put all this stuff with the same uniqueId on the <p>.

Can talk through it more tomorrow!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@myasonik I corrected the code according to your comments. That, however adds aria-describedby to every element, even the ones that don't have relative <p> element. Is this ok?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

aria-describedby should always point to a real id that exists on the page.

The contents can be empty though.

Does that make sense?

</h3>
);
}
Expand Down Expand Up @@ -635,15 +647,8 @@ export class Field extends PureComponent<FieldProps> {

return (
<EuiDescribedFormGroup
aria-describedby={
unsavedChanges
? i18n.translate('advancedSettings.field.settingIsUnsaved', {
defaultMessage: 'Setting is currently not saved.',
})
: undefined
}
className={className}
title={this.renderTitle(setting)}
title={this.renderTitle(setting, unsavedChanges)}
description={this.renderDescription(setting)}
fullWidth
>
Expand Down