From 70cbb68bc1f4d68b074729eeba95231657d2e207 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Wed, 13 Nov 2024 08:18:21 +1100
Subject: [PATCH] [8.x] fix: [Search:SearchApplications:Connect page]Missing
 modal dialog title from announcement (#199738) (#199870)

# Backport

This will backport the following commits from `main` to `8.x`:
- [fix: [Search:SearchApplications:Connect page]Missing modal dialog
title from announcement
(#199738)](https://github.com/elastic/kibana/pull/199738)

<!--- 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-12T19:28:33Z","message":"fix:
[Search:SearchApplications:Connect page]Missing modal dialog title from
announcement (#199738)\n\nCloses: #199627\r\n\r\n##
Description\r\nTitles for the dialogs are announced for the users, that
users using\r\nassistive technology would know that the dialog opened
and what dialog\r\nopened.\r\n\r\n## What was changed?:\r\n\r\n1.
`aria-labelledby={modalTitleId}` was added.
See\r\nhttps://eui.elastic.co/#/layout/modal for details\r\n\r\n##
Screen: \r\n\r\n<img width=\"1289\" alt=\"Screenshot 2024-11-12 at 11 35
28\"\r\nsrc=\"https://github.com/user-attachments/assets/ab3e1764-6617-4f50-82de-d6565a0e9c73\">","sha":"7fce0f0b2a91a3f384dbbb097d4de93fa00cf62e","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.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:SearchApplications:Connect page]Missing modal dialog title from
announcement","number":199738,"url":"https://github.com/elastic/kibana/pull/199738","mergeCommit":{"message":"fix:
[Search:SearchApplications:Connect page]Missing modal dialog title from
announcement (#199738)\n\nCloses: #199627\r\n\r\n##
Description\r\nTitles for the dialogs are announced for the users, that
users using\r\nassistive technology would know that the dialog opened
and what dialog\r\nopened.\r\n\r\n## What was changed?:\r\n\r\n1.
`aria-labelledby={modalTitleId}` was added.
See\r\nhttps://eui.elastic.co/#/layout/modal for details\r\n\r\n##
Screen: \r\n\r\n<img width=\"1289\" alt=\"Screenshot 2024-11-12 at 11 35
28\"\r\nsrc=\"https://github.com/user-attachments/assets/ab3e1764-6617-4f50-82de-d6565a0e9c73\">","sha":"7fce0f0b2a91a3f384dbbb097d4de93fa00cf62e"}},"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/199738","number":199738,"mergeCommit":{"message":"fix:
[Search:SearchApplications:Connect page]Missing modal dialog title from
announcement (#199738)\n\nCloses: #199627\r\n\r\n##
Description\r\nTitles for the dialogs are announced for the users, that
users using\r\nassistive technology would know that the dialog opened
and what dialog\r\nopened.\r\n\r\n## What was changed?:\r\n\r\n1.
`aria-labelledby={modalTitleId}` was added.
See\r\nhttps://eui.elastic.co/#/layout/modal for details\r\n\r\n##
Screen: \r\n\r\n<img width=\"1289\" alt=\"Screenshot 2024-11-12 at 11 35
28\"\r\nsrc=\"https://github.com/user-attachments/assets/ab3e1764-6617-4f50-82de-d6565a0e9c73\">","sha":"7fce0f0b2a91a3f384dbbb097d4de93fa00cf62e"}}]}]
BACKPORT-->

Co-authored-by: Alexey Antonov <alexwizp@gmail.com>
---
 .../generate_search_application_api_key_modal.tsx           | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/enterprise_search/public/applications/applications/components/search_application/connect/generate_api_key_modal/generate_search_application_api_key_modal.tsx b/x-pack/plugins/enterprise_search/public/applications/applications/components/search_application/connect/generate_api_key_modal/generate_search_application_api_key_modal.tsx
index 806b37d809186..33abcbde10fc9 100644
--- a/x-pack/plugins/enterprise_search/public/applications/applications/components/search_application/connect/generate_api_key_modal/generate_search_application_api_key_modal.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/applications/components/search_application/connect/generate_api_key_modal/generate_search_application_api_key_modal.tsx
@@ -27,6 +27,7 @@ import {
   EuiSpacer,
   EuiFormLabel,
   EuiCodeBlock,
+  useGeneratedHtmlId,
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
@@ -45,6 +46,7 @@ export const GenerateSearchApplicationApiKeyModal: React.FC<
 > = ({ onClose, searchApplicationName }) => {
   const { keyName, apiKey, isLoading, isSuccess } = useValues(GenerateApiKeyModalLogic);
   const { setKeyName } = useActions(GenerateApiKeyModalLogic);
+  const modalTitleId = useGeneratedHtmlId();
   const { makeRequest } = useActions(GenerateSearchApplicationApiKeyLogic);
 
   useEffect(() => {
@@ -52,9 +54,9 @@ export const GenerateSearchApplicationApiKeyModal: React.FC<
   }, [searchApplicationName]);
 
   return (
-    <EuiModal onClose={onClose}>
+    <EuiModal onClose={onClose} aria-labelledby={modalTitleId}>
       <EuiModalHeader>
-        <EuiModalHeaderTitle>
+        <EuiModalHeaderTitle id={modalTitleId}>
           {i18n.translate(
             'xpack.enterpriseSearch.searchApplication.searchApplication.api.generateApiKeyModal.title',
             {