Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
/vegaPublic
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:main
base:main
Choose a base branch
Loading
frommajornista:Issue-3878-keyboard-a11y

Conversation

majornista
Copy link

@majornistamajornista commentedSep 6, 2024
edited
Loading

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:

  • tabindex,
  • focusin/focusout event handlers,
  • focus(item) event function,
  • ariaRole and ariaRoleDescription on the View, so that an interactive visualization can have role="application."

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:

domoritz reacted with hooray emoji
… 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.
@majornistamajornista requested a review froma team as acode ownerSeptember 6, 2024 15:42
@majornistamajornista marked this pull request as draftSeptember 6, 2024 15:43
@majornista
Copy link
Author

I'm not sure why Test / Node 21 is failing. The tests pass for me running locally.

@domoritz
Copy link
Member

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
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

2 participants
@majornista@domoritz

[8]ページ先頭

©2009-2025 Movatter.jp