🎨 Palette: Add ARIA label to OAuth external link button

[MillionthOdin16]

What

Added aria-label and tabIndex={-1} to the icon-only <Button> component nested inside an <a> tag in OAuthProvidersCard.tsx.

Why

When an interactive element like an icon-only <Button> is nested inside another focusable element (an <a> tag with an href), it creates multiple problems for keyboard navigators and screen readers. Adding tabIndex={-1} removes the redundant tab stop, ensuring users only focus on the wrapper link once, while the aria-label guarantees that screen readers properly announce the button's action even if accessed directly via a screen reader's element list.

Accessibility

• Screen Readers: The nested button is now explicitly labeled with aria-label="Open {provider name} docs", preventing ambiguous "button" announcements.
• Keyboard Navigation: Reduced friction by removing a redundant tab stop via tabIndex={-1} on the nested button, allowing smooth navigation across the <a> tag without double-focusing.

---

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

Summary by CodeRabbit

• Accessibility
  • Improved the accessibility and keyboard focus behavior of OAuth provider documentation links.

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

[gemini-code-assist]

Caution

The consumer version of Gemini Code Assist on GitHub has been sunset. All code review activity has officially ceased.

[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: 5d2d9997-00d4-4542-9c5e-7f87d7a30984

📥 Commits

Reviewing files that changed from the base of the PR and between 64702f8 and 1f849e1.

📒 Files selected for processing (1)

• web/src/components/OAuthProvidersCard.tsx

---

📝 Walkthrough

Walkthrough

The OAuth provider docs button now has a provider-specific aria-label and tabIndex={-1}.

Changes

OAuth docs button accessibility

Layer / File(s)	Summary
Update docs button attributes web/src/components/OAuthProvidersCard.tsx	The docs button now includes an aria-label and is excluded from sequential keyboard focus.

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

Possibly related PRs

• MillionthOdin16/hermes-agent#143: Updates the same docs button with identical accessibility props.
• MillionthOdin16/hermes-agent#146: Makes the same OAuthProvidersCard button attribute changes.
• MillionthOdin16/hermes-agent#153: Adds the same label and focus behavior to the nested docs button.

Suggested reviewers: copilot

🚥 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 clearly reflects the main accessibility change by adding an ARIA label to the OAuth docs button.
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-oauth-aria-11769879111268055730

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