fix(DefaultLegendContent): omit empty value from legend icon aria-label by mahirhir · Pull Request #7501 · recharts/recharts

mahirhir · 2026-06-29T07:19:05Z

The legend icon's aria-label is built as ${entry.value} legend icon. When a series has no name and a function dataKey, getTooltipNameProp returns undefined, so the label becomes the literal string "undefined legend icon" and a screen reader reads out "undefined". The legend item renders no visible text in that case, so the accessible name no longer matches what is shown.

The fix guards the value: when it is missing the label is just "legend icon", otherwise it is unchanged. Small follow-up to #5414 (which added the label) and #7109 (which kept it on the raw value).

I added a test that renders <Line dataKey={row => row.value} /> with no name. Before the change the icon's aria-label was "undefined legend icon"; after it is "legend icon". The full Legend.spec suite still passes.

Summary by CodeRabbit

Bug Fixes
- Improved legend accessibility labels so icon descriptions now fall back to a generic label when no entry value is available.
- Prevented empty or confusing labels for legend items when a name is missing.
Tests
- Added coverage for legend behavior when entries lack a name and use a non-string data key.

coderabbitai · 2026-06-29T07:19:21Z

Walkthrough

In DefaultLegendContent.tsx, the aria-label on legend icon Surface elements now falls back to "legend icon" when entry.value is null or undefined, replacing unconditional string interpolation. A regression test is added to Legend.spec.tsx covering this case.

Legend icon aria-label null fallback

Layer / File(s)	Summary
aria-label fallback fix and test `src/component/DefaultLegendContent.tsx`, `test/component/Legend.spec.tsx`	`aria-label` uses `entry.value ?? "legend icon"` instead of always interpolating the value; test asserts the fallback when `dataKey` is a function and no `name` is set.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

recharts/recharts#7109: Both PRs modify the legend icon aria-label logic in DefaultLegendContent.tsx and Legend.spec.tsx around entry.value.

Suggested reviewers

PavelVanecek
ckifer

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description covers the bug, fix, and test, but it misses required template sections like Related Issue, Types of changes, and the checklist.	Add the missing template sections, especially a linked issue, testing details, change type, and the checklist.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main fix to the legend icon aria-label behavior.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ 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.}

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/component/DefaultLegendContent.tsx`:
- Line 241: Treat empty legend names as missing in DefaultLegendContent so the
aria-label falls back to the icon-only text instead of producing a leading
space. Update the aria-label logic around entry.value to handle both
null/undefined and empty-string values, and add a Legend spec covering
getTooltipNameProp('')/empty legend names to verify the behavior.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 3a7b79e0-9198-4416-afdc-69c3986bf3aa

📥 Commits

Reviewing files that changed from the base of the PR and between dfecbd4 and bbd3f39.

📒 Files selected for processing (2)

src/component/DefaultLegendContent.tsx
test/component/Legend.spec.tsx

coderabbitai · 2026-06-29T07:22:22Z

          viewBox={viewBox}
          style={svgStyle}
-          aria-label={`${entry.value} legend icon`}
+          aria-label={entry.value == null ? 'legend icon' : `${entry.value} legend icon`}


🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash set -euo pipefail echo "== find getTooltipNameProp implementation ==" rg -n -C3 '\bgetTooltipNameProp\b' src test echo echo "== find legend aria-label tests ==" rg -n -C2 "legend icon|aria-label drops the value|undefined legend icon" test src/component echo echo "== inspect changed legend rendering block ==" sed -n '232,245p' src/component/DefaultLegendContent.tsx

Repository: recharts/recharts

Length of output: 14467

Treat empty legend names as missing. getTooltipNameProp('', ...) returns '', so this renders " legend icon" instead of the icon-only label. Handle the empty-string case here and add a Legend spec for it. src/component/DefaultLegendContent.tsx:241

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/component/DefaultLegendContent.tsx` at line 241, Treat empty legend names as missing in DefaultLegendContent so the aria-label falls back to the icon-only text instead of producing a leading space. Update the aria-label logic around entry.value to handle both null/undefined and empty-string values, and add a Legend spec covering getTooltipNameProp('')/empty legend names to verify the behavior.

codecov · 2026-06-29T07:30:10Z

Bundle Report

Changes will increase total bundle size by 104 bytes (0.0%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
recharts/bundle-cjs	1.44MB	38 bytes (0.0%) ⬆️
recharts/bundle-es6	1.27MB	38 bytes (0.0%) ⬆️
recharts/bundle-umd	588.33kB	28 bytes (0.0%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: recharts/bundle-es6

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`component/DefaultLegendContent.js`	38 bytes	6.89kB	0.55%

view changes for bundle: recharts/bundle-cjs

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`component/DefaultLegendContent.js`	38 bytes	7.85kB	0.49%

view changes for bundle: recharts/bundle-umd

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`Recharts.js`	28 bytes	588.33kB	0.0%

codecov · 2026-06-29T07:36:20Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 88.13%. Comparing base (dfecbd4) to head (bbd3f39).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #7501   +/-   ##
=======================================
  Coverage   88.13%   88.13%           
=======================================
  Files         608      608           
  Lines       14207    14208    +1     
  Branches     3564     3565    +1     
=======================================
+ Hits        12521    12522    +1     
  Misses       1496     1496           
  Partials      190      190

☔ View full report in Codecov by Harness.
📢 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.

fix(DefaultLegendContent): omit empty value from legend icon aria-label

bbd3f39

coderabbitai Bot reviewed Jun 29, 2026

View reviewed changes

PavelVanecek merged commit 494aae6 into recharts:main Jun 29, 2026
58 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(DefaultLegendContent): omit empty value from legend icon aria-label#7501

fix(DefaultLegendContent): omit empty value from legend icon aria-label#7501
PavelVanecek merged 1 commit into
recharts:mainfrom
mahirhir:fix-legend-icon-aria-label-empty-value

mahirhir commented Jun 29, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jun 29, 2026 •

edited

Loading

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot Jun 29, 2026

Uh oh!

codecov Bot commented Jun 29, 2026

Assets Changed:

Assets Changed:

Assets Changed:

Uh oh!

codecov Bot commented Jun 29, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Uh oh!

Conversation

mahirhir commented Jun 29, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

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

Uh oh!

Walkthrough

Estimated code review effort

Possibly related PRs

Suggested reviewers

❌ Failed checks (1 warning)

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Jun 29, 2026

Choose a reason for hiding this comment

Uh oh!

codecov Bot commented Jun 29, 2026

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Assets Changed:

Assets Changed:

Uh oh!

codecov Bot commented Jun 29, 2026

Codecov Report

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

mahirhir commented Jun 29, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jun 29, 2026 •

edited

Loading