From 8386582c38f14eab4719135803384908105b0cd2 Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Wed, 27 Nov 2024 16:18:48 +0200
Subject: [PATCH] fix: [Search:AppSearch:Engines:Schema page]Add a new field
 modal dialog missing title from announcement (#201786)

Closes: #201338

## Description
Dialog modal visible title should be announced for the users, especially
using assistive technology to know what dialog modal, flyout opened.

## What was changed?:

1. aria-labelledby={modalTitleId} attribute was added for mentioned
EuiModal

# Screen
<img width="1330" alt="Screenshot 2024-11-26 at 15 40 20"
src="https://github.com/user-attachments/assets/dc5fd6e3-eaad-43c4-9f56-0eb8644789ae">

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
(cherry picked from commit 87af12d21def2ff03e47d0df59b28dfa11436fa8)
---
 .../shared/schema/add_field_modal/index.tsx        | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/schema/add_field_modal/index.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/schema/add_field_modal/index.tsx
index 32191abbbae21..b717de04d21da 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/schema/add_field_modal/index.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/schema/add_field_modal/index.tsx
@@ -22,6 +22,7 @@ import {
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiSpacer,
+  useGeneratedHtmlId,
 } from '@elastic/eui';
 
 import { SchemaFieldTypeSelect } from '..';
@@ -78,10 +79,12 @@ export const SchemaAddFieldModal: React.FC<Props> = ({
       ? FIELD_NAME_CORRECTED_NOTE(formattedFieldName)
       : FIELD_NAME_CORRECT_NOTE;
 
+  const modalTitleId = useGeneratedHtmlId();
+
   return (
-    <EuiModal onClose={closeAddFieldModal} maxWidth={500}>
+    <EuiModal onClose={closeAddFieldModal} maxWidth={500} aria-labelledby={modalTitleId}>
       <EuiModalHeader>
-        <EuiModalHeaderTitle>{ADD_FIELD_MODAL_TITLE}</EuiModalHeaderTitle>
+        <EuiModalHeaderTitle id={modalTitleId}>{ADD_FIELD_MODAL_TITLE}</EuiModalHeaderTitle>
       </EuiModalHeader>
       <EuiModalBody>
         <EuiCallOut
@@ -130,7 +133,12 @@ export const SchemaAddFieldModal: React.FC<Props> = ({
         </EuiForm>
       </EuiModalBody>
       <EuiModalFooter>
-        <EuiButtonEmpty onClick={closeAddFieldModal}>{CANCEL_BUTTON_LABEL}</EuiButtonEmpty>
+        <EuiButtonEmpty
+          data-test-subj="enterpriseSearchSchemaAddFieldModalButton"
+          onClick={closeAddFieldModal}
+        >
+          {CANCEL_BUTTON_LABEL}
+        </EuiButtonEmpty>
         <EuiButton
           fill
           type="submit"