Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Fix] Dropdown tab-key focus issue #473

Merged
merged 1 commit into from
Jun 8, 2021

Conversation

aappoalander
Copy link
Contributor

Description

This PR adds additional logic for Dropdown tab-key event handling. Current version of Reach-UI has a focus issue with the used Listbox component that allows focus to default if tab key is pressed when the listbox menu is open. This PR introduces logic to prevent the focus from escaping.

Related Issue

reach/reach-ui#691

Motivation and Context

Current behaviour of Dropdown allowed focus to escape when using tab while the dropdown is open. Usually focus defaults to document body, which is really bad for keyboard, let alone screen reader, users. To temporarily address the issue:

  • default tab-keypress event behviour is prevented if the Dropdown is open
  • Dropdown is closed
  • Focus is returned to the Dropdown.

How Has This Been Tested?

Tested with styleguidist build using MacOS Safari, Chrome and Edge.

Release notes

  • Fix Dropdown focus issue when focus escapes if tab is pressed while Dropdown is open. Now focus returns to Dropdown instead of browser default.

@aappoalander aappoalander added the bug Something isn't working label Jun 1, 2021
@aappoalander aappoalander requested review from ketsappi and LJKaski June 1, 2021 12:53
@aappoalander aappoalander self-assigned this Jun 1, 2021
ketsappi
ketsappi previously approved these changes Jun 8, 2021
@aappoalander aappoalander merged commit 8855bb6 into develop Jun 8, 2021
@aappoalander aappoalander mentioned this pull request Jun 28, 2021
@aappoalander aappoalander deleted the fix/dropdown-tab-keypress branch October 13, 2021 09:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants