From 445af746526304177b4ff864a4fe14c44f6a12ca Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Wed, 11 Dec 2024 17:42:49 +0200
Subject: [PATCH] fix: [Search:Behavioral Analytics page]Manage queries modal
 dialog missing title from announcement (#202705)

Closes: #201925

**Description**
Dialog modal visible title should be announced for the users, especially
using assistive technology to know what dialog modal, flyout opened.

**Preconditions**
Stateful Behavioral Analytics page is opened.
Use Screen Reader (NVDA).

**Steps to reproduce**

1.Using only keyboard navigate to Create collection button by pressing
Tab key.
2.Press Enter.
3.Observe screen reader.

## Changes made:

1. aria-labelledby={modalTitleId} attribute was added for mentioned
EuiModal

(cherry picked from commit acf0b35c4fb44678983ed1d2528287f91f5e82d4)
---
 .../add_analytics_collection_modal.tsx                        | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/analytics/components/add_analytics_collections/add_analytics_collection_modal.tsx b/x-pack/plugins/enterprise_search/public/applications/analytics/components/add_analytics_collections/add_analytics_collection_modal.tsx
index a13fd20760c11..c907ab326c774 100644
--- a/x-pack/plugins/enterprise_search/public/applications/analytics/components/add_analytics_collections/add_analytics_collection_modal.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/analytics/components/add_analytics_collections/add_analytics_collection_modal.tsx
@@ -41,6 +41,7 @@ export const AddAnalyticsCollectionModal: React.FC<AddAnalyticsCollectionModalPr
 }) => {
   const { isLoading, isSuccess, isSystemError, canSubmit } = useValues(AddAnalyticsCollectionLogic);
   const modalFormId = useGeneratedHtmlId({ prefix: 'createAnalyticsCollection' });
+  const modalTitleId = useGeneratedHtmlId({ prefix: 'modalTitleId' });
 
   useEffect(() => {
     if (isSuccess || isSystemError) {
@@ -52,11 +53,12 @@ export const AddAnalyticsCollectionModal: React.FC<AddAnalyticsCollectionModalPr
     <EuiModal
       onClose={onClose}
       maxWidth={minModalWidth}
+      aria-labelledby={modalTitleId}
       initialFocus={`[name=${collectionNameField}]`}
     >
       <EuiModalHeader>
         <EuiFlexItem>
-          <EuiModalHeaderTitle>
+          <EuiModalHeaderTitle id={modalTitleId}>
             {i18n.translate('xpack.enterpriseSearch.analytics.collectionsCreate.form.title', {
               defaultMessage: 'Name your Collection',
             })}