This repository was archived by the owner on Jun 7, 2023. It is now read-only.
Fix ActiveCode Keyboard Trap to increase Accessibility #367
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
…tion method, tested
Syncing upstream
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
Problem Addressed
For users dependent on tab navigation and screen readers (see this page), when they tab into ActiveCode's
<textarea>the CodeMirror API changes tab function to indenting 4 spaces and there's no way to tab out of the<textarea>to change focus, basically prohibiting the user from further navigation.Solution
After discussing with @jochenrick , we came up with the following idea that if the user uses tab navigation outside of ActiveCode, then we disable ActiveCode's tab indentation behavior so that when users hit tab inside ActiveCode the focus changes to the next HTML element as usual. If the user use mouse for navigation (such as clicking into ActiveCode), the ActiveCode will work normally by indenting 4 spaces when hitting tab.
Implementation
Within ActiveCode.js when keydown event is fired, if ActiveCode is not in focus, then we judge that the user is depending on tab navigation and change the ExtraKeys option of CodeMirror so that tab and shift-tab keys works normally.
Testing
I've tested the solution in Chrome, Firefox, Safari and demoed this to @jochenrick in person.
Contact
Siwei "Robert" Li
robertsiweili@gatech.edu
Georgia Institute of Technology