Implement Accessibility Support #163
Open
Conversation
This file contains 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
Neurrone
force-pushed
the
accessibility-improvements
branch
from
a584509
to
1e27408
Compare
|
Looks like the CI is failing due to my hack in the gulp script; will remove that commit before merging. |
Neurrone
force-pushed
the
accessibility-improvements
branch
3 times, most recently
from
85296b6
to
619c85b
Compare
|
Force pushed to updated inaccurate comments and commit messages to reflect that focus computations are done via a pre-order traversal of the tree, not an in-order one. |
1. The keyboard can now be used to move through the tree, expand and collapse nodes: * Home / end moves to the first and last visible node, respectively. * Up / down arrows moves to the previous / next visible node. * Right arrow expands a collapsed node, if focus is on a collapsed parent. If focus is on an expanded parent, move to its first child. * Left arrow collapses the node if focus is on an expanded parent. Otherwise, focus is moved to the parent of the currently focused node. * First letter navigation: for example, press R to move focus to the next node who's label starts with R. * Space toggles selection, as expected for a checkbox. This is implemented by computing an pre-order traversal of visible nodes updated each render which greatly simplifies computation for focus movements. Focus is managed by using the [roving tabindex pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_roving_tabindex). * Each TreeNode takes in a new property, `hasFocus` which is initialized to `false` on initial render. This causes each tree item to have `tabindex=-1` set, which excludes them from tab order, but allows them to be programatically focused. * On initial focus of the top-level `CheckboxTree` component, we initialize the currently focused node index to 0. This causes the first tree node's `hasFocus` to be set to `true`, which sets `tabIndex=0`, so it is included in tab order. `TreeNode`'s `componentDidUpdate` fires a focus event when it is supposed to gain focus. * Other key presses manipulate the currently focused index, which causes the element with `tabindex=0` to move about, hence the roving tabindex. 2. Add the necessary aria attributes for screen readers to correctly read the state of the tree, whether a node is expanded/collapsed, checked etc. For more information, see https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView
… be used as a dependency in package.json
Neurrone
force-pushed
the
accessibility-improvements
branch
from
619c85b
to
7622fd3
Compare
|
I am sorry about the radio silence. I will get to looking at this soon (ideally within a few days). |
|
@jakezatecky any chance you could take a look? |
|
Ping @jakezatecky |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Fixes #162
See the commit for implementation details. I also had to temporarily disable scss-lint, since I don't have it installed.
Outstanding items: