[ML] Adds aria labels to job wizard combo boxes (elastic#258509)

Fixes elastic#243085

Author: jgowdyelastic

x-pack/platform/packages/private/ml/field_stats_flyout/options_list_with_stats/option_list_with_stats.tsx

@@ -117,6 +117,7 @@ export const OptionListWithFieldStats: FC<OptionListWithFieldStatsProps> = ({
             onChange={() => {}}
             value={value}
             aria-labelledby={titleId}
+            aria-label={ariaLabel}
             onKeyDown={(e) => {
               if (e.key === 'Enter' || e.key === 'ArrowDown') {
                 e.preventDefault();

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

@@ -10,6 +10,7 @@ import React, { useCallback, useMemo } from 'react';
 import type { EuiComboBoxOptionOption } from '@elastic/eui';
 import type { Field } from '@kbn/ml-anomaly-utils';
 import { OptionListWithFieldStats, useFieldStatsTrigger } from '@kbn/ml-field-stats-flyout';
+import { i18n } from '@kbn/i18n';
 
 interface DropDownLabel {
   label: string;
@@ -66,6 +67,9 @@ export const GeoFieldSelect: FC<Props> = ({ fields, changeHandler, selectedField
       onChange={onChange}
       isClearable={true}
       data-test-subj="mlGeoFieldNameSelect"
+      aria-label={i18n.translate('xpack.ml.newJob.wizard.pickFieldsStep.geoField.ariaLabel', {
+        defaultMessage: 'Geo field select',
+      })}
     />
   );
 };

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

@@ -7,9 +7,9 @@
 
 import type { FC } from 'react';
 import React, { useContext, useEffect, useState, useMemo } from 'react';
-import { useGeneratedHtmlId } from '@elastic/eui';
 
 import type { Field } from '@kbn/ml-anomaly-utils';
+import { i18n } from '@kbn/i18n';
 import { SplitFieldSelect } from '../split_field_select';
 import { JobCreatorContext } from '../../../job_creator_context';
 import { filterCategoryFields } from '../../../../../../../../../common/util/fields_utils';
@@ -22,9 +22,6 @@ export const PopulationFieldSelector: FC = () => {
   const { jobCreator: jc, jobCreatorUpdate, jobCreatorUpdated } = useContext(JobCreatorContext);
   const jobCreator = jc as PopulationJobCreator | RareJobCreator;
   const newJobCapsService = useNewJobCapsService();
-  const titleId = useGeneratedHtmlId({
-    prefix: 'populationFieldSelector',
-  });
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const runtimeCategoryFields = useMemo(() => filterCategoryFields(jobCreator.runtimeFields), []);
@@ -70,7 +67,12 @@ export const PopulationFieldSelector: FC = () => {
         selectedField={populationField}
         isClearable={false}
         testSubject="mlPopulationSplitFieldSelect"
-        titleId={titleId}
+        aria-label={i18n.translate(
+          'xpack.ml.newJob.wizard.pickFieldsStep.populationField.ariaLabel',
+          {
+            defaultMessage: 'Population field select',
+          }
+        )}
       />
     </Description>
   );

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

@@ -10,6 +10,7 @@ import React from 'react';
 import type { EuiComboBoxOptionOption } from '@elastic/eui';
 import type { Field, SplitField } from '@kbn/ml-anomaly-utils';
 import { OptionListWithFieldStats, useFieldStatsTrigger } from '@kbn/ml-field-stats-flyout';
+import { i18n } from '@kbn/i18n';
 
 interface DropDownLabel {
   label: string;
@@ -65,6 +66,9 @@ export const RareFieldSelect: FC<Props> = ({
       placeholder={placeholder}
       data-test-subj={testSubject}
       isClearable={false}
+      aria-label={i18n.translate('xpack.ml.newJob.wizard.pickFieldsStep.rareField.ariaLabel', {
+        defaultMessage: 'Rare field select',
+      })}
     />
   );
 };

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

@@ -20,7 +20,8 @@ interface Props {
   isClearable: boolean;
   testSubject?: string;
   placeholder?: string;
-  titleId: string;
+  titleId?: string;
+  'aria-label'?: string;
 }
 
 export const SplitFieldSelect: FC<Props> = ({
@@ -31,6 +32,7 @@ export const SplitFieldSelect: FC<Props> = ({
   testSubject,
   placeholder,
   titleId,
+  'aria-label': ariaLabel,
 }) => {
   const { optionCss } = useFieldStatsTrigger();
   const options: DropDownLabel[] = fields.map(
@@ -66,6 +68,7 @@ export const SplitFieldSelect: FC<Props> = ({
       placeholder={placeholder}
       data-test-subj={testSubject}
       titleId={titleId}
+      aria-label={ariaLabel}
     />
   );
 };