[8.x] fix: [Search:AppSearch:Engines:Synonyms page]Manage and Add syn…

…onym set modal dialogs missing title from announcement (elastic#202326) (elastic#203834)

# Backport

This will backport the following commits from `main` to `8.x`:
- [fix: [Search:AppSearch:Engines:Synonyms page]Manage and Add synonym
set modal dialogs missing title from announcement
(elastic#202326)](elastic#202326)

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

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

<!--BACKPORT [{"author":{"name":"Alexey
Antonov","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-12-11T16:05:02Z","message":"fix:
[Search:AppSearch:Engines:Synonyms page]Manage and Add synonym set modal
dialogs missing title from announcement (elastic#202326)\n\nCloses:
elastic#202268\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## Changes made:\r\n\r\n1.
aria-labelledby={modalTitleId} attribute was added for
mentioned\r\nEuiModal\r\n\r\n# Screen\r\n\r\n<img width=\"962\"
alt=\"Screenshot 2024-11-29 at 16 24
15\"\r\nsrc=\"https://github.com/user-attachments/assets/50f41305-8f68-4f0b-866f-3f37da2cbcc9\">","sha":"fb028b4fba043a90879ef7903489d3518b6272cd","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:prev-minor"],"title":"fix:
[Search:AppSearch:Engines:Synonyms page]Manage and Add synonym set modal
dialogs missing title from
announcement","number":202326,"url":"https://github.com/elastic/kibana/pull/202326","mergeCommit":{"message":"fix:
[Search:AppSearch:Engines:Synonyms page]Manage and Add synonym set modal
dialogs missing title from announcement (elastic#202326)\n\nCloses:
elastic#202268\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## Changes made:\r\n\r\n1.
aria-labelledby={modalTitleId} attribute was added for
mentioned\r\nEuiModal\r\n\r\n# Screen\r\n\r\n<img width=\"962\"
alt=\"Screenshot 2024-11-29 at 16 24
15\"\r\nsrc=\"https://github.com/user-attachments/assets/50f41305-8f68-4f0b-866f-3f37da2cbcc9\">","sha":"fb028b4fba043a90879ef7903489d3518b6272cd"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/202326","number":202326,"mergeCommit":{"message":"fix:
[Search:AppSearch:Engines:Synonyms page]Manage and Add synonym set modal
dialogs missing title from announcement (elastic#202326)\n\nCloses:
elastic#202268\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## Changes made:\r\n\r\n1.
aria-labelledby={modalTitleId} attribute was added for
mentioned\r\nEuiModal\r\n\r\n# Screen\r\n\r\n<img width=\"962\"
alt=\"Screenshot 2024-11-29 at 16 24
15\"\r\nsrc=\"https://github.com/user-attachments/assets/50f41305-8f68-4f0b-866f-3f37da2cbcc9\">","sha":"fb028b4fba043a90879ef7903489d3518b6272cd"}}]}]
BACKPORT-->

Co-authored-by: Alexey Antonov <[email protected]>

x-pack/plugins/enterprise_search/public/applications/app_search/components/synonyms/components/synonym_modal.tsx

@@ -19,6 +19,7 @@ import {
   EuiFlexItem,
   EuiButton,
   EuiButtonEmpty,
+  useGeneratedHtmlId,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
@@ -37,6 +38,7 @@ export const SynonymModal: React.FC = () => {
   const { isModalOpen, modalLoading, activeSynonymSet } = useValues(SynonymsLogic);
   const { closeModal, createSynonymSet, updateSynonymSet, deleteSynonymSet } =
     useActions(SynonymsLogic);
+  const modalTitleId = useGeneratedHtmlId();
 
   const modalTitle = activeSynonymSet ? SYNONYM_UPDATE_TITLE : SYNONYM_CREATE_TITLE;
   const id = activeSynonymSet?.id || 'createNewSynonymSet';
@@ -46,9 +48,9 @@ export const SynonymModal: React.FC = () => {
     : (newSynonyms: string[]) => createSynonymSet(newSynonyms);
 
   return isModalOpen ? (
-    <EuiModal onClose={closeModal}>
+    <EuiModal onClose={closeModal} aria-labelledby={modalTitleId}>
       <EuiModalHeader>
-        <EuiModalHeaderTitle>{modalTitle}</EuiModalHeaderTitle>
+        <EuiModalHeaderTitle id={modalTitleId}>{modalTitle}</EuiModalHeaderTitle>
       </EuiModalHeader>
       <FlashMessages />
       <EuiModalBody>
@@ -82,7 +84,12 @@ export const SynonymModal: React.FC = () => {
             )}
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty onClick={closeModal}>{CANCEL_BUTTON_LABEL}</EuiButtonEmpty>
+            <EuiButtonEmpty
+              data-test-subj="enterpriseSearchSynonymModalButton"
+              onClick={closeModal}
+            >
+              {CANCEL_BUTTON_LABEL}
+            </EuiButtonEmpty>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiButton