🎨 Palette: [UX improvement] Improve keyboard accessibility for form controls#55
🎨 Palette: [UX improvement] Improve keyboard accessibility for form controls#55aloewright wants to merge 2 commits into
Conversation
…ontrols Co-authored-by: aloewright <3641844+aloewright@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
|
Warning Review limit reached
More reviews will be available in 40 minutes and 46 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
Deploying with
|
| Status | Name | Latest Commit | Updated (UTC) |
|---|---|---|---|
| ✅ Deployment successful! View logs |
postpilot | 152b60e | May 30 2026, 05:53 AM |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request improves accessibility and focus styles in the PlaygroundView component by adding aria-label attributes and custom focus-visible outlines. The reviewer provided feedback pointing out that the added aria-label attributes on the 'Guide' and 'Preset' selectors are redundant because they are already wrapped in labels, and suggested adjusting the focus outline styles on .pp-select to avoid potential accessibility issues in environments that do not support :focus-visible.
| <select | ||
| aria-label="Guide" | ||
| className="pp-select" |
There was a problem hiding this comment.
Since the <select> element is already wrapped inside a <label> element by the Control component, it is implicitly associated and will be correctly announced by screen readers. Adding a hardcoded aria-label is redundant and introduces a maintenance risk where the visual label and the accessible name could desync (violating WCAG 2.5.3 Label in Name if they diverge).
| <select | |
| aria-label="Guide" | |
| className="pp-select" | |
| <select | |
| className="pp-select" |
| <select | ||
| aria-label="Preset" | ||
| className="pp-select" |
There was a problem hiding this comment.
Similar to the Guide selector, this <select> is already wrapped in a <label> via the Control component. The aria-label is redundant and risks desyncing from the visual label.
| <select | |
| aria-label="Preset" | |
| className="pp-select" | |
| <select | |
| className="pp-select" |
| outline: none; | ||
| } | ||
| .pp-select:focus-visible { | ||
| outline: 2px solid var(--strand-color-accent-lede); | ||
| outline-offset: 2px; | ||
| } |
There was a problem hiding this comment.
Setting outline: none on the base .pp-select class removes the outline entirely for all states, which can cause unexpected accessibility issues if :focus-visible is not triggered or supported. It is safer and more idiomatic to only remove the outline on :focus, matching the Tailwind behavior used on the textarea above.
}
.pp-select:focus {
outline: none;
}
.pp-select:focus-visible {
outline: 2px solid var(--strand-color-accent-lede);
outline-offset: 2px;
}
…ontrols Co-authored-by: aloewright <3641844+aloewright@users.noreply.github.com>
What: Added explicit
aria-labelattributes to the Guide and Preset select dropdowns and the inputtextareawithinPlaygroundView. Also added distinct visual focus states (focus-visible:outline-[var(--strand-color-accent-lede)]) to these controls.Why: The custom form wrappers do not implicitly link labels via
id/htmlFor, causing screen readers to announce unlabelled controls. Additionally, usingfocus:outline-nonestripped default keyboard focus indicators making navigation harder for sighted keyboard users.Before/After: Form elements used to drop their default outline without applying a custom one when focused; they now show a clear strand-colored accent ring upon focus via
focus-visible.Accessibility: Improves WCAG compliance for Focus Visible (2.4.7) and Name, Role, Value (4.1.2). Screen readers will now explicitly announce the purpose of the Guide selector, Preset selector, and input field.
PR created automatically by Jules for task 13718453007129190310 started by @aloewright