From 5e43360bdda1613f29ec4f6f4d239dd7f6b45dba Mon Sep 17 00:00:00 2001
From: Alexey Antonov <alexwizp@gmail.com>
Date: Tue, 15 Apr 2025 15:17:20 +0300
Subject: [PATCH] fix: [ML] Data Frame Analytics: Analytics selection flyout
 missing title from announcement (#217666)

Closes: https://github.com/elastic/kibana/issues/217511

**Description**
Dialog modal, flyout, field visible title should be announced for the
users, especially using assistive technology to know what dialog modal,
flyout opened, what field is active and what is needed to enter in it.

**Changes made:**
1. Set correct value for `aria-labelledby` attr.

(cherry picked from commit 4399248cf013552902af726e61b0da5b2ed23b2e)
---
 .../analytics_selector/analytics_id_selector.tsx          | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/components/analytics_selector/analytics_id_selector.tsx b/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/components/analytics_selector/analytics_id_selector.tsx
index 08360eb4f2cca..f83ff175ee8fe 100644
--- a/x-pack/platform/plugins/shared/ml/public/application/data_frame_analytics/pages/components/analytics_selector/analytics_id_selector.tsx
+++ b/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',
             })}