[Accessibility][Autocomplete] Announce "no selectable options" #5662
Conversation
🦋 Changeset detectedLatest commit: 632d2c8 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
github-actions
bot
added
the
integration-tests: recommended
|
👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks! |
size-limit report 📦
|
kendallgassner
temporarily deployed
to
github-pages
GitHub Actions
Inactive
| @@ -381,9 +382,9 @@ function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMe | |||
| </ActionList> | |||
| ) : emptyStateText !== false && emptyStateText !== null ? ( | |||
| enabled ? ( | |||
| <Box className={classes.EmptyStateWrapper}>{emptyStateText}</Box> | |||
| <Announce className={classes.EmptyStateWrapper}>{emptyStateText}</Announce> | |||
There was a problem hiding this comment.
Need to use LiveRegion or Debounce because this does not provide feedback if a user continues to type.
| debounceAnnouncement(emptyStateText as string) | ||
| } | ||
| }, [allItemsToRender]) | ||
|
|
There was a problem hiding this comment.
Why not Announce
I chose not to use the Announce component because it does not re-render (aka re-announce) if TextContent does not change.
Why does this matter?
Imagine my autocomplete contains
Banana, Apple, Pear
if a user types aa, no selectable options should be announced. Then if a user types another a making the input read aaa, no selectable options should be announced again.
If a user types bb, no selectable options should be announced. Then if the user presses CMD + A to highlight all text and then CMD + C to paste new text input we should hear no selectable options announced.
There was a problem hiding this comment.
Why Debounce
I had to pair this functionality with debounce so that when a user types rapidly, we do not hear too much feedback
kendallgassner
temporarily deployed
to
github-pages
GitHub Actions
Inactive
Closes #
Closes: https://github.com/github/accessibility-audits/issues/10123
Use the
Announcecomponent to announce "no selectable options" when a user filters options and there are no results in the Autocomplete component.Changelog
New
Changed
Removed
Rollout strategy
Testing & Reviewing
Merge checklist