fix(Sankey): add accessibilityLayer, title, and desc prop support by mixelburg · Pull Request #7153 · recharts/recharts

mixelburg · 2026-03-21T22:26:51Z

Problem

The Sankey chart was missing the accessibilityLayer, title, and desc props that all other Recharts chart types support. This caused TypeScript errors and the <title> element was not rendered in the SVG when provided.

Root causes:

SankeyProps did not declare accessibilityLayer, title, or desc
ReportChartProps was never called, so accessibilityLayer was never dispatched to the Redux store
SankeyImpl used raw <Surface> instead of <RootSurface>, which handles title/desc rendering and accessibilityLayer-based role/tabIndex attributes

Changes

Replace Surface with RootSurface in SankeyImpl so title, desc, and accessibility attributes are handled consistently with all other charts
Add accessibilityLayer, title, and desc to SankeyProps
Add accessibilityLayer: true to sankeyDefaultProps
Call ReportChartProps in the Sankey wrapper component to dispatch accessibilityLayer to the Redux store
Remove now-unused Surface import

Tests

Added 4 new tests to test/chart/Sankey.spec.tsx:

Sankey has role=application and tabIndex=0 by default (accessibilityLayer=true)
Sankey has no role/tabIndex when accessibilityLayer=false
title prop renders a <title> element
desc prop renders a <desc> element

All 27 tests pass.

Summary by CodeRabbit

New Features
- Sankey charts now include an accessibility layer enabled by default, plus support for custom chart title and description to improve compatibility with assistive technologies.
Tests
- Added tests ensuring accessibility attributes (keyboard focus and ARIA semantics) are rendered correctly and that title/description are included or omitted as configured.

coderabbitai · 2026-03-21T22:27:17Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 192ed589-5834-4547-b91e-db6d1dbef3d6

📥 Commits

Reviewing files that changed from the base of the PR and between f9a94a0 and d1b8129.

📒 Files selected for processing (1)

src/chart/Sankey.tsx

Walkthrough

Reintroduces an accessibility layer to the Sankey chart: adds an optional accessibilityLayer?: boolean prop (default true), renders a reporting/accessibility wrapper within the chart provider tree, and adds tests validating SVG role, tabindex, title, and desc behavior.

Changes

Cohort / File(s)	Summary
Sankey component `src/chart/Sankey.tsx`	Add optional `accessibilityLayer?: boolean` to `SankeyProps`, set default `accessibilityLayer: true`, and render a reporting/accessibility wrapper (`ReportChartProps`/root-surface integration) forwarding `accessibilityLayer` and fixed chart config.
Tests `test/chart/Sankey.spec.tsx`	Add accessibility tests verifying default `role="application"` and `tabindex="0"` on rendered `svg`, omission when `accessibilityLayer={false}`, and conditional `<title>`/`<desc>` rendering from `title`/`desc` props.

Sequence Diagram(s)

sequenceDiagram
  participant Sankey as Sankey Component
  participant Provider as Chart Provider
  participant Report as ReportChartProps
  participant Root as RootSurface / SVG

  Sankey->>Provider: mount with props (accessibilityLayer, title, desc)
  Provider->>Report: forward accessibilityLayer and chart config
  Report->>Root: render SVG with role/tabindex and optional <title>/<desc>
  Root-->>Report: rendered SVG node
  Report-->>Provider: injected accessibility layer
  Provider-->>Sankey: final composed chart output

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Add missing type exports, test #6852: Adds/edits accessibilityLayer on SankeyProps in the same src/chart/Sankey.tsx area.
Omnidoc: fix default values for polar charts, and Sankey #6682: Direct changes to sankeyDefaultProps and public SankeyProps surface (related type/default changes).
fix: implement reverseStackOrder prop in v3 Redux architecture #6644: Shows related pattern of forwarding root-level props through a reporting/accessibility wrapper.

Suggested reviewers

PavelVanecek
ckifer

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: adding accessibilityLayer, title, and desc prop support to the Sankey component.
Description check	✅ Passed	The PR description provides detailed context including the problem, root causes, changes made, and test coverage, though some template sections remain unchecked.
Linked Issues check	✅ Passed	The PR fully addresses issue `#7151` by restoring accessibilityLayer, title, and desc props with proper TypeScript typing and correct component implementation using RootSurface.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to resolving the linked issue: prop additions, component updates, Surface replacement, and comprehensive test coverage.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

codecov · 2026-03-21T22:34:51Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 89.61%. Comparing base (b39edbf) to head (f9a94a0).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #7153   +/-   ##
=======================================
  Coverage   89.61%   89.61%           
=======================================
  Files         536      536           
  Lines       40479    40496   +17     
  Branches     5519     5519           
=======================================
+ Hits        36275    36292   +17     
  Misses       4196     4196           
  Partials        8        8

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

codecov · 2026-03-21T22:43:29Z

Bundle Report

Changes will increase total bundle size by 1.26kB (0.02%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
recharts/bundle-cjs	1.3MB	504 bytes (0.04%) ⬆️
recharts/bundle-es6	1.13MB	482 bytes (0.04%) ⬆️
recharts/bundle-umd	546.95kB	272 bytes (0.05%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: recharts/bundle-cjs

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`chart/Sankey.js`	504 bytes	32.56kB	1.57%

view changes for bundle: recharts/bundle-es6

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`chart/Sankey.js`	482 bytes	30.79kB	1.59%

view changes for bundle: recharts/bundle-umd

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`Recharts.js`	272 bytes	546.95kB	0.05%

ckifer · 2026-04-06T04:50:31Z

+        barCategoryGap="10%"
+        barGap={4}
+        barSize={undefined}
+        className={className}
+        maxBarSize={undefined}
+        stackOffset="none"
+        syncId={undefined}
+        syncMethod="index"
+        baseValue={undefined}
+        reverseStackOrder={false}


none of these props apply except for accessibilityLayer?

ckifer · 2026-04-06T04:51:47Z

    <>
      <SetComputedData computedData={{ links: modifiedLinks, nodes: modifiedNodes }} />
-      <Surface {...attrs} width={width} height={height}>
+      <RootSurface otherAttributes={attrs} title={title} desc={desc}>


where do width and height get set now?

ckifer · 2026-04-06T04:56:31Z

    <>
      <SetComputedData computedData={{ links: modifiedLinks, nodes: modifiedNodes }} />
-      <Surface {...attrs} width={width} height={height}>
+      <RootSurface otherAttributes={attrs} title={title} desc={desc}>


I think there are some consequences of moving to RootSurface such as adding ZIndex support unknowingly. I don't think its a good idea to do that outside of something purposeful

…keep accessibilityLayer Co-Authored-By: Claude Sonnet 4.6 <[email protected]>

8bnns

.

mixelburg · 2026-06-25T22:05:08Z

Closing this PR. @ckifer raised valid concerns about the RootSurface approach — introducing ZIndex support as a side effect and the width/height placement question are not straightforward to resolve. The Sankey accessibilityLayer support needs a more targeted approach that doesn't change the Surface component. Will re-open with a cleaner fix if needed.

## Description Sankey currently rejects the `accessibilityLayer`, `title` and `desc` props at the type level, and even at runtime `title`/`desc` get stripped by `svgPropertiesNoEvents` before they reach `Surface`, so there's no way to give the chart an accessible name or description. This adds the three props to `SankeyProps` and handles them locally in `SankeyImpl`: `title`/`desc` are passed explicitly to the existing `Surface` (which already knows how to render them), and `role`/`tabIndex` default to `application`/`0` when `accessibilityLayer` is on (the default, same as every other chart), while explicit `role`/`tabIndex` props still win. Same precedence logic as `MainChartSurface`. I deliberately did not move Sankey onto `RootSurface` — that was the approach in #7153 and the concern there was that it drags in ZIndex portal support as a side effect. No changes to `Surface` either. Keyboard navigation wiring for Sankey nodes/links is out of scope here; this covers the props and the SVG attributes. ## Related Issue Fixes #7151 ## Motivation and Context Users migrating from 2.x lost the ability to set `accessibilityLayer`/`title`/`desc` on Sankey (TS errors, and silently dropped at runtime). Every other chart supports them. ## How Has This Been Tested? Added an `accessibility` describe block to `test/chart/Sankey.spec.tsx`: default role/tabindex, `accessibilityLayer={false}` omitting them, explicit `role`/`tabIndex` overriding the defaults, and `title`/`desc` rendering. The default-attributes and title/desc tests fail on current main and pass with this change; the full Sankey spec (33 tests), `AccessibilityLayer.spec.tsx` and `Sankey.typed.spec.tsx` all pass locally, plus `tsc` and eslint on the changed files. ## Screenshots (if appropriate): n/a — attribute-only change, no visual difference. ## Types of changes - [x] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to change) ## Checklist: - [ ] My change requires a change to the documentation. - [ ] I have updated the documentation accordingly. - [x] I have added tests to cover my changes. - [ ] I have added a storybook story or VR test, or extended an existing story or VR test to show my changes  ## Summary by CodeRabbit * **New Features** * Added accessibility support to Sankey charts by default. * Charts now include appropriate keyboard navigation and application semantics. * Added support for custom titles and descriptions for screen readers. * Added options to disable the accessibility layer or override accessibility attributes.

fix(Sankey): add accessibilityLayer, title, and desc prop support

f9a94a0

PavelVanecek approved these changes Mar 21, 2026

View reviewed changes

ckifer requested changes Apr 6, 2026

View reviewed changes

fix(Sankey): revert RootSurface to Surface, remove title/desc props, …

d1b8129

…keep accessibilityLayer Co-Authored-By: Claude Sonnet 4.6 <[email protected]>

8bnns approved these changes May 30, 2026

View reviewed changes

PavelVanecek approved these changes May 31, 2026

View reviewed changes

mixelburg closed this Jun 25, 2026

MahinAnowar mentioned this pull request Jul 11, 2026

feat(Sankey): support accessibilityLayer, title and desc props #7546

Merged

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(Sankey): add accessibilityLayer, title, and desc prop support#7153

fix(Sankey): add accessibilityLayer, title, and desc prop support#7153
mixelburg wants to merge 2 commits into
recharts:mainfrom
mixelburg:fix/sankey-accessibilityLayer-and-title

mixelburg commented Mar 21, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Mar 21, 2026 •

edited

Loading

❌ Failed checks (1 warning)

Uh oh!

codecov Bot commented Mar 21, 2026

Uh oh!

codecov Bot commented Mar 21, 2026

Assets Changed:

Assets Changed:

Assets Changed:

Uh oh!

ckifer Apr 6, 2026

Uh oh!

ckifer Apr 6, 2026

Uh oh!

ckifer Apr 6, 2026

Uh oh!

8bnns left a comment

Uh oh!

mixelburg commented Jun 25, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Uh oh!

Conversation

mixelburg commented Mar 21, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Changes

Tests

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Mar 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested reviewers

❌ Failed checks (1 warning)

Uh oh!

codecov Bot commented Mar 21, 2026

Codecov Report

Uh oh!

codecov Bot commented Mar 21, 2026

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Assets Changed:

Assets Changed:

Uh oh!

ckifer Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

ckifer Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

ckifer Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

8bnns left a comment

Choose a reason for hiding this comment

Uh oh!

mixelburg commented Jun 25, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mixelburg commented Mar 21, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Mar 21, 2026 •

edited

Loading