[8.17] fix: [ML] Data Frame Analytics: Analytics selection flyout missing title from announcement (#217666) (#218257)

# Backport

This will backport the following commits from `main` to `8.17`:
- [fix: [ML] Data Frame Analytics: Analytics selection flyout missing
title from announcement
(#217666)](https://github.com/elastic/kibana/pull/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":"alexwizp@gmail.com"},"sourceCommit":{"committedDate":"2025-04-15T12:17:20Z","message":"fix:
[ML] Data Frame Analytics: Analytics selection flyout missing title from
announcement (#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 (#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 (#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 <alexwizp@gmail.com>
This commit is contained in:
Kibana Machine 2025-04-15 16:08:54 +02:00 committed by GitHub
parent fc6555c621
commit b8b29b1f38
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -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',
})}