fix: [Search:SearchApplications:Connect page]Missing modal dialog tit…

…le from announcement (elastic#199738)

Closes: elastic#199627

## Description
Titles for the dialogs are announced for the users, that users using
assistive technology would know that the dialog opened and what dialog
opened.

## What was changed?:

1. `aria-labelledby={modalTitleId}` was added. See
https://eui.elastic.co/#/layout/modal for details

## Screen: 

<img width="1289" alt="Screenshot 2024-11-12 at 11 35 28"
src="https://github.com/user-attachments/assets/ab3e1764-6617-4f50-82de-d6565a0e9c73">

x-pack/plugins/enterprise_search/public/applications/applications/components/search_application/connect/generate_api_key_modal/generate_search_application_api_key_modal.tsx

@@ -26,6 +26,7 @@ import {
   EuiText,
   EuiCallOut,
   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);
   const copyApiKeyRef = useRef<HTMLAnchorElement>(null);
 
@@ -59,9 +61,9 @@ export const GenerateSearchApplicationApiKeyModal: React.FC<
   }, [isSuccess]);
 
   return (
-    <EuiModal onClose={onClose}>
+    <EuiModal onClose={onClose} aria-labelledby={modalTitleId}>
       <EuiModalHeader>
-        <EuiModalHeaderTitle>
+        <EuiModalHeaderTitle id={modalTitleId}>
           {i18n.translate(
             'xpack.enterpriseSearch.searchApplication.searchApplication.api.generateApiKeyModal.title',
             {