fix: [Search:AppSearch:Engines:Schema page]Add a new field modal dial…

…og missing title from announcement (elastic#201786)

Closes: elastic#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 <[email protected]>

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"