Skip to content

Commit e375b08

Browse files
[Platform:StackManagement:Data Set Quality page] Enhance accessibility of filter bar (#241012)
Closes #219218 ## Summary Improves accessibility of the Dataset Quality filter bar by introducing a more specific aria-label for screen readers. ## Changes - Add a separate ariaLabel i18n key - Update aria-label prop on EuiFieldSearch using this label ## Steps to reproduce - Open NVDA Speech Viewer - Navigate to the Data Set Quality (Go to the Discover tab on the left-side navigation -> Press "Data sets" on the top right) - Focus on the filter bar, preferably with keyboard controls ## Expected Result <img width="689" height="449" alt="Screenshot 2025-10-29 110341" src="https://github.com/user-attachments/assets/a530ef6c-198f-45ec-a789-8fb4698664a6" />
1 parent 0bc2db8 commit e375b08

File tree

1 file changed

+5
-1
lines changed
  • x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality/filters

1 file changed

+5
-1
lines changed

x-pack/platform/plugins/shared/dataset_quality/public/components/dataset_quality/filters/filter_bar.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ const placeholder = i18n.translate('xpack.datasetQuality.filterBar.placeholder',
1414
defaultMessage: 'Filter data sets',
1515
});
1616

17+
const ariaLabel = i18n.translate('xpack.datasetQuality.filterBar.ariaLabel', {
18+
defaultMessage: 'Type a data set name',
19+
});
20+
1721
export interface FilterBarComponentProps {
1822
query?: string;
1923
onQueryChange: (query: string) => void;
@@ -35,7 +39,7 @@ export const FilterBar = ({ query, onQueryChange }: FilterBarComponentProps) =>
3539
value={query ?? ''}
3640
onChange={onChange}
3741
isClearable={true}
38-
aria-label={placeholder}
42+
aria-label={ariaLabel}
3943
/>
4044
);
4145
};

0 commit comments

Comments
 (0)