[8.19] [A11y] Add labels to control inputs (#221639) (#226251)

cqliu1 · kibanamachine · web-flow · commit 9fd0aea08303 · 2025-07-03T12:32:45.000-04:00
# Backport This will backport the following commits from `main` to `8.19`: - [[A11y] Add labels to control inputs (#221639)](#221639)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
diff --git a/src/platform/plugins/shared/controls/public/control_group/components/control_panel.tsx b/src/platform/plugins/shared/controls/public/control_group/components/control_panel.tsx
@@ -122,6 +122,8 @@ export const ControlPanel = <ApiType extends DefaultControlApi = DefaultControlA
   const isEditable = viewMode === 'edit';
   const controlWidth = width ?? DEFAULT_CONTROL_WIDTH;
   const controlGrow = grow ?? DEFAULT_CONTROL_GROW;
+  const controlLabel = usingTwoLineLayout ? panelTitle || defaultPanelTitle || '...' : undefined;
+
   return (
     <EuiFlexItem
       ref={setNodeRef}
@@ -152,7 +154,9 @@ export const ControlPanel = <ApiType extends DefaultControlApi = DefaultControlA
         <EuiFormRow
           data-test-subj="control-frame-title"
           fullWidth
-          label={usingTwoLineLayout ? panelTitle || defaultPanelTitle || '...' : undefined}
+          label={controlLabel}
+          id={`control-title-${uuid}`}
+          aria-label={`Control for ${controlLabel}`}
         >
           <EuiFormControlLayout
             fullWidth
diff --git a/src/platform/plugins/shared/controls/public/controls/data_controls/range_slider/components/range_slider_control.tsx b/src/platform/plugins/shared/controls/public/controls/data_controls/range_slider/components/range_slider_control.tsx
@@ -23,31 +23,33 @@ import { RangeSliderStrings } from '../range_slider_strings';
 import { rangeSliderControlStyles } from './range_slider.styles';
 
 interface Props {
-  fieldFormatter?: (value: string) => string;
+  compressed: boolean;
+  controlPanelClassName?: string;
   isInvalid: boolean;
   isLoading: boolean;
+  fieldName: string;
   max: number | undefined;
   min: number | undefined;
-  onChange: (value: RangeValue | undefined) => void;
   step: number;
-  value: RangeValue | undefined;
   uuid: string;
-  controlPanelClassName?: string;
-  compressed: boolean;
+  value: RangeValue | undefined;
+  fieldFormatter?: (value: string) => string;
+  onChange: (value: RangeValue | undefined) => void;
 }
 
 export const RangeSliderControl: FC<Props> = ({
-  fieldFormatter,
+  compressed,
+  controlPanelClassName,
   isInvalid,
   isLoading,
+  fieldName,
   max,
   min,
-  onChange,
   step,
-  value,
   uuid,
-  controlPanelClassName,
-  compressed,
+  value,
+  fieldFormatter,
+  onChange,
 }: Props) => {
   const rangeSliderRef = useRef<EuiDualRangeProps | null>(null);
 
@@ -141,10 +143,14 @@ export const RangeSliderControl: FC<Props> = ({
       inputValue,
       testSubj,
       placeholder,
+      ariaLabel,
+      id,
     }: {
       inputValue: string;
       testSubj: string;
       placeholder: string;
+      ariaLabel: string;
+      id: string;
     }) => {
       return {
         isInvalid: undefined, // disabling this prop to handle our own validation styling
@@ -155,9 +161,12 @@ export const RangeSliderControl: FC<Props> = ({
           isInvalid ? styles.fieldNumbers.invalid : styles.fieldNumbers.valid,
         ],
         className: 'rangeSliderAnchor__fieldNumber',
-        'data-test-subj': `rangeSlider__${testSubj}`,
         value: inputValue === placeholder ? '' : inputValue,
         title: !isInvalid && step ? '' : undefined, // overwrites native number input validation error when the value falls between two steps
+        'data-test-subj': `rangeSlider__${testSubj}`,
+        'aria-label': ariaLabel,
+        'aria-labelledby': `control-title-${id}`,
+        id: `controls-range-slider-${id}`,
       };
     },
     [isInvalid, step, styles]
@@ -168,16 +177,20 @@ export const RangeSliderControl: FC<Props> = ({
       inputValue: displayedValue[0],
       testSubj: 'lowerBoundFieldNumber',
       placeholder: String(min ?? -Infinity),
+      ariaLabel: RangeSliderStrings.control.getLowerBoundAriaLabel(fieldName),
+      id: uuid,
     });
-  }, [getCommonInputProps, min, displayedValue]);
+  }, [getCommonInputProps, displayedValue, min, fieldName, uuid]);
 
   const maxInputProps = useMemo(() => {
     return getCommonInputProps({
       inputValue: displayedValue[1],
       testSubj: 'upperBoundFieldNumber',
       placeholder: String(max ?? Infinity),
+      ariaLabel: RangeSliderStrings.control.getUpperBoundAriaLabel(fieldName),
+      id: uuid,
     });
-  }, [getCommonInputProps, max, displayedValue]);
+  }, [getCommonInputProps, displayedValue, max, fieldName, uuid]);
 
   return (
     <span
diff --git a/src/platform/plugins/shared/controls/public/controls/data_controls/range_slider/get_range_slider_control_factory.tsx b/src/platform/plugins/shared/controls/public/controls/data_controls/range_slider/get_range_slider_control_factory.tsx
@@ -236,16 +236,25 @@ export const getRangesliderControlFactory = (): DataControlFactory<
       return {
         api,
         Component: ({ className: controlPanelClassName }) => {
-          const [dataLoading, fieldFormatter, max, min, selectionHasNoResults, step, value] =
-            useBatchedPublishingSubjects(
-              dataLoading$,
-              dataControlManager.api.fieldFormatter,
-              max$,
-              min$,
-              selectionHasNoResults$,
-              step$,
-              selections.value$
-            );
+          const [
+            dataLoading,
+            fieldFormatter,
+            max,
+            min,
+            selectionHasNoResults,
+            step,
+            value,
+            fieldName,
+          ] = useBatchedPublishingSubjects(
+            dataLoading$,
+            dataControlManager.api.fieldFormatter,
+            max$,
+            min$,
+            selectionHasNoResults$,
+            step$,
+            selections.value$,
+            dataControlManager.api.fieldName$
+          );
 
           useEffect(() => {
             return () => {
@@ -260,6 +269,7 @@ export const getRangesliderControlFactory = (): DataControlFactory<
           return (
             <RangeSliderControl
               controlPanelClassName={controlPanelClassName}
+              fieldName={fieldName}
               fieldFormatter={fieldFormatter}
               isInvalid={Boolean(value) && selectionHasNoResults}
               isLoading={typeof dataLoading === 'boolean' ? dataLoading : false}
diff --git a/src/platform/plugins/shared/controls/public/controls/data_controls/range_slider/range_slider_strings.ts b/src/platform/plugins/shared/controls/public/controls/data_controls/range_slider/range_slider_strings.ts
@@ -19,6 +19,16 @@ export const RangeSliderStrings = {
       i18n.translate('controls.rangeSlider.control.invalidSelectionWarningLabel', {
         defaultMessage: 'Selected range returns no results.',
       }),
+    getLowerBoundAriaLabel: (fieldName: string) =>
+      i18n.translate('controls.rangeSlider.control.lowerBoundAriaLabel', {
+        defaultMessage: 'Range slider lower bound for {fieldName}',
+        values: { fieldName },
+      }),
+    getUpperBoundAriaLabel: (fieldName: string) =>
+      i18n.translate('controls.rangeSlider.control.lowerBoundAriaLabel', {
+        defaultMessage: 'Range slider upper bound for {fieldName}',
+        values: { fieldName },
+      }),
   },
   editor: {
     getStepTitle: () =>
