From 77267fdb5fcf1ba248da10b8317c850c927411d0 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Thu, 12 Dec 2024 04:58:49 +1100
Subject: [PATCH] [8.x] fix: [Search:AppSearch:Engines:Synonyms page]Manage and
 Add synonym set modal dialogs missing title from announcement (#202326)
 (#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
(#202326)](https://github.com/elastic/kibana/pull/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":"alexwizp@gmail.com"},"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 (#202326)\n\nCloses:
#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 (#202326)\n\nCloses:
#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 (#202326)\n\nCloses:
#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 <alexwizp@gmail.com>
---
 .../synonyms/components/synonym_modal.tsx           | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/synonyms/components/synonym_modal.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/synonyms/components/synonym_modal.tsx
index 93dbc9cea4447..ed3274112db9e 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/synonyms/components/synonym_modal.tsx
+++ b/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