From 7940fe3ae9c3bd7316a7666a879e219d397c78f5 Mon Sep 17 00:00:00 2001 From: Catherine Liu Date: Thu, 26 Jun 2025 14:54:03 -0700 Subject: [PATCH] [A11y] Add labels to control inputs (#221639) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary Closes #183202. Closes #220687. This adds aria-labels to the number fields on the range slider control. Screenshot 2025-05-27 at 8 10 38 AM Screenshot 2025-05-27 at 8 04 59 AM This also adds an aria-label to the search filter at the top of the options list popover. Screenshot 2025-06-02 at 7 23 53 AM ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) ### Identify risks Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss. Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging. - [ ] [See some risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) - [ ] ... --------- Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com> (cherry picked from commit f7dad16597d9d29b312b877a4cb8c9e9bdf4f5ac) --- .../components/control_panel.tsx | 5 ++- .../components/range_slider_control.tsx | 39 ++++++++++++------- .../get_range_slider_control_factory.tsx | 30 +++++++++----- .../range_slider/range_slider_strings.ts | 10 +++++ 4 files changed, 60 insertions(+), 24 deletions(-) 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 4da13c4866529..637f4ad1cf74e 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: () =>