Skip to content

🎨 Palette: Improve accessibility for OAuth docs external link button #198

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MillionthOdin16 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

🎨 Palette: Improve accessibility for OAuth docs external link button #198

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion web/src/components/OAuthProvidersCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,12 @@ export function OAuthProvidersCard({ onError, onSuccess }: Props) {
className="inline-flex"
title={`Open ${p.name} docs`}
>
<Button ghost size="icon">
<Button
ghost
size="icon"
aria-label={`Open ${p.name} docs`}

@coderabbitai coderabbitai Bot Jul 30, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

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

tabIndex={-1}
>
Comment on lines +225 to +230

@coderabbitai coderabbitai Bot Jul 30, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

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

<ExternalLink />
</Button>
</a>
Expand Down
Loading