fix: [Security:Get Started page]Modal dialogs for AI assistants missing title from announcement (#205391)

Closes: #204206

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

## Changes made: 

1. The `aria-labelledby` attribute has been added for the mentioned
EuiModal. This change is recommended by the EUI team, see:
https://eui.elastic.co/#/layout/modal for more details

## Screen

<img width="1652" alt="image"
src="https://github.com/user-attachments/assets/28ee1893-3a1e-4a01-af4d-c67b841c12bc"
/>

x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/action_connector_form/connector_add_modal.tsx

@@ -21,6 +21,7 @@ import {
   EuiBetaBadge,
   EuiButtonGroup,
   EuiSpacer,
+  useGeneratedHtmlId,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import './connector_add_modal.scss';
@@ -214,12 +215,15 @@ const ConnectorAddModal = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const modalTitleId = useGeneratedHtmlId();
+
   return (
     <EuiModal
       className="actConnectorModal"
       data-test-subj="connectorAddModal"
       onClose={closeModal}
       style={{ width: actionTypeRegistry.get(actionType.id).modalWidth }}
+      aria-labelledby={modalTitleId}
     >
       <EuiModalHeader>
         <EuiFlexGroup gutterSize="m" alignItems="center">
@@ -231,7 +235,7 @@ const ConnectorAddModal = ({
           <EuiFlexItem grow={false}>
             <EuiFlexGroup gutterSize="s" justifyContent="center" alignItems="center">
               <EuiFlexItem>
-                <EuiModalHeaderTitle size="s" component="h3" id="flyoutTitle">
+                <EuiModalHeaderTitle id={modalTitleId} size="s" component="h3">
                   <FormattedMessage
                     defaultMessage="{actionTypeName} connector"
                     id="xpack.triggersActionsUI.sections.addModalConnectorForm.flyoutTitle"