[9.2] [SharedUX][A11y] Fixes ML anomaly detection job wizard bucket span error text announcement (elastic#240776) (elastic#240864)

# Backport

This will backport the following commits from `main` to `9.2`:
- [[SharedUX][A11y] Fixes ML anomaly detection job wizard bucket span
error text announcement
(elastic#240776)](elastic#240776)

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

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

<!--BACKPORT [{"author":{"name":"Ángeles Martínez
Barrio","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-10-27T16:25:50Z","message":"[SharedUX][A11y]
Fixes ML anomaly detection job wizard bucket span error text
announcement (elastic#240776)\n\nCloses
https://github.com/elastic/kibana/issues/216297\n\n## Summary\n- To fix
bucket span validation error being rendered but not announced,\nan
`errorId` is now generated in `bucket_span` and passed to
both\n`Description` and `BucketSpanInput`. `EuiFormRow` was not
properly\nwiring the correct aria attributes due to the fragment
+\nEuiFlexGroup/EuiFlexItem nesting so the error text is now
explicitly\nrendered using `EuiFormErrorText`. No visual changes.\n\n###
Testing\n\n**Windows + NVDA**\nBefore:\n<img width=\"1730\"
height=\"1039\" alt=\"Screenshot 2025-10-27 at 11 42
16\"\nsrc=\"https://github.com/user-attachments/assets/792cd62f-786f-446e-9a3e-c852383818ad\"\n/>\n\nAfter:\n<img
width=\"1724\" height=\"1045\" alt=\"Screenshot 2025-10-27 at 11 41
15\"\nsrc=\"https://github.com/user-attachments/assets/c0d955aa-af5e-4946-a32e-d297eb7998ac\"\n/>\n\n**MacOS
+ VO**\nBefore:\n<img width=\"1225\" height=\"820\" alt=\"Screenshot
2025-10-27 at 11 58
38\"\nsrc=\"https://github.com/user-attachments/assets/54424673-8df7-448f-8b77-2b6cfd17fe0e\"\n/>\n\nAfter:\n<img
width=\"1211\" height=\"784\" alt=\"Screenshot 2025-10-27 at 11 58
05\"\nsrc=\"https://github.com/user-attachments/assets/d3d4d3aa-3903-463b-a080-f05b9255c4cb\"\n/>","sha":"9167e9e17ce677236bcf45d185d5b93b56527567","branchLabelMapping":{"^v9.3.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":[":ml","release_note:skip","Team:SharedUX","backport:version","a11y","v9.3.0","v9.2.1"],"title":"[SharedUX][A11y]
Fixes ML anomaly detection job wizard bucket span error text
announcement","number":240776,"url":"https://github.com/elastic/kibana/pull/240776","mergeCommit":{"message":"[SharedUX][A11y]
Fixes ML anomaly detection job wizard bucket span error text
announcement (elastic#240776)\n\nCloses
https://github.com/elastic/kibana/issues/216297\n\n## Summary\n- To fix
bucket span validation error being rendered but not announced,\nan
`errorId` is now generated in `bucket_span` and passed to
both\n`Description` and `BucketSpanInput`. `EuiFormRow` was not
properly\nwiring the correct aria attributes due to the fragment
+\nEuiFlexGroup/EuiFlexItem nesting so the error text is now
explicitly\nrendered using `EuiFormErrorText`. No visual changes.\n\n###
Testing\n\n**Windows + NVDA**\nBefore:\n<img width=\"1730\"
height=\"1039\" alt=\"Screenshot 2025-10-27 at 11 42
16\"\nsrc=\"https://github.com/user-attachments/assets/792cd62f-786f-446e-9a3e-c852383818ad\"\n/>\n\nAfter:\n<img
width=\"1724\" height=\"1045\" alt=\"Screenshot 2025-10-27 at 11 41
15\"\nsrc=\"https://github.com/user-attachments/assets/c0d955aa-af5e-4946-a32e-d297eb7998ac\"\n/>\n\n**MacOS
+ VO**\nBefore:\n<img width=\"1225\" height=\"820\" alt=\"Screenshot
2025-10-27 at 11 58
38\"\nsrc=\"https://github.com/user-attachments/assets/54424673-8df7-448f-8b77-2b6cfd17fe0e\"\n/>\n\nAfter:\n<img
width=\"1211\" height=\"784\" alt=\"Screenshot 2025-10-27 at 11 58
05\"\nsrc=\"https://github.com/user-attachments/assets/d3d4d3aa-3903-463b-a080-f05b9255c4cb\"\n/>","sha":"9167e9e17ce677236bcf45d185d5b93b56527567"}},"sourceBranch":"main","suggestedTargetBranches":["9.2"],"targetPullRequestStates":[{"branch":"main","label":"v9.3.0","branchLabelMappingKey":"^v9.3.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/240776","number":240776,"mergeCommit":{"message":"[SharedUX][A11y]
Fixes ML anomaly detection job wizard bucket span error text
announcement (elastic#240776)\n\nCloses
https://github.com/elastic/kibana/issues/216297\n\n## Summary\n- To fix
bucket span validation error being rendered but not announced,\nan
`errorId` is now generated in `bucket_span` and passed to
both\n`Description` and `BucketSpanInput`. `EuiFormRow` was not
properly\nwiring the correct aria attributes due to the fragment
+\nEuiFlexGroup/EuiFlexItem nesting so the error text is now
explicitly\nrendered using `EuiFormErrorText`. No visual changes.\n\n###
Testing\n\n**Windows + NVDA**\nBefore:\n<img width=\"1730\"
height=\"1039\" alt=\"Screenshot 2025-10-27 at 11 42
16\"\nsrc=\"https://github.com/user-attachments/assets/792cd62f-786f-446e-9a3e-c852383818ad\"\n/>\n\nAfter:\n<img
width=\"1724\" height=\"1045\" alt=\"Screenshot 2025-10-27 at 11 41
15\"\nsrc=\"https://github.com/user-attachments/assets/c0d955aa-af5e-4946-a32e-d297eb7998ac\"\n/>\n\n**MacOS
+ VO**\nBefore:\n<img width=\"1225\" height=\"820\" alt=\"Screenshot
2025-10-27 at 11 58
38\"\nsrc=\"https://github.com/user-attachments/assets/54424673-8df7-448f-8b77-2b6cfd17fe0e\"\n/>\n\nAfter:\n<img
width=\"1211\" height=\"784\" alt=\"Screenshot 2025-10-27 at 11 58
05\"\nsrc=\"https://github.com/user-attachments/assets/d3d4d3aa-3903-463b-a080-f05b9255c4cb\"\n/>","sha":"9167e9e17ce677236bcf45d185d5b93b56527567"}},{"branch":"9.2","label":"v9.2.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Ángeles Martínez Barrio <[email protected]>

Author: kibanamachine

x-pack/platform/plugins/shared/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/bucket_span/bucket_span.tsx

@@ -28,6 +28,9 @@ export const BucketSpan: FC<Props> = ({ setIsValid, hideEstimateButton = false }
   const titleId = useGeneratedHtmlId({
     prefix: 'bucketSpan',
   });
+  const errorId = useGeneratedHtmlId({
+    prefix: 'bucketSpanError',
+  });
 
   useEffect(() => {
     jobCreator.bucketSpan = bucketSpan;
@@ -51,7 +54,7 @@ export const BucketSpan: FC<Props> = ({ setIsValid, hideEstimateButton = false }
   }, [estimating]);
 
   return (
-    <Description validation={validation} titleId={titleId}>
+    <Description validation={validation} titleId={titleId} errorId={errorId}>
       <EuiFlexGroup gutterSize="s">
         <EuiFlexItem>
           <BucketSpanInput
@@ -61,6 +64,7 @@ export const BucketSpan: FC<Props> = ({ setIsValid, hideEstimateButton = false }
             bucketSpan={bucketSpan}
             isInvalid={validation.valid === false}
             disabled={estimating}
+            errorId={errorId}
           />
         </EuiFlexItem>
         {hideEstimateButton === false && (

x-pack/platform/plugins/shared/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/bucket_span/bucket_span_input.tsx

@@ -15,6 +15,7 @@ interface Props {
   isInvalid: boolean;
   disabled: boolean;
   titleId: string;
+  errorId: string;
 }
 
 export const BucketSpanInput: FC<Props> = ({
@@ -23,6 +24,7 @@ export const BucketSpanInput: FC<Props> = ({
   isInvalid,
   disabled,
   titleId,
+  errorId,
 }) => {
   return (
     <EuiFieldText
@@ -32,6 +34,7 @@ export const BucketSpanInput: FC<Props> = ({
       isInvalid={isInvalid}
       data-test-subj="mlJobWizardInputBucketSpan"
       aria-labelledby={titleId}
+      aria-describedby={isInvalid ? errorId : undefined}
     />
   );
 };

x-pack/platform/plugins/shared/ml/public/application/jobs/new_job/pages/components/pick_fields_step/components/bucket_span/description.tsx

@@ -9,16 +9,17 @@ import type { FC, PropsWithChildren } from 'react';
 import React, { memo } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiDescribedFormGroup, EuiFormRow } from '@elastic/eui';
+import { EuiDescribedFormGroup, EuiFormErrorText, EuiFormRow } from '@elastic/eui';
 import type { Validation } from '../../../../../common/job_validator';
 
 interface Props {
   validation: Validation;
   titleId: string;
+  errorId: string;
 }
 
 export const Description: FC<PropsWithChildren<Props>> = memo(
-  ({ children, validation, titleId }) => {
+  ({ children, validation, titleId, errorId }) => {
     const title = i18n.translate('xpack.ml.newJob.wizard.pickFieldsStep.bucketSpan.title', {
       defaultMessage: 'Bucket span',
     });
@@ -32,9 +33,12 @@ export const Description: FC<PropsWithChildren<Props>> = memo(
           />
         }
       >
-        <EuiFormRow error={validation.message} isInvalid={validation.valid === false}>
+        <EuiFormRow isInvalid={validation.valid === false}>
           <>{children}</>
         </EuiFormRow>
+        {validation.valid === false && validation.message && (
+          <EuiFormErrorText id={errorId}>{validation.message}</EuiFormErrorText>
+        )}
       </EuiDescribedFormGroup>
     );
   }