Icon-only buttons on the instrument toolbar, results summary and navigation have no accessible name #1701

Activity

1. joshunrau

   added

   BugType: existing behavior is wrongType: existing behavior is wrong

   Priority: MediumReal value; schedule normallyReal value; schedule normally

   Difficulty: LowIsolated change, about 2 hours or lessIsolated change, about 2 hours or less

   Area: Webapps/web (clinician-facing React SPA)apps/web (clinician-facing React SPA)

   Area: SharedCross-tier packages (schemas, react-core, etc.) not covered by another areaCross-tier packages (schemas, react-core, etc.) not covered by another area

   Good First IssueWell-scoped, low-risk and self-contained; a good entry point for a new contributorWell-scoped, low-risk and self-contained; a good entry point for a new contributor

   on Oct 7, 2026
2. joshunrau commented on Oct 26, 2026

   

   joshunrau

   on Oct 26, 2026

   CollaboratorAuthor

   More actions

   Still reproduces on main (d86740e). Every listed site is unchanged.

   Sites the list misses

   • apps/web/src/routes/_app/admin/settings.tsx:179-183, :203-207, :240-247: the three help buttons on the settings page. A name alone does not fix these. They are HoverCard triggers, which Radix documents as "intended for sighted users only" and "ignored by screen readers" (https://www.radix-ui.com/primitives/docs/components/hover-card). The 1.1.15 trigger sets no aria-describedby, so the help text is never tied to the button. Switch them to the Tooltip + aria-label pattern in MailServerForm.tsx:90-102. Radix Tooltip points aria-describedby at its content while it is open.
   • BulkRemoteAssignmentWizard.tsx:179 and admin/users/create.tsx:362 (the welcome-email fallback dialog, whose whole job is copying the message) both import libui's CopyButton. Fixing react-core's leaves them unnamed.
   • apps/playground/src/components/Header/ShareButton/ShareButton.tsx:96 uses react-core's CopyButton. Playground icon-only buttons have no accessible names, and editor tabs cannot be closed from the keyboard #1763 lists the Share trigger (:49-51) but not this one, so this issue fixes it.

   CopyButton

   react-core's copy is libui's with only the import paths changed, and libui 6.18.0 (the latest release) ships the same file, so there is no upstream fix to wait for. It accepts only size, text and variant and spreads nothing, so a caller cannot pass aria-label.

   • Add label?: LocalizedText (the prop shape packages/react-core/AGENTS.md prescribes for copy the host supplies), defaulting to "Copy to clipboard". Pass "Copy link" from assignments.tsx:51 and remote-assignment.tsx:61.
   • Switch the two libui imports to @opendatacapture/react-core.
   • Announce success in a role="status" sr-only span next to the button. Render it empty from the start and fill it on success. Screen readers do not reliably re-announce a focused button whose name changes, so swapping the label is the weaker option.
   • SUCCESS resets only on onMouseLeave (CopyButton.tsx:29-31), and clicks are ignored in that state, so a keyboard user can copy only once. Also reset on onBlur. That keeps the ignore-while-copied test at CopyButton.test.tsx:57 passing.
   • CopyButton.test.tsx never initialises i18n. Once the button calls t(), add i18n.init({ translations: {} }) in beforeAll, as the AGENTS.md says.

   Other notes

   • InstrumentCard.tsx:86-92 renders one of two badges. Give each its own name ("Open-source license" / "Not an open-source license"), not one generic "License".
   • The InteractiveContent language trigger and Gateway header's theme and language buttons have no accessible name, so screen readers announce both as just "button" #1722's LanguageToggle both need "Change language". Put one LocalizedText constant next to LANGUAGE_LABELS in packages/react-core/src/utils/language.ts. Gateway header's theme and language buttons have no accessible name, so screen readers announce both as just "button" #1722 still needs libui's LanguageToggle to forward the name, and 6.18.0 does not, so do not block this issue on it.

   Tests

   • InstrumentCard.test.tsx:49 finds the badge with getByRole('button', { name: '' }), so naming the badge breaks it.
   • testing/src/pages/_app/session/remote-assignment.page.ts:20-22 finds the copy button with input[readonly] + button because it has no name. Switch it to getByRole('button', { name: 'Copy link' }), and remote-assignment.spec.ts:85-109 then covers the name end to end.
   • No e2e spec touches the summary's copy, download or print buttons. The Download click at instrument-completion.spec.ts:104 is the subject table's export menu. Assert the three names after the summaryHeading check at :42.
   • No web spec runs an interactive instrument. playground.spec.ts:218-227 does, and its preview renders the same InteractiveContent, so assert the toolbar names there.
   • Settings help buttons: neither admin-settings.spec.ts nor settings.test.tsx covers them yet.
   • auth.spec.ts:51: find the demo row's button by name. For the hamburger, add a PHONE_VIEWPORT test like datahub.spec.ts:7-8. No spec opens the mobile nav today.
   • These positional lookups should become name lookups: InteractiveContent.test.tsx:161,227,234, InstrumentSummary.test.tsx:68,103,192, FormContent.test.tsx:35, WalkthroughProvider.test.tsx:98.

   Landing

   #1825 edits Navbar.tsx, Navbar.test.tsx and InstrumentSummary.test.tsx. #1730 replaces a test in Navbar.test.tsx. Branch from main after #1825 merges.

   _{Triage note written with Claude Code. Code references point at main @ d86740e.}