🎨 Palette: Fix a11y for external docs button in OAuth Providers Card

[MillionthOdin16]

💡 What: Added aria-label and tabIndex={-1} to an icon-only <Button> nested inside an <a> tag within the OAuthProvidersCard component.
🎯 Why: To prevent a "double tab stop" accessibility issue and improve screen reader experience for users trying to access external documentation links.
📸 Before/After: No visual changes.
♿ Accessibility: Fixes a keyboard navigation and screen reader naming issue where an inner interactive element lacked description and caused an extra, confusing tab focus state.

---

PR created automatically by Jules for task 14690492189608683739 started by @MillionthOdin16

Summary by CodeRabbit

• Accessibility
  • Improved screen reader support for OAuth provider documentation links.
  • Streamlined keyboard navigation by removing the decorative icon button from the tab order.

[google-labs-jules]

👋 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 @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

---

For security, I will only act on instructions from the user who triggered this task.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 1112d6b6-c13e-4dd8-8699-c600a4d9176f

📥 Commits

Reviewing files that changed from the base of the PR and between abc22cd and c973b54.

📒 Files selected for processing (1)

• web/src/components/OAuthProvidersCard.tsx

---

📝 Walkthrough

Walkthrough

The OAuth provider documentation icon button now has an explicit provider-specific aria-label and tabIndex={-1}, while the surrounding provider rendering remains unchanged.

Changes

OAuth accessibility update

Layer / File(s)	Summary
Documentation icon button accessibility web/src/components/OAuthProvidersCard.tsx	The “Open <provider> docs” icon button now exposes an aria-label and is removed from the keyboard tab order.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Possibly related PRs

• MillionthOdin16/hermes-agent#143: Adds the same accessibility props to the OAuth provider documentation icon button.
• MillionthOdin16/hermes-agent#146: Updates the same icon button with an explicit label and tabIndex={-1}.
• MillionthOdin16/hermes-agent#153: Addresses redundant focus behavior on the same documentation link button.

Suggested reviewers: copilot, austinpickett

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the accessibility fix to the external docs button in OAuth Providers Card.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch palette/fix-a11y-oauth-providers-card-14690492189608683739

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install timed out. The project may have too many dependencies for the sandbox.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[gemini-code-assist]

Code Review

This pull request adds an aria-label and tabIndex={-1} to a Button component nested inside an anchor tag in OAuthProvidersCard.tsx. The review feedback correctly points out that nesting interactive elements is invalid HTML and violates accessibility standards. It suggests cleaner alternatives, such as using asChild or styling the anchor tag directly, rather than using tabIndex={-1} as a workaround.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[gemini-code-assist]

Nesting an interactive element like <Button> (which renders a <button>) inside another interactive element <a> is invalid HTML and violates accessibility standards (WCAG / HTML5 spec). This causes screen readers and keyboard navigation to behave unexpectedly because of nested focusable elements.

Instead of using tabIndex={-1} to patch the double-focus issue, we should avoid nesting interactive elements entirely.

Recommended Solutions:

1. Use asChild (if supported by the UI library):
   If the Button component supports asChild (common in Radix/shadcn-based UI libraries), you can swap the nesting so the Button is the outer element and renders as an <a> tag:

   <Button ghost size="icon" asChild>
     <a
       href={p.docs_url}
       target="_blank"
       rel="noopener noreferrer"
       aria-label={`Open ${p.name} docs`}
     >
       <ExternalLink />
     </a>
   </Button>

2. Style the <a> tag directly:
   Remove the <Button> component entirely and apply the button's classes (e.g., ghost, icon size) directly to the <a> tag.