Skip to content

[charts] Set aria-hidden on accessibility proxy divs at initialization#23186

Merged
JCQuintas merged 1 commit into
mui:masterfrom
kevincorizi-sbt:fix/charts-accessibility-proxy-aria-hidden
Jul 21, 2026
Merged

[charts] Set aria-hidden on accessibility proxy divs at initialization#23186
JCQuintas merged 1 commit into
mui:masterfrom
kevincorizi-sbt:fix/charts-accessibility-proxy-aria-hidden

Conversation

@kevincorizi-sbt

@kevincorizi-sbt kevincorizi-sbt commented Jul 20, 2026

Copy link
Copy Markdown
Contributor

Summary

Fixes #23185

ChartsAccessibilityProxy creates two div[role="img"] elements whose aria-labelledby targets are empty until a chart item receives keyboard focus. Without aria-hidden, these divs appear in the accessibility tree as images with no accessible name, violating WCAG 1.1.1 (Non-text Content).

Accessibility tools flag this as:

This DIV (role=img) does not have a mechanism that allows an accessible name value to be calculated.

Changes

One-line fix: add div.setAttribute('aria-hidden', 'true') when the proxy divs are created during initialization (line 59 of ChartsAccessibilityProxy.tsx).

The existing focus handler already manages aria-hidden correctly on subsequent interactions:

  • Line 89: activeDiv.setAttribute('aria-hidden', 'false') — reveals the active buffer
  • Line 98: inactiveDiv.setAttribute('aria-hidden', 'true') — hides the inactive buffer

The initial aria-hidden="true" fills the gap between creation and first keyboard focus.

Test plan

Added two browser tests in ChartsAccessibilityProxy.test.tsx:

  1. Verifies proxy divs have aria-hidden="true" on initial render (before keyboard interaction)
  2. Verifies aria-hidden="false" is set on the active proxy div after keyboard navigation

All existing useChartKeyboardNavigation tests pass (22/22).

Reproduced on: @mui/x-charts 9.10.0 (latest) and 9.8.0.

@kevincorizi-sbt kevincorizi-sbt mentioned this pull request Jul 20, 2026
Closed
@code-infra-dashboard

code-infra-dashboard Bot commented Jul 20, 2026 •
edited
Loading

Copy link
Copy Markdown

Deploy preview

https://deploy-preview-23186--material-ui-x.netlify.app/
QR code for https://deploy-preview-23186--material-ui-x.netlify.app/

Bundle size

Bundle Parsed size Gzip size
@mui/x-data-grid 0B(0.00%) 0B(0.00%)
@mui/x-data-grid-pro 0B(0.00%) 0B(0.00%)
@mui/x-data-grid-premium 0B(0.00%) 0B(0.00%)
@mui/x-charts 🔺+37B(+0.01%) ▼-2B(0.00%)
@mui/x-charts-pro 🔺+37B(+0.01%) 0B(0.00%)
@mui/x-charts-premium 🔺+37B(+0.01%) 0B(0.00%)
@mui/x-date-pickers 0B(0.00%) 0B(0.00%)
@mui/x-date-pickers-pro 0B(0.00%) 0B(0.00%)
@mui/x-tree-view 0B(0.00%) 0B(0.00%)
@mui/x-tree-view-pro 0B(0.00%) 0B(0.00%)
@mui/x-scheduler 0B(0.00%) 0B(0.00%)
@mui/x-scheduler-premium 0B(0.00%) 0B(0.00%)
@mui/x-chat 0B(0.00%) 0B(0.00%)
@mui/x-license 0B(0.00%) 0B(0.00%)

Details of bundle changes

Performance

Total duration: 1,783.37 ms +201.46 ms(+12.7%) | Renders: 63 (+0) | Paint: 2,553.17 ms +338.64 ms(+15.3%)

Test Duration Renders
SparkLineChart grid of 100 instances 190.44 ms 🔺+103.63 ms(+119.4%) 1 (+0)
Heatmap: 100x100 grid 305.78 ms 🔺+52.62 ms(+20.8%) 2 (+0)
RangeBarChart with big data amount 55.64 ms 🔺+12.58 ms(+29.2%) 2 (+0)
LineChart with date axis and big data amount 46.60 ms 🔺+10.32 ms(+28.4%) 2 (+0)
Area chart with big data amount (no marks) 61.22 ms 🔺+10.22 ms(+20.0%) 2 (+0)

…and 13 more (+8 within noise) — details

Metric alarms

Test Metric Change
SparkLineChart grid of 100 instances bench:paint 🔺 +257.90 ms
Heatmap: 100x100 grid bench:paint 🔺 +77.52 ms
RangeBarChart with big data amount bench:paint 🔺 +20.48 ms
LineChart with date axis and big data amount bench:paint 🔺 +11.50 ms
ScatterChart with big data amount bench:paint 🔺 +14.43 ms

…and 7 more metric alarms — details

Check out the code infra dashboard for more information about this PR.

@kevincorizi-sbt
kevincorizi-sbt force-pushed the fix/charts-accessibility-proxy-aria-hidden branch from fe5bc52 to 9e1aff6 Compare July 20, 2026 13:52
@kevincorizi-sbt

kevincorizi-sbt commented Jul 20, 2026

Copy link
Copy Markdown
Contributor Author

Keeping this as a draft until a maintainer can add the type: bug label (I don't have permission) and CI clears. Happy to address any feedback.

@kevincorizi-sbt
[charts] Set aria-hidden on accessibility proxy divs at initialization (
24baf7e 
mui#23185)

The ChartsAccessibilityProxy creates two div[role="img"] elements whose
aria-labelledby targets are empty until a chart item receives keyboard
focus. Without aria-hidden, these divs appear in the accessibility tree
as images with no accessible name, violating WCAG 1.1.1.

Add aria-hidden="true" when the proxy divs are created. The existing
focus handler already overrides this value correctly — setting
aria-hidden="false" on the active div and "true" on the inactive div.
@kevincorizi-sbt
kevincorizi-sbt force-pushed the fix/charts-accessibility-proxy-aria-hidden branch from 9e1aff6 to 24baf7e Compare July 20, 2026 13:53
@JCQuintas JCQuintas added type: bug It doesn't behave as expected. scope: charts Changes related to the charts. labels Jul 20, 2026
@JCQuintas
JCQuintas marked this pull request as ready for review July 20, 2026 15:30
@JCQuintas

JCQuintas commented Jul 20, 2026

Copy link
Copy Markdown
Member

@alexfauquette any input on this since you worked on it?

Code looks good to me. Also how do you test this? MacOS voiceover doesn't seem to have this issue 🤔

@kevincorizi-sbt

kevincorizi-sbt commented Jul 20, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

@alexfauquette any input on this since you worked on it?

Code looks good to me. Also how do you test this? MacOS voiceover doesn't seem to have this issue 🤔

@JCQuintas thank you for the quick reply! I agree live testing does not seem to cause any trouble, but static analysis tools (Access Assistant, AXE DevTools) both flag these divs as violations.

For my project we're under strict commitments to fully comply with WCAG, and I am trying to remove as many warnings as I can, even if they are harmless

image image

@alexfauquette

alexfauquette commented Jul 21, 2026

Copy link
Copy Markdown
Member

Thanks for the explanation. So that's not a bug, but a workaround to make static analysis tools happy :)

@JCQuintas
JCQuintas merged commit 21964a0 into mui:master Jul 21, 2026
25 of 26 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@alexfauquette alexfauquette alexfauquette approved these changes
@JCQuintas JCQuintas Awaiting requested review from JCQuintas JCQuintas is a code owner

Assignees

No one assigned

Labels

scope: charts Changes related to the charts. type: bug It doesn't behave as expected.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[charts] ChartsAccessibilityProxy role="img" divs missing aria-hidden on initial render

3 participants

@kevincorizi-sbt @JCQuintas @alexfauquette