From 13397382dbce1416d594f90916177288c49d9228 Mon Sep 17 00:00:00 2001
From: Michail Yasonik <michail.yasonik@elastic.co>
Date: Tue, 8 Oct 2019 17:26:21 +0530
Subject: [PATCH] Read warning to screen readers for duplicate saved objects

---
 .../saved_objects/saved_object_save_modal.tsx | 77 +++++++++++--------
 1 file changed, 45 insertions(+), 32 deletions(-)

diff --git a/src/plugins/kibana_react/public/saved_objects/saved_object_save_modal.tsx b/src/plugins/kibana_react/public/saved_objects/saved_object_save_modal.tsx
index 953fbbf348b95..e1e7f1c536342 100644
--- a/src/plugins/kibana_react/public/saved_objects/saved_object_save_modal.tsx
+++ b/src/plugins/kibana_react/public/saved_objects/saved_object_save_modal.tsx
@@ -17,6 +17,7 @@
  * under the License.
  */
 import {
+  htmlIdGenerator,
   EuiButton,
   EuiButtonEmpty,
   EuiCallOut,
@@ -67,7 +68,10 @@ interface State {
   visualizationDescription: string;
 }
 
+const generateId = htmlIdGenerator();
+
 export class SavedObjectSaveModal extends React.Component<Props, State> {
+  private warning = React.createRef<HTMLDivElement>();
   public readonly state = {
     title: this.props.title,
     copyOnSave: false,
@@ -79,6 +83,7 @@ export class SavedObjectSaveModal extends React.Component<Props, State> {
 
   public render() {
     const { isTitleDuplicateConfirmed, hasTitleDuplicate, title } = this.state;
+    const duplicateWarningId = generateId();
 
     return (
       <EuiOverlayMask>
@@ -99,7 +104,7 @@ export class SavedObjectSaveModal extends React.Component<Props, State> {
             </EuiModalHeader>
 
             <EuiModalBody>
-              {this.renderDuplicateTitleCallout()}
+              {this.renderDuplicateTitleCallout(duplicateWarningId)}
 
               <EuiForm>
                 {this.props.objectType !== VISUALIZE_EMBEDDABLE_TYPE && this.props.description && (
@@ -127,6 +132,7 @@ export class SavedObjectSaveModal extends React.Component<Props, State> {
                     isInvalid={
                       (!isTitleDuplicateConfirmed && hasTitleDuplicate) || title.length === 0
                     }
+                    aria-describedby={this.state.hasTitleDuplicate ? duplicateWarningId : undefined}
                   />
                 </EuiFormRow>
 
@@ -188,6 +194,10 @@ export class SavedObjectSaveModal extends React.Component<Props, State> {
       isTitleDuplicateConfirmed: true,
       hasTitleDuplicate: true,
     });
+
+    if (this.warning.current) {
+      this.warning.current.focus();
+    }
   };
 
   private saveSavedObject = async () => {
@@ -255,43 +265,46 @@ export class SavedObjectSaveModal extends React.Component<Props, State> {
     );
   };
 
-  private renderDuplicateTitleCallout = () => {
+  private renderDuplicateTitleCallout = (duplicateWarningId: string) => {
     if (!this.state.hasTitleDuplicate) {
       return;
     }
 
     return (
       <>
-        <EuiCallOut
-          title={
-            <FormattedMessage
-              id="kibana-react.savedObjects.saveModal.duplicateTitleLabel"
-              defaultMessage="A {objectType} with the title '{title}' already exists"
-              values={{ objectType: this.props.objectType, title: this.state.title }}
-            />
-          }
-          color="warning"
-          data-test-subj="titleDupicateWarnMsg"
-        >
-          <p>
-            <FormattedMessage
-              id="kibana-react.savedObjects.saveModal.duplicateTitleDescription"
-              defaultMessage="Clicking {confirmSaveLabel} overwrites the existing {objectType}."
-              values={{
-                objectType: this.props.objectType,
-                confirmSaveLabel: (
-                  <strong>
-                    {this.props.confirmButtonLabel
-                      ? this.props.confirmButtonLabel
-                      : i18n.translate('kibana-react.savedObjects.saveModal.saveButtonLabel', {
-                          defaultMessage: 'Save',
-                        })}
-                  </strong>
-                ),
-              }}
-            />
-          </p>
-        </EuiCallOut>
+        <div ref={this.warning} tabIndex={-1}>
+          <EuiCallOut
+            title={
+              <FormattedMessage
+                id="kibana-react.savedObjects.saveModal.duplicateTitleLabel"
+                defaultMessage="A {objectType} with the title '{title}' already exists"
+                values={{ objectType: this.props.objectType, title: this.state.title }}
+              />
+            }
+            color="warning"
+            data-test-subj="titleDupicateWarnMsg"
+            id={duplicateWarningId}
+          >
+            <p>
+              <FormattedMessage
+                id="kibana-react.savedObjects.saveModal.duplicateTitleDescription"
+                defaultMessage="Clicking {confirmSaveLabel} overwrites the existing {objectType}."
+                values={{
+                  objectType: this.props.objectType,
+                  confirmSaveLabel: (
+                    <strong>
+                      {this.props.confirmButtonLabel
+                        ? this.props.confirmButtonLabel
+                        : i18n.translate('kibana-react.savedObjects.saveModal.saveButtonLabel', {
+                            defaultMessage: 'Save',
+                          })}
+                    </strong>
+                  ),
+                }}
+              />
+            </p>
+          </EuiCallOut>
+        </div>
         <EuiSpacer />
       </>
     );