Enable keyboard selection of movable points #991
Closed
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
This is a step toward making interactive graphs keyboard- and screen-reader-accessible. Issue: https://khanacademy.atlassian.net/browse/LC-1666 Test plan: ``` yarn dev open http://localhost:5173 ``` Press `tab` repeatedly. The movable points on the graphs should be selected in turn, with a visible outline on the selected point.
benchristel
requested review from
jeremywiebe,
mark-fitzgerald,
nedredmond and
nishasy
GeraldRequired Reviewers
Don't want to be involved in this pull request? Comment |
|
@nedredmond this is a spike—I still need to figure out why exactly this works, if there's a better way to do it, how to test it, etc. But it's a first step toward a solution. |
|
Size Change: +61 B (0%) Total Size: 814 kB
ℹ️ View Unchanged
|
nedredmond
reviewed
Feb 13, 2024
| @@ -60,6 +60,7 @@ const draw = { | |||
| radii, | |||
| options, | |||
| ); | |||
| this.state.visibleShape.wrapper.setAttribute("tabindex", "0") | |||
There was a problem hiding this comment.
I think we should be using WB Clickable here for better control over states.
nedredmond
reviewed
Feb 13, 2024
| @@ -969,6 +969,7 @@ _.extend(GraphUtils.Graphie.prototype, { | |||
| radii, | |||
| options, | |||
| ); | |||
| movablePoint.mouseTarget.wrapper.setAttribute("tabindex", "0") | |||
There was a problem hiding this comment.
We have some designs, don't we? Even if we get the browser focus defaults, this won't give us consistency across browsers. Let's look at our designs and at least give that a shot
|
Closing this, since we're moving ahead with a Mafs-based solution. |
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.
Summary:
This is a step toward making interactive graphs keyboard- and
screen-reader-accessible.
Issue: https://khanacademy.atlassian.net/browse/LC-1666
Test plan:
Press
tabrepeatedly. The movable points on the graphs should beselected in turn, with a visible outline on the selected point.