[8.x] fix: [Search:AppSearch:Engines:Schema page]Add a new field moda…

…l dialog missing title from announcement (#201786) (#201996)

# Backport

This will backport the following commits from `main` to `8.x`:
- [fix: [Search:AppSearch:Engines:Schema page]Add a new field modal
dialog missing title from announcement
(#201786)](#201786)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Alexey
Antonov","email":"alexwizp@gmail.com"},"sourceCommit":{"committedDate":"2024-11-27T14:18:48Z","message":"fix:
[Search:AppSearch:Engines:Schema page]Add a new field modal dialog
missing title from announcement (#201786)\n\nCloses: #201338\r\n\r\n##
Description\r\nDialog modal visible title should be announced for the
users, especially\r\nusing assistive technology to know what dialog
modal, flyout opened.\r\n\r\n## What was changed?:\r\n\r\n1.
aria-labelledby={modalTitleId} attribute was added for
mentioned\r\nEuiModal\r\n\r\n# Screen\r\n<img width=\"1330\"
alt=\"Screenshot 2024-11-26 at 15 40
20\"\r\nsrc=\"https://github.com/user-attachments/assets/dc5fd6e3-eaad-43c4-9f56-0eb8644789ae\">\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"87af12d21def2ff03e47d0df59b28dfa11436fa8","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility","release_note:skip","v9.0.0","Team:Search","backport:version","v8.17.0","v8.18.0"],"title":"fix:
[Search:AppSearch:Engines:Schema page]Add a new field modal dialog
missing title from
announcement","number":201786,"url":"https://github.com/elastic/kibana/pull/201786","mergeCommit":{"message":"fix:
[Search:AppSearch:Engines:Schema page]Add a new field modal dialog
missing title from announcement (#201786)\n\nCloses: #201338\r\n\r\n##
Description\r\nDialog modal visible title should be announced for the
users, especially\r\nusing assistive technology to know what dialog
modal, flyout opened.\r\n\r\n## What was changed?:\r\n\r\n1.
aria-labelledby={modalTitleId} attribute was added for
mentioned\r\nEuiModal\r\n\r\n# Screen\r\n<img width=\"1330\"
alt=\"Screenshot 2024-11-26 at 15 40
20\"\r\nsrc=\"https://github.com/user-attachments/assets/dc5fd6e3-eaad-43c4-9f56-0eb8644789ae\">\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"87af12d21def2ff03e47d0df59b28dfa11436fa8"}},"sourceBranch":"main","suggestedTargetBranches":["8.17","8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/201786","number":201786,"mergeCommit":{"message":"fix:
[Search:AppSearch:Engines:Schema page]Add a new field modal dialog
missing title from announcement (#201786)\n\nCloses: #201338\r\n\r\n##
Description\r\nDialog modal visible title should be announced for the
users, especially\r\nusing assistive technology to know what dialog
modal, flyout opened.\r\n\r\n## What was changed?:\r\n\r\n1.
aria-labelledby={modalTitleId} attribute was added for
mentioned\r\nEuiModal\r\n\r\n# Screen\r\n<img width=\"1330\"
alt=\"Screenshot 2024-11-26 at 15 40
20\"\r\nsrc=\"https://github.com/user-attachments/assets/dc5fd6e3-eaad-43c4-9f56-0eb8644789ae\">\r\n\r\n---------\r\n\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"87af12d21def2ff03e47d0df59b28dfa11436fa8"}},{"branch":"8.17","label":"v8.17.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.x","label":"v8.18.0","branchLabelMappingKey":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Alexey Antonov <alexwizp@gmail.com>

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"