Skip to content

Fix: Remove redundant alt text from logo images in user showcase#6872

Merged
ckifer merged 1 commit intorecharts:mainfrom
huangkevin-apr:fix-a11y-log
Jan 12, 2026
Merged

Fix: Remove redundant alt text from logo images in user showcase#6872
ckifer merged 1 commit intorecharts:mainfrom
huangkevin-apr:fix-a11y-log

Conversation

@huangkevin-apr
Copy link
Contributor

@huangkevin-apr huangkevin-apr commented Jan 12, 2026

Description

This PR addresses 9 accessibility violations (#6871) identified by IBM Equal Access Accessibility Checker in the "Who's using recharts?" section. The fix removes redundant alt text from logo images that are already accompanied by visible text labels within the same link, improving the experience for screen reader users by eliminating unnecessary repetition.

Related Issue

#6871

The accessibility checker identified 9 instances of redundant image alternative text:
Violations found:

  • "The text alternative for an image within a link should not repeat the link text or adjacent link text"
  • Affected logos: ShadeUI, EvilCharts, 阿里指数, 阿里数据, Fyndiq, chayns, Demisto, Squadlytics, ahrefs
image

Motivation and Context

Changed the image alt attribute from alt={entry.name} to alt="" (empty string), making the images decorative:

<a href={entry.url} target="_blank" title={entry.name} rel="noreferrer">
  <img src={entry.logoImgUrl} alt="" />
  <span className="user-name">{entry.name}</span>
</a>

Why empty alt (alt="") is correct:

  • The visible text span already provides the accessible name for the link
  • The logo image is decorative within this context (it doesn't add unique information)
  • Empty alt tells screen readers to skip the image, avoiding redundancy
  • The link's title attribute still provides hover tooltip for mouse users

Note: We also removed the redundant title={entry.name} from the <img> tag as it served no purpose and could cause additional tooltip clutter.

How Has This Been Tested?

Screenshots (if appropriate):

Fix Before:
image

Fix After:
image

Testing

✅ Verified with IBM Equal Access Accessibility Checker
✅ All 9 "redundant alt text" violations resolved
✅ Screen reader testing (NVDA/JAWS): Each link now announces once (e.g., "ShadeUI, link" instead of "ShadeUI, image, ShadeUI, link")
✅ Visual appearance unchanged (logos and text still display normally)

Types of changes

  • 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.
  • 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

  • Style
    • Updated the user logo image element's accessibility attributes and display behavior.

✏️ Tip: You can customize this high-level summary in your review settings.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Jan 12, 2026

Walkthrough

The user logo image element in the IndexView component was modified to set the alt attribute to an empty string, removing the previously displayed alt text from the image element.

Changes

Cohort / File(s) Summary
User Logo Image Update
www/src/views/IndexView/index.tsx
Removed/cleared alt text attribute from user logo image element by setting alt=""

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Possibly related issues

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title directly and accurately summarizes the main change: removing redundant alt text from logo images in the user showcase section.
Description check ✅ Passed The description is comprehensive and well-structured, covering all key sections: clear problem statement, related issue, detailed motivation, technical rationale, testing verification, and marked bug fix checkbox.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing touches
  • 📝 Generate docstrings

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8c51f00 and 0a214dc.

📒 Files selected for processing (1)
  • www/src/views/IndexView/index.tsx
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}

📄 CodeRabbit inference engine (CONTRIBUTING.md)

**/*.{ts,tsx}: Never use any type (implicit or explicit) in TypeScript code
Prefer unknown over any and refine the type in TypeScript
Type function parameters and return values explicitly in TypeScript, do not rely on implicit any or inference; exceptions are React components and trivial functions
Do not use as type assertions in TypeScript; the only exception is as const

All imports from recharts must use the public API entry point (e.g., import { TooltipIndex } from 'recharts'). Imports from internal paths like recharts/types/* or recharts/src/* are not allowed and will fail the linter.

Files:

  • www/src/views/IndexView/index.tsx
**/*.{js,ts,tsx}

📄 CodeRabbit inference engine (CONTRIBUTING.md)

Ensure code lints by running npm run lint and follows Airbnb's Style Guide

Files:

  • www/src/views/IndexView/index.tsx
🔇 Additional comments (1)
www/src/views/IndexView/index.tsx (1)

88-97: LGTM! Correct accessibility fix for decorative images.

The change to alt="" is appropriate here. Since the link contains visible text (<span className="user-name">{entry.name}</span>) that provides the accessible name, marking the logo image as decorative prevents screen readers from announcing redundant information. The title attribute on the anchor still preserves the hover tooltip.


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.

Copy link
Member

@ckifer ckifer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks

@codecov
Copy link

codecov bot commented Jan 12, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.31%. Comparing base (8c51f00) to head (0a214dc).
⚠️ Report is 5 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #6872   +/-   ##
=======================================
  Coverage   94.31%   94.31%           
=======================================
  Files         559      559           
  Lines       53502    53502           
  Branches     5158     5158           
=======================================
  Hits        50462    50462           
  Misses       3031     3031           
  Partials        9        9           

☔ 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.

@ckifer ckifer merged commit 8e14b3a into recharts:main Jan 12, 2026
39 checks passed
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.

2 participants