[A11y] [SearchBar] [Filters] Improve accessibility of the Filters toggle button#8091
Conversation
|
@alexwizp Any chance we could get you to test-drive this on https://eui.elastic.co/pr_8091/storybook/?path=/story/forms-euisearchbar-euisearchbar--playground and get your a11y expertise on the changes before we dive into code review? |
|
Hey @rbrtj. Thanks for the contribution. Just FYI that this is on our radar we just haven't had a chance to review and test it yet. |
|
@rbrtj I finally got to check your PR, excuse the longer waiting time! When checking the component, I narrowed down two main issues:
How this would look like: NVDA Screen.Recording.2024-11-22.at.16.10.31.movJAWS Screen.Recording.2024-11-22.at.16.14.24.mov@rbrtj If you don't mind, I would update your PR to address the two points mentioned above. |
- enables autoFocus for search_bar selection filters to align closer with nativ select behavior
packages/eui/src/components/search_bar/filters/field_value_selection_filter.tsx
Outdated
Show resolved
Hide resolved
|
Preview staging links for this PR:
|
💚 Build Succeeded
History
cc @rbrtj |
|
Looks great! |
cee-chen
left a comment
There was a problem hiding this comment.
Awesome work on this Lene, I always appreciate your a11y expertise and screen reader testing!
>[!IMPORTANT] This PR introduces the Borealis enabled EUI package to `8.x`. The intention is to support new features being developed that need to live in `main` as well as `8.x`. >[!IMPORTANT] All `8.x` versions should continue to use the current Amsterdam theme. To ensure this even with upcoming changes to the default theme for EUI, we're adding `euiThemeAmsterdam` on `EuiProvider` usages manually. ## Description This PR introduces all previous Borealis related PR changes but excludes the specific changes to support `@elastic/eui-theme-borealis` as only Amsterdam is supported as theme in `8.x`. Previous PRs - #199993 - #201049 - #202073 --- `v97.3.1`⏩`v98.2.1-borealis.1` _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- # `@elastic/eui` ## [`v98.2.1`](https://github.com/elastic/eui/releases/v98.2.1) - Updated the EUI theme color values to use a full 6 char hex code format ([#8244](elastic/eui#8244)) ## [`v98.2.0`](https://github.com/elastic/eui/releases/v98.2.0) - Added two new icons: `contrast` and `contrastHigh` ([#8216](elastic/eui#8216)) - Updated `EuiDataGrid` content to have a transparent background. ([#8220](elastic/eui#8220)) **Accessibility** - When the tooltips components (`EuiTooltip`, `EuiIconTip`) are used inside components that handle the Escape key (like `EuiFlyout` or `EuiModal`), pressing the Escape key will now only close the tooltip and not the entire wrapping component. ([#8140](elastic/eui#8140)) - Improved the accessibility of `EuiCodeBlock`s by ([#8195](elastic/eui#8195)) - adding screen reader only labels - adding `role="dialog"` on in fullscreen mode - ensuring focus is returned on closing fullscreen mode # Borealis updates - [Visual Refresh] Update color token mappings ([#8211](elastic/eui#8211)) - [Visual Refresh] Introduce shared popover arrow styles to Borealis ([#8212](elastic/eui#8212)) - [Visual Refresh] Add forms.maxWidth token ([#8221](elastic/eui#8221)) - [Visual Refresh] Set darker shade for subdued text ([#8224](elastic/eui#8224)) - [Visual Refresh] Remove support for accentSecondary badges ([#8224](elastic/eui#8227)) - [Visual Refresh] Add severity vis colors ([#8247](elastic/eui#8247)) --- # `@elastic/eui` ## [`v98.1.0`](https://github.com/elastic/eui/releases/v98.1.0) - Updated `EuiBetaBadge` with a new `warning` color variant ([#8177](elastic/eui#8177)) **Accessibility** - Ensures `autoFocus` on `EuiSelectableList` triggers initial focus ([#8091](elastic/eui#8091)) - Improved the accessibility of `EuiSearchBarFilters` by: ([#8091](elastic/eui#8091)) - adding a more descriptive `aria-label` to selection filter buttons - ensuring the selection listbox is initially focused when opening a selection popover - Improved the accessibility experience of tabs (EuiTab, EuiTabs): tab group is a tab stop and tabs can be traversed with arrow keys. ([#8116](elastic/eui#8116)) - Updated `EuiCodeBlock` with a new `copyAriaLabel` prop, which allows setting a custom screen reader label on the copy button. ([#8176](elastic/eui#8176)) **CSS-in-JS conversions** - Removed the following global Sass variables: ([#8169](elastic/eui#8169)) - `$euiButtonMinWidth` - `$euiDatePickerCalendarWidth` - Removed the following Sass animations: ([#8169](elastic/eui#8169)) - `euiAnimFadeIn` - `euiGrow` - `focusRingAnimate` - `focusRingAnimateLarge` - `euiButtonActive` - Removed the following Sass mixins: ([#8169](elastic/eui#8169)) - `euiFullHeight` - `euiSlightShadowHover` - `datePickerArrow` # Borealis updates - [Visual Refresh] Fix euiColorFullShade Sass variable mapping (elastic/eui#8178) --- # `@elastic/eui` ## [`v98.0.0`](https://github.com/elastic/eui/releases/v98.0.0) **Bug fixes** - Fixed an `EuiDataGrid` bug where column actions where not clickable when `EuiDataGrid` with `columnVisibility.canDragAndDropColumns` was used inside a modal ([#8135](elastic/eui#8135)) **Breaking changes** - Removed `EuiFormRow`'s deprecated `columnCompressedSwitch` display prop. Use `columnCompressed` instead ([#8113](elastic/eui#8113)) # Borealis updates **Bug fixes** - Fixed computed border token mapping (elastic/eui#8170)
Summary
Related to:
#8088
Added additional text inside the filter button so that the screen reader reads
<filter label> Selectinstead of just<filter label>. Updated snapshots to ensure all tests pass.