Short summary
The copy-to-clipboard button in the homepage hero code demo (modules/home/hero-code.tsx) contains only icon children with no aria-label attribute. Screen readers announce it as an unlabeled interactive element, providing no usable context to the user.
Steps to reproduce
- Open the Editron homepage (
/)
- Inspect the code demo card in the hero section
- Locate the copy button (top-right of the card, shows a
Copy or Check icon)
- Use a screen reader (VoiceOver, NVDA, or browser accessibility inspector) to focus the button
Expected behavior
The screen reader should announce something like "Copy code, button" when focused, and "Copied to clipboard, button" after clicking.
Actual behavior
The screen reader announces "button" with no name — the user has no way to know what the button does.
Affected area
Other
Environment
All browsers / OS combinations. Testable with browser DevTools accessibility panel (no screen reader needed — the button will show "No accessible name" in the Accessibility tree).
Relevant code:
// modules/home/hero-code.tsx:60-65 (current — missing aria-label)
<button
onClick={onCopy}
className="text-muted-foreground hover:text-foreground transition-colors"
>
{copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
</button>Fix:
<button
onClick={onCopy}
aria-label={copied ? "Copied to clipboard" : "Copy code"}
className="text-muted-foreground hover:text-foreground transition-colors"
>
{copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
</button>The dynamic aria-label also communicates the state change (copy → copied) to assistive technology without any additional ARIA needed.
Note: This is the same class of issue already fixed in other components via issues #283 (env-manager.tsx), #281 (playground-explorer.tsx), and #279 (terminal.tsx). The homepage hero section was missed in those passes.
Screenshots, logs, or recordings
Affected file: modules/home/hero-code.tsx lines 60–65
Confirmation
Short summary
The copy-to-clipboard button in the homepage hero code demo (
modules/home/hero-code.tsx) contains only icon children with noaria-labelattribute. Screen readers announce it as an unlabeled interactive element, providing no usable context to the user.Steps to reproduce
/)CopyorCheckicon)Expected behavior
The screen reader should announce something like "Copy code, button" when focused, and "Copied to clipboard, button" after clicking.
Actual behavior
The screen reader announces "button" with no name — the user has no way to know what the button does.
Affected area
Other
Environment
All browsers / OS combinations. Testable with browser DevTools accessibility panel (no screen reader needed — the button will show "No accessible name" in the Accessibility tree).
Relevant code:
Fix:
The dynamic
aria-labelalso communicates the state change (copy → copied) to assistive technology without any additional ARIA needed.Note: This is the same class of issue already fixed in other components via issues #283 (
env-manager.tsx), #281 (playground-explorer.tsx), and #279 (terminal.tsx). The homepage hero section was missed in those passes.Screenshots, logs, or recordings
Affected file:
modules/home/hero-code.tsxlines 60–65Confirmation