- Notifications
You must be signed in to change notification settings - Fork1.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.
Already on GitHub?Sign in to your account
fix(#3878): WIP [Accessibility] Add tabindex, focusin/focusout, focus method and examples using focus management#3968
Draft
majornista wants to merge13 commits intovega:mainChoose a base branch frommajornista:Issue-3878-keyboard-a11y
base:main
Could not load branches
Branch not found:{{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline, and old review comments may become outdated.
Draft
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
… NOT MERGE- tabindex attribute on marks- focusin/focusout event handling- Adds support for focus(element) event method, so that one can move focus to SVGElements within the scenegraph.Note that in order to tab in and out of the Vega view, we must allow keydown events in the Vega config.
… false for marksNo tabindex attribute should be included on marks where interactive === false.
Add WIP stacked bar chart from Data Navigator to see if we can reproduce the functionality using focus management in Vega.
…istencyDifferent browsers seem to render focus outlines for elements within an svg inconsistently. The new Interactive Stacked Bar Chart Example demonstrates a focus outline rendered within Vega, using SVG. The outline property allows a user to set the outline style for a mark or group, for example "outline: none."
Adds tabindex="-1" to ownerSVGElement when it contains other focusable elements, so that the SVG element itself does not become an additional tab stop.
Fixes issue in Interactive Stacked Bar Chart example where the focus rectangle remained visible, surrounding a point with no width or height, when the user tabs away from the chart.
Adds ability to set role="application" to the view so that windows based screen readers switch into "forms mode" or "application mode" when entering an interactive visualization.
I'm not sure why Test / Node 21 is failing. The tests pass for me running locally. |
Let's make sure this is actually your code. I saw weird test failures in#3967. |
Adds interactive line chart example that demonstrates managing focus between lines and points, and displaying tooltips for points.
Sign up for freeto 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.
Work in progress to address#3878, by adding support for keyboard interaction an navigation of the scenegraph when rendering using SVG.
Add support for and examples using:
New interactive stacked bar chart, attempting to recreatean example from Data Navigator, using roving tabindex and keyboard event handling to switch between navigating by column, and by stacked bar segment:https://github.com/vega/vega/blob/5e33eb2bb0cad32bd9833e789a42fce979eb5606/docs/examples/column-stacked-interactive.vg.json.
Modified Bar Chart and Airport Connections examples to support roving tab index for navigation of data points:
Interactive Line Chart example with navigable lines and points: