Skip to content
This repository was archived by the owner on Jul 9, 2025. It is now read-only.

Conversation

@OEvgeny
Copy link
Collaborator

@OEvgeny OEvgeny commented Feb 3, 2022

Description

This fixes the following issues:

  • Unable to go through filtered tree items via keyboard as the filter immediately gets closed after a blur event
  • Narrator doesn't announce search results and related instructions for filter

The former issue is fixed by preserving the search query in case the query is not empty. If the query is empty blur causes the filter to close. I'd like to note that the filtered state is preserved until a user explicitly clears the search query. To me, this should be the desired behavior.

The later issue has more to note about:

  • Refactored announcement to use Announced component from FluentUI built-ins. Tested with NVDA and it works.
  • Since Narrator still has issues with announcing status/alert roles used by the Announced component, added an explicit aria-labeledby link to the announced text, so it can be announced using Narrator shortcuts while navigating through the searchbox or the tree itself.
  • Improved announcement message to include the region label and more information regarding the current search query the result is provided for.

Task Item

Screenshots

Reelia-recording-2022-02-03 webm

image

#minor

This fixes the following issues:
- Unable to go through filtered tree items via keyboard as the filter immediately gets closed after a blur event
- Narrator doesn't announce search results and related instructions for filter

The former issue is fixed by preserving the search query in case the query is not empty. If the query is empty blur causes the filter to close. I'd like to note that the filtered state is preserved until a user explicitly clears the search query. To me, this should be the desired behavior.

The later issue has more to note about:
- Refactored announcement to use `Announced` component from FluentUI built-ins.
- Since Narrator still has issues with announcing status/alert roles used by the Announced component, added an explicit `aria-labeledby` link to the announced text, so it can be announced using Narrator shortcuts while navigating through the searchbox or the tree itself.
- Improved announcement message to include the region label and more information regarding the current search query the result is provided for.
@OEvgeny OEvgeny changed the title a11y: improve tree filtering keyboard and announcement a11y: improve tree filtering keyboard navigation and announcement Feb 4, 2022
@coveralls
Copy link

coveralls commented Feb 4, 2022

Coverage Status

Coverage increased (+0.005%) to 55.945% when pulling ee2dc1b on OEvgeny:a11y/filter-a11y into d04ceae on microsoft:main.

@tonyanziano tonyanziano merged commit a388342 into microsoft:main Feb 8, 2022
@OEvgeny OEvgeny deleted the a11y/filter-a11y branch February 8, 2022 18:53
@cwhitten cwhitten mentioned this pull request Aug 15, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants