fix: add aria-label to icon-only activity bar buttons in playground sidebar - #535
fix: add aria-label to icon-only activity bar buttons in playground sidebar#535Somil450 wants to merge 1 commit into
Conversation
…idebar Closes piyushdotcomm#525 The three activity bar buttons (Explorer, Dependencies, Environment) had title attributes but no aria-label. Screen readers use aria-label, not title, so these buttons were announced as just 'button' with no context for screen reader users. Also adds aria-hidden=true to the Lucide icons inside each button to prevent double-reading (once from icon SVG, once from label). Fixes WCAG 2.1 SC 4.1.2 (Name, Role, Value) - Level A.
|
Warning Review limit reached
Next review available in: 29 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
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. Comment |
👋 Thanks for opening a PR, @Somil450!Your PR has entered the 🚦 PR Review Pipeline.
What happens next
A pipeline status comment will appear below and update automatically as your PR progresses. While you wait
This comment is posted only once. |
PR Summary by QodoFix a11y: add aria-labels to icon-only playground sidebar buttons
AI Description
Diagram
High-Level Assessment
Files changed (1)
|
Code Review by Qodo
Context used✅ Compliance rules (platform):
22 rules 1. Tooltip/label mismatch
|
![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
| onClick={() => setActiveTab("env")} | ||
| className={`p-2 rounded-lg transition-colors ${activeTab === "env" ? "text-primary bg-primary/10" : "text-muted-foreground hover:text-foreground"}`} | ||
| title="Environment" | ||
| aria-label="Environment Variables" |
There was a problem hiding this comment.
1. Tooltip/label mismatch 🐞 Bug ⚙ Maintainability
The Environment tab button now exposes the accessible name "Environment Variables" via aria-label but still uses title="Environment", creating inconsistent naming between the browser tooltip and assistive tech. This mismatch is unique to the env button (Explorer/Dependencies match) and can confuse users who rely on the tooltip.
Agent Prompt
### Issue description
The Environment activity bar button has `title="Environment"` but `aria-label="Environment Variables"`, so the tooltip name differs from the accessible name.
### Issue Context
Explorer and Dependencies buttons have matching `title`/`aria-label`, and the sidebar section heading also uses "Environment Variables", so the tooltip is the inconsistent element.
### Fix Focus Areas
- modules/playground/components/playground-sidebar.tsx[57-64]
- modules/playground/components/playground-sidebar.tsx[69-74]
ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools
2 participants
Summary
Closes #525
Adds
aria-labelto the 3 icon-only activity bar buttons inPlaygroundSidebarand marks their Lucide icons asaria-hidden="true".Problem
The Explorer, Dependencies, and Environment buttons in the playground sidebar activity bar had
titleattributes but noaria-label. Screen readers usearia-label(nottitle) to announce button names, so these buttons were announced only as "button" with zero context.This violates WCAG 2.1 SC 4.1.2 (Name, Role, Value), a Level A requirement.
Change
// modules/playground/components/playground-sidebar.tsx <button onClick={() => setActiveTab("explorer")} title="Explorer" + aria-label="Explorer" > - <FolderOpen className="h-5 w-5" /> - + <FolderOpen className="h-5 w-5" aria-hidden="true" /> - </button> <button onClick={() => setActiveTab("packages")} title="Dependencies" + aria-label="Dependencies" > - <Package className="h-5 w-5" /> - + <Package className="h-5 w-5" aria-hidden="true" /> - </button> <button onClick={() => setActiveTab("env")} title="Environment" + aria-label="Environment Variables" > - <Server className="h-5 w-5" /> - + <Server className="h-5 w-5" aria-hidden="true" /> - </button> - ``` `aria-hidden="true"` on the icons prevents double-reading: without it, some screen readers announce both the SVG title and the button label. ## Files Changed - `modules/playground/components/playground-sidebar.tsx` - 6 lines changed