bug: [A11Y] Clipboard copy button lacks accessible label

Author: huangkevin-aprCreated Jan 6, 2026Updated Jun 13, 2026
Labels🐞❔ unconfirmed bug

Provide environment information

Environment

  • Browser: Edge
  • Accessibility Tool: IBM Accessibility Checker
  • Component: www/src/components/landingPage/ClipboardSelect.tsx

Describe the bug

Description

The clipboard copy button in the landing page lacks an accessible label, causing accessibility violations for users relying on screen readers.

Current Behavior

The <Menu.Button> component in ClipboardSelect.tsx has no associated label, making it inaccessible to screen reader users. The button only contains an SVG icon without any text or aria-label.

Expected Behavior

The button should have a proper accessible label so screen reader users can understand its purpose.

Accessibility Impact

  • WCAG 2.1 Level A: Fails 4.1.2 Name, Role, Value
  • Impact: Screen reader users cannot identify the button's purpose
  • Severity: Medium - Core functionality is inaccessible

Proposed Solution

Add aria-label="Copy to clipboard" to the Menu.Button and mark the decorative SVG icon as aria-hidden="true".

Screenshots

Image

Reproduction repo

https://github.com/t3-oss/create-t3-app/blob/main/www/src/components/landingPage/ClipboardSelect.tsx

To reproduce

Steps to Reproduce

  1. Run IBM Accessibility Checker on the landing page
  2. Navigate to the clipboard copy button element
  3. Observe violation: "Form control element

Additional information

No response