fix: accessibility

elastic · Feb 20, 2020 · b657eb3 · b657eb3
1 parent 462577f
commit b657eb3
Showing 1 changed file with 14 additions and 9 deletions.
diff --git a/src/plugins/advanced_settings/public/management_app/components/field/field.tsx b/src/plugins/advanced_settings/public/management_app/components/field/field.tsx
@@ -27,6 +27,7 @@ import {
   EuiBadge,
   EuiCode,
   EuiCodeBlock,
+  EuiScreenReaderOnly,
   // @ts-ignore
   EuiCodeEditor,
   EuiDescribedFormGroup,
@@ -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}
@@ -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>
+        )}
       </h3>
     );
   }
@@ -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
       >