[8.18] fix: [ML] Data Frame Analytics: Analytics selection flyout missing title from announcement (elastic#217666) (elastic#218258)

# Backport

This will backport the following commits from `main` to `8.18`:
- [fix: [ML] Data Frame Analytics: Analytics selection flyout missing
title from announcement
(elastic#217666)](elastic#217666)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Alexey
Antonov","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-04-15T12:17:20Z","message":"fix:
[ML] Data Frame Analytics: Analytics selection flyout missing title from
announcement (elastic#217666)\n\nCloses:
https://github.com/elastic/kibana/issues/217511\n\n**Description**\nDialog
modal, flyout, field visible title should be announced for the\nusers,
especially using assistive technology to know what dialog modal,\nflyout
opened, what field is active and what is needed to enter in
it.\n\n**Changes made:**\n1. Set correct value for `aria-labelledby`
attr.","sha":"4399248cf013552902af726e61b0da5b2ed23b2e","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility",":ml","release_note:skip","Feature:Data
Frame Analytics","backport:prev-major","v9.1.0"],"title":"fix: [ML] Data
Frame Analytics: Analytics selection flyout missing title from
announcement","number":217666,"url":"https://github.com/elastic/kibana/pull/217666","mergeCommit":{"message":"fix:
[ML] Data Frame Analytics: Analytics selection flyout missing title from
announcement (elastic#217666)\n\nCloses:
https://github.com/elastic/kibana/issues/217511\n\n**Description**\nDialog
modal, flyout, field visible title should be announced for the\nusers,
especially using assistive technology to know what dialog modal,\nflyout
opened, what field is active and what is needed to enter in
it.\n\n**Changes made:**\n1. Set correct value for `aria-labelledby`
attr.","sha":"4399248cf013552902af726e61b0da5b2ed23b2e"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/217666","number":217666,"mergeCommit":{"message":"fix:
[ML] Data Frame Analytics: Analytics selection flyout missing title from
announcement (elastic#217666)\n\nCloses:
https://github.com/elastic/kibana/issues/217511\n\n**Description**\nDialog
modal, flyout, field visible title should be announced for the\nusers,
especially using assistive technology to know what dialog modal,\nflyout
opened, what field is active and what is needed to enter in
it.\n\n**Changes made:**\n1. Set correct value for `aria-labelledby`
attr.","sha":"4399248cf013552902af726e61b0da5b2ed23b2e"}}]}] BACKPORT-->

Co-authored-by: Alexey Antonov <[email protected]>

Author: kibanamachine

x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/components/analytics_selector/analytics_id_selector.tsx

@@ -19,6 +19,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiTabbedContent,
+  useGeneratedHtmlId,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -120,6 +121,9 @@ export function AnalyticsIdSelector({
   const [selected, setSelected] = useState<
     { model_id?: string; job_id?: string; analysis_type?: string } | undefined
   >();
+  const flyoutTitleId = useGeneratedHtmlId({
+    prefix: 'jobSelectorFlyout',
+  });
   const [analyticsJobs, setAnalyticsJobs] = useState<DataFrameAnalyticsConfig[]>([]);
   const [trainedModels, setTrainedModels] = useState<TrainedModelConfigResponse[]>([]);
   const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -268,11 +272,11 @@ export function AnalyticsIdSelector({
     <EuiFlyout
       onClose={closeFlyout}
       data-test-subj="mlFlyoutJobSelector"
-      aria-labelledby="jobSelectorFlyout"
+      aria-labelledby={flyoutTitleId}
     >
       <EuiFlyoutHeader hasBorder>
         <EuiTitle size="m">
-          <h2 id="flyoutTitle">
+          <h2 id={flyoutTitleId}>
             {i18n.translate('xpack.ml.analyticsSelector.flyoutTitle', {
               defaultMessage: 'Analytics selection',
             })}