Skip to content

fix(a11y): remove tabIndex on BarChart bars inside aria-hidden - #722

Open
dezzy-music wants to merge 1 commit into
MergeFi:mainfrom
dezzy-music:fix/barchart-aria-hidden-focus-708
Open

dezzy-music wants to merge 1 commit into
MergeFi:mainfrom
dezzy-music:fix/barchart-aria-hidden-focus-708

Conversation

@dezzy-music

Copy link
Copy Markdown

Summary

Fixes #708.

BarChart's visual bars container is marked aria-hidden, but individual bars inside had tabIndex={0}. This violates axe's aria-hidden-focus rule because screen reader users tabbing through the page land on silent tab stops that assistive technology is told do not exist.

Changes

  • Removed tabIndex={0} and keyboard focus-visible outline classes from the decorative bars in src/components/ui/BarChart.tsx.
  • Visual hover tooltip is preserved via group-hover:opacity-100.
  • Assistive technology and keyboard screen readers continue to access all data via the visually-hidden (sr-only) accessible data table.
  • Updated unit tests in BarChart.test.tsx to assert that no focusable elements exist inside the aria-hidden container.

Verification

  • Ran Jest: 8/8 tests pass in BarChart.test.tsx and 3/3 tests pass in dashboard-charts.a11y.test.tsx.
  • Ran ESLint: 0 errors.

@vercel

vercel Bot commented Oct 13, 2026

Copy link
Copy Markdown

@dezzy-music is attempting to deploy a commit to the chonilius' projects Team on Vercel.

A member of the Team first needs to authorize it.

This branch has not been deployed

No deployments
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.

BarChart's bars are focusable (tabIndex=0) inside an aria-hidden container

1 participant