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 index 4da13c486652..637f4ad1cf74 100644 --- 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 @@ -98,6 +98,7 @@ export const ControlPanel = 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 = ({ - fieldFormatter, + compressed, + controlPanelClassName, isInvalid, isLoading, + fieldName, max, min, - onChange, step, - value, uuid, - controlPanelClassName, - compressed, + value, + fieldFormatter, + onChange, }: Props) => { const rangeSliderRef = useRef(null); @@ -141,10 +143,14 @@ export const RangeSliderControl: FC = ({ 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 = ({ 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 = ({ 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 ( { - 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 ( + 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: () =>