Improve keyboard navigation around exercise component #652
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.
Currently, the exercise component traps keyboard focus when a user enters the code editor. The goal of this PR is to alleviate this problem by allowing users to press Esc to turn off the use of the Tab key for indent and outdent behavior. We also add an outline to the editor element when in this mode to visually indicate that focus has been "given back" to the container. Note that indent/outdent via Ctrl + ]/[ will still work in this mode.
Additionally, I replaced the use of anchor elements with class
btn
in the exercise toolbar with<button>
elements. This automatically allows those buttons to receive keyboard focus as well.Finally, a small change was needed in the autocomplete logic to ensure that the Tab events aren't trapped when they're intended to move focus out of the exercise element. In this process, a small bug with the autocompletion on empty code was revealed: we no longer will try to return autocomplete suggestions on an empty line.
For #636
Here's a screen recording showing the new behavior. I added a red focus outline to make it more obvious which object has focus.
learnr-exercise-tab-behavior.mp4