Comfy-Org / Comfy-Org/registry-web

a11y: non-interactive elements used for actions in NodeDetails (keyboard-inaccessible 'More', invalid nested anchor)

Open Beginner friendly
#277 1 comment 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
17
Forks
12
PR merge metrics
No merged PRs in 30d

Description

## What

Two accessibility / valid-HTML issues in `components/nodes/NodeDetails.tsx`:

1. **Version-history "More" is a `div` with `onClick` + `tabIndex={0}` but no key handler** (~line 517). It's focusable but cannot be activated with Enter/Space, so keyboard users can tab to it and get stuck. A native `` (or a role + key handler) gives activation for free.

```tsx

selectVersion(version)}
tabIndex={0}
>
{t("More")}

```

2. **`` without `href` nested inside a ``** ("Download Latest", ~line 564). An anchor with no `href` is not a valid link, and nesting it in a `` produces invalid/interactive-nesting HTML that confuses assistive tech. Drop the anchor and put the label directly in the `Button`.

```tsx
{t("Download Latest")} // → just: {t("Download Latest")}
```

## Why

Keyboard-only and screen-reader users can't reliably operate these controls; #2 is also invalid HTML.

## How

1. Replace the "More" `div` with a `` styled to match (remove the now-redundant `tabIndex`).
2. Remove the empty `` wrapper around "Download Latest".

## Notes

Pre-existing on `main` (not introduced by any open PR). Surfaced by CodeRabbit while reviewing #272; filing separately to keep that PR scoped to changelog rendering.

Contributor guide

No contributing guide indexed for this repository

Research direction

Open components/nodes/NodeDetails.tsx and inspect the version-history "More" control around line 517 and "Download Latest" around line 564. Confirm the controls support keyboard activation and that the resulting markup avoids invalid interactive nesting. Done means both accessibility issues are resolved without changing their existing actions or styling.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
88/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.