fix: allow users to escape the tab trap using escape #43
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Allow users to escape the tab trap using escape key
Contributor
Author
|
@satya164 Can we merge this? It's quite a low hanging fruit, won't take more than 5 minutes to review. |
satya164
changed the title
Contributor
Author
|
You're welcome! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Motivation
Currently there is no way to exit the tab trap with a keyboard. If you want to focus out of the editor you'll have to use a mouse to click outside which is bad for accessibility. I'm no expert in accessibility, but you can read more here.
To fix this the PR allows the user to exit the tab trap by pressing the escape key which was suggested in the issue.
Test plan
You can test it in the example page, while the editor is focused press escape and then press tab and the focus should move to the next element. Since editor is last element in the example the focus will go to probably the url bar, so instead append a temporary link after editor to check if that is focused.
Fixes chakra-ui #5
chakra-ui docs uses
react-livewhich usesreact-simple-code-editor.