fix: [Analytics:MachineLearning:AnomalyDetection:Jobs page] Edit model snapshot flyout missing title from announcement (#217831)

Closes: #216147

**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. Added` aria-labelledby={flyoutTitleId} `for mentioned places
This commit is contained in:
Alexey Antonov 2025-04-15 16:38:48 +03:00 committed by GitHub
parent d36b269e60
commit d47e77627a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -24,6 +24,7 @@ import {
EuiSwitch,
EuiConfirmModal,
EuiCallOut,
useGeneratedHtmlId,
} from '@elastic/eui';
import type {
@ -98,13 +99,22 @@ export const EditModelSnapshotFlyout: FC<Props> = ({ snapshot, job, closeFlyout
setDeleteModalVisible(false);
}
const flyoutTitleId = useGeneratedHtmlId({
prefix: 'editModelSnapshotFlyout',
});
return (
<>
<EuiFlyout onClose={closeWithoutReload} hideCloseButton size="m">
<EuiFlyout
onClose={closeWithoutReload}
hideCloseButton
size="m"
aria-labelledby={flyoutTitleId}
>
<EuiFlyoutBody>
<EuiFlexItem>
<EuiTitle size="s">
<h5>
<h5 id={flyoutTitleId}>
<FormattedMessage
id="xpack.ml.editModelSnapshotFlyout.title"
defaultMessage="Edit snapshot {ssId}"