Skip to content

🎨 Palette: Add ARIA label to external docs link button #166

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: Add ARIA label to external docs link button #166

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`}
tabIndex={-1}
>
Comment on lines +225 to +230

@coderabbitai coderabbitai Bot Jul 21, 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

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Map the relevant file structure first
ast-grep outline web/src/components/OAuthProvidersCard.tsx --view expanded || true

# Inspect the changed area with line numbers
sed -n '200,245p' web/src/components/OAuthProvidersCard.tsx

# Find the Button component implementation and any asChild/link composition support
fd -a 'Button.*' web src . 2>/dev/null | head -n 50
rg -n --hidden --glob '!**/node_modules/**' --glob '!**/dist/**' --glob '!**/build/**' 'asChild|Slot|forwardRef|button' web/src -g '*Button*' -g '*.tsx' -g '*.ts'

# Search for usages of Button wrapped in anchors or link composition patterns
rg -n --hidden --glob '!**/node_modules/**' --glob '!**/dist/**' --glob '!**/build/**' '<a[^>]*>\s*<Button|<Button[^>]*asChild|aria-label=.*docs' web/src

Repository: MillionthOdin16/hermes-agent

Length of output: 24472

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Locate the UI button implementation that web/src imports
fd -a 'button.tsx' .
fd -a 'Button.tsx' .
fd -a 'button.ts' .

# Read likely candidates from the UI package if present
for f in $(fd -a 'button.tsx' . | head -n 20); do
  echo "### $f"
  sed -n '1,260p' "$f"
done

for f in $(fd -a 'Button.tsx' . | head -n 20); do
  echo "### $f"
  sed -n '1,260p' "$f"
done

Repository: MillionthOdin16/hermes-agent

Length of output: 50384

🏁 Script executed:

#!/bin/bash
set -euo pipefail

# Find how the web app resolves the `@nous-research/ui` import
rg -n --hidden --glob '!**/node_modules/**' --glob '!**/dist/**' --glob '!**/build/**' '`@nous-research/ui/ui/components/button`|`@nous-research/ui`' web packages apps -g 'tsconfig*.json' -g 'vite.config.*' -g 'webpack.config.*' -g 'package.json' -g '*.ts' -g '*.tsx'

# Inspect the web app package/workspace config for path aliases or workspace links
sed -n '1,240p' web/package.json 2>/dev/null || true
sed -n '1,260p' package.json 2>/dev/null || true
sed -n '1,260p' tsconfig.json 2>/dev/null || true
sed -n '1,260p' web/tsconfig.json 2>/dev/null || true
sed -n '1,260p' web/vite.config.* 2>/dev/null || true

# Search for a matching button implementation under any ui package path
fd -a 'button.tsx' web apps packages ui . 2>/dev/null | sed -n '1,80p'

Repository: MillionthOdin16/hermes-agent

Length of output: 26909

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "### web/package.json"
sed -n '1,220p' web/package.json

echo "### web/vite.config.ts"
sed -n '1,220p' web/vite.config.ts

echo "### root package.json"
sed -n '1,260p' package.json

echo "### lockfile hints"
rg -n --hidden --glob '!**/node_modules/**' --glob '!**/dist/**' --glob '!**/build/**' '"`@nous-research/ui`"|`@nous-research/ui`' package-lock.json pnpm-lock.yaml yarn.lock bun.lockb 2>/dev/null || true

Repository: MillionthOdin16/hermes-agent

Length of output: 7533

🌐 Web query:

@nour-research/ui 0.18.2 button asChild Slot.Root GitHub

💡 Result:

The use of Slot.Root in component patterns like Button with asChild is a common best practice in React applications, particularly when using Radix UI primitives, to ensure compatibility across different build environments and package resolutions [1][2]. In the context of a component like a Button, the asChild prop allows the component to merge its internal functionality (props, refs, event handlers) onto its child element instead of rendering a native HTML tag [1][3]. The Radix UI Slot component is used to perform this composition [1][3]. Using Slot.Root is specifically recommended when importing Slot from an umbrella package (like 'radix-ui') [2]. In some environments, simply importing Slot may result in an object namespace rather than the renderable component itself, leading to runtime errors like Element type is invalid [2]. Accessing Slot.Root explicitly ensures that the correct, renderable component is used [2]. While there is no specific package named @nour-research/ui, the pattern you are inquiring about is identical to the standard implementation found in widespread UI libraries like shadcn/ui [4][5] and various projects using the Radix Slot utility [1][6]. Implementation Pattern: import { Slot } from "radix-ui"; function Button({ asChild,...props }) { const Comp = asChild? Slot.Root: "button"; return <Comp {...props} />; }

Citations:

🌐 Web query:

"@nous-research/ui" 0.18.2 button source Slot.Root

💡 Result:

In the context of the @nous-research/ui library at version 0.18.2, the use of Slot.Root relates to the Radix UI Slot primitive, which is standardly used to implement an asChild API pattern [1][2][3]. The Slot.Root component merges its props onto its immediate child, allowing a custom component (such as a Button) to be polymorphic [1][4]. When a user passes the asChild prop to a component like Button, the component switches its underlying HTML element from the default (e.g., button) to the Slot.Root component [1][3]. Key points regarding its usage in this library: 1. Pattern: It is employed to facilitate the asChild pattern, enabling developers to render the Button component as a different HTML element or another component while still inheriting the Button's functionality and styling [1][3]. 2. Implementation: The standard implementation involves conditionally setting the component tag: const Comp = asChild? Slot.Root: 'button';, followed by returning <Comp {...props} /> [1][3]. 3. Breaking Changes: Version 0.18.2 of @nous-research/ui introduced breaking changes to the Button component's API, specifically removing several props (ghost, size, outlined, destructive) from ButtonProps [5]. Projects upgrading to this version often require updates to their usage of the Button component to align with the new design system primitives [6]. For detailed implementation logic, you can refer to the Radix UI Slot documentation, as @nous-research/ui builds upon these established primitives [1][2].

Citations:

Avoid nesting the icon button inside the docs link. Put the aria-label on the <a> and render a single interactive element here; tabIndex={-1} only removes the extra tab stop, it doesn’t fix the nested control semantics.

🤖 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
docs-link rendering around the Button and its enclosing anchor so the anchor
carries the `aria-label` and is the only interactive element. Remove the nested
icon button and its `tabIndex={-1}`, while preserving the existing icon
appearance and link destination.

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