vega icon indicating copy to clipboard operation
vega copied to clipboard

fix(#3878): WIP [Accessibility] Add tabindex, focusin/focusout, focus method and examples using focus management

Open majornista opened this issue 1 year ago • 2 comments

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 recreate an 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:

  • https://github.com/vega/vega/pull/3968/files#diff-2a6ca2cb2a1b7df0267b972fe076b93343484d425cb9b753d63eef803e47e459
  • https://github.com/vega/vega/pull/3968/files#diff-216beca1f9861d45be7d644a77abcbebbe52ffff9a7d957abefa7c242c70c206

Interactive Line Chart example with navigable lines and points:

  • https://github.com/vega/vega/blob/ddd72038d6480eec6db567e1a55d403e7f1ca0a5/docs/examples/interactive-line-chart.vg.json

majornista avatar Sep 06 '24 15:09 majornista

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

majornista avatar Sep 06 '24 20:09 majornista

Let's make sure this is actually your code. I saw weird test failures in https://github.com/vega/vega/pull/3967.

domoritz avatar Sep 06 '24 20:09 domoritz