🎨 Palette: Improve accessibility for OAuth docs external link button - #198
MillionthOdin16 wants to merge 1 commit into
Conversation
…nk button Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@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. |
|
Caution The consumer version of Gemini Code Assist on GitHub has been sunset. All code review activity has officially ceased. |
📝 WalkthroughWalkthroughThe OAuth provider documentation icon button now has an explicit accessible label and is excluded from sequential keyboard focus within the documentation link. ChangesOAuth documentation link accessibility
Estimated code review effort: 1 (Trivial) | ~2 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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 `@web/src/components/OAuthProvidersCard.tsx`:
- Around line 225-230: Update the documentation-link control around the Button
in OAuthProvidersCard so it renders only one interactive element. Use the anchor
as the styled icon control, or use Button’s supported anchor/polymorphic mode,
and remove the nested button while preserving the docs URL, icon styling,
accessible label, and link behavior.
- Line 228: Update OAuthProvidersCard’s provider documentation link to use a
translated “open provider docs” string from the existing useI18n() setup, and
reuse that localized value for both aria-label and title instead of constructing
a hardcoded English label.
🪄 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: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 9de5013d-cd37-473d-8fc2-dd73d1a3060b
📒 Files selected for processing (1)
web/src/components/OAuthProvidersCard.tsx
| <Button | ||
| ghost | ||
| size="icon" | ||
| aria-label={`Open ${p.name} docs`} | ||
| tabIndex={-1} | ||
| > |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Do not nest an interactive button inside the documentation link.
tabIndex={-1} removes the inner button from sequential focus but it remains a second interactive element inside <a>, leaving ambiguous semantics for assistive technologies. Render a single interactive control instead: make the anchor the styled icon control or use the Button component’s supported anchor/polymorphic mode.
🤖 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 `@web/src/components/OAuthProvidersCard.tsx` around lines 225 - 230, Update the
documentation-link control around the Button in OAuthProvidersCard so it renders
only one interactive element. Use the anchor as the styled icon control, or use
Button’s supported anchor/polymorphic mode, and remove the nested button while
preserving the docs URL, icon styling, accessible label, and link behavior.
| <Button | ||
| ghost | ||
| size="icon" | ||
| aria-label={`Open ${p.name} docs`} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Localize the accessible label.
The new aria-label is hardcoded in English despite this component using useI18n(). Add a translated “open provider docs” string and reuse it for both aria-label and title.
🤖 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 `@web/src/components/OAuthProvidersCard.tsx` at line 228, Update
OAuthProvidersCard’s provider documentation link to use a translated “open
provider docs” string from the existing useI18n() setup, and reuse that
localized value for both aria-label and title instead of constructing a
hardcoded English label.
💡 What: Added aria-label and tabIndex={-1} to the ExternalLink icon button within the OAuthProvidersCard.
🎯 Why: The icon-only button lacked accessible context and could cause redundant tab stops when nested inside an anchor tag that handles the actual navigation.
📸 Before/After: No visual changes, strictly DOM accessibility improvements.
♿ Accessibility: Screen readers now correctly identify the external docs link via the aria-label, and keyboard navigation is streamlined by removing the inner button from the tab order.
PR created automatically by Jules for task 9913244441165795710 started by @MillionthOdin16
Summary by CodeRabbit