From a07583bafa9e9fd670894f9acc1132d79eb2cc4f Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Tue, 3 Dec 2024 04:25:14 +1100
Subject: [PATCH] [8.x] fix: [Search:AppSearch:Engines:Documents page]Customize
 document search modal dialog missing title from announcement (#202452)
 (#202510)

# Backport

This will backport the following commits from `main` to `8.x`:
- [fix: [Search:AppSearch:Engines:Documents page]Customize document
search modal dialog missing title from announcement
(#202452)](https://github.com/elastic/kibana/pull/202452)

<!--- 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-02T15:27:03Z","message":"fix:
[Search:AppSearch:Engines:Documents page]Customize document search modal
dialog missing title from announcement (#202452)\n\nCloses:
#202427\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<img width=\"1135\"
alt=\"Screenshot 2024-12-02 at 14 43
16\"\r\nsrc=\"https://github.com/user-attachments/assets/ce319c22-1ae9-49e1-99e1-7670e5d97993\">","sha":"6b7d6478b09fbdd1283759d37a024add1cea8217","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:Documents page]Customize document search modal
dialog missing title from
announcement","number":202452,"url":"https://github.com/elastic/kibana/pull/202452","mergeCommit":{"message":"fix:
[Search:AppSearch:Engines:Documents page]Customize document search modal
dialog missing title from announcement (#202452)\n\nCloses:
#202427\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<img width=\"1135\"
alt=\"Screenshot 2024-12-02 at 14 43
16\"\r\nsrc=\"https://github.com/user-attachments/assets/ce319c22-1ae9-49e1-99e1-7670e5d97993\">","sha":"6b7d6478b09fbdd1283759d37a024add1cea8217"}},"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/202452","number":202452,"mergeCommit":{"message":"fix:
[Search:AppSearch:Engines:Documents page]Customize document search modal
dialog missing title from announcement (#202452)\n\nCloses:
#202427\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<img width=\"1135\"
alt=\"Screenshot 2024-12-02 at 14 43
16\"\r\nsrc=\"https://github.com/user-attachments/assets/ce319c22-1ae9-49e1-99e1-7670e5d97993\">","sha":"6b7d6478b09fbdd1283759d37a024add1cea8217"}}]}]
BACKPORT-->

Co-authored-by: Alexey Antonov <alexwizp@gmail.com>
---
 .../search_experience/customization_modal.tsx         | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/customization_modal.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/customization_modal.tsx
index 299a840cf8919..779158ae1e114 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/customization_modal.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/documents/search_experience/customization_modal.tsx
@@ -20,6 +20,7 @@ import {
   EuiModalFooter,
   EuiModalHeader,
   EuiModalHeaderTitle,
+  useGeneratedHtmlId,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
@@ -44,6 +45,7 @@ export const CustomizationModal: React.FC<Props> = ({
   sortFields,
 }) => {
   const { engine } = useValues(EngineLogic);
+  const modalTitleId = useGeneratedHtmlId();
 
   const [selectedFilterFields, setSelectedFilterFields] = useState(
     filterFields.map(fieldNameToComboBoxOption)
@@ -69,9 +71,9 @@ export const CustomizationModal: React.FC<Props> = ({
   );
 
   return (
-    <EuiModal onClose={onClose}>
+    <EuiModal onClose={onClose} aria-labelledby={modalTitleId}>
       <EuiModalHeader>
-        <EuiModalHeaderTitle>
+        <EuiModalHeaderTitle id={modalTitleId}>
           {i18n.translate(
             'xpack.enterpriseSearch.appSearch.documents.search.customizationModal.title',
             {
@@ -132,8 +134,11 @@ export const CustomizationModal: React.FC<Props> = ({
         </EuiForm>
       </EuiModalBody>
       <EuiModalFooter>
-        <EuiButtonEmpty onClick={onClose}>{CANCEL_BUTTON_LABEL}</EuiButtonEmpty>
+        <EuiButtonEmpty data-test-subj="enterpriseSearchCustomizationModalButton" onClick={onClose}>
+          {CANCEL_BUTTON_LABEL}
+        </EuiButtonEmpty>
         <EuiButton
+          data-test-subj="enterpriseSearchCustomizationModalButton"
           fill
           onClick={() => {
             onSave({