Skip to content

Add SVG accessibility: ARIA roles, keyboard nav, data table#33

Merged
mortonanalytics merged 1 commit intodevelopfrom
feature/svg-accessibility
Mar 29, 2026
Merged

Add SVG accessibility: ARIA roles, keyboard nav, data table#33
mortonanalytics merged 1 commit intodevelopfrom
feature/svg-accessibility

Conversation

@mortonanalytics
Copy link
Copy Markdown
Owner

Summary

  • ARIA roles (graphics-document, graphics-object, graphics-symbol) applied to SVG chart structure after each render cycle
  • Keyboard navigation: arrow keys traverse layers and data points with live region announcements (150ms debounce)
  • Hidden data table fallback for screen reader access to raw chart data (capped at 500 rows)
  • Focus ring styling and .myIO-sr-only utility class

What changed

  • JS modules: a11y/aria.js (role assignment), a11y/descriptions.js (auto-label generators), a11y/keyboard-nav.js (state machine), a11y/data-table.js (hidden table)
  • Chart.js: Initializes keyboard nav + data table in initialize(), applies ARIA after renderCurrentLayers(), cleans up in destroy(). All skipped in sparkline mode
  • CSS: Focus ring, screen-reader-only class, data table styles

Test plan

  • JS tests: 194/194 pass (6 new a11y tests)
  • R tests: 723/723 pass (unchanged)
  • Build: 244.4kb bundle
  • Manual: Tab into chart, verify screen reader announcement
  • Manual: Arrow keys navigate points
  • Manual: VoiceOver on macOS reads chart description

🤖 Generated with Claude Code

Adds cross-cutting accessibility features:
- ARIA roles (graphics-document, graphics-object, graphics-symbol) on SVG
  structure with auto-generated labels from axis config
- Keyboard navigation state machine: arrow keys traverse layers/points,
  live region announcements with 150ms debounce, focus ring styling
- Hidden data table fallback for screen reader access (500-row cap)
- Screen-reader-only utility class, focus ring CSS

All features skip sparkline mode. Existing functionality preserved.

JS: a11y/aria.js, descriptions.js, keyboard-nav.js, data-table.js
CSS: focus ring, sr-only, data table styles
Tests: 6 JS a11y contract tests

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@mortonanalytics mortonanalytics merged commit 781ad80 into develop Mar 29, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant