Playground icon-only buttons have no accessible names, and editor tabs cannot be closed from the keyboard #1763

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: Playgroundapps/playground (in-browser instrument editor)apps/playground (in-browser instrument editor)

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

   

   joshunrau

   on Oct 26, 2026

   CollaboratorAuthor

   More actions

   Still reproduces on main (d86740e).

   Gaps in the suggested fix

   • CloneButton.tsx:78 and ShareButton.tsx:101 write their tooltip t() inline. Hoist each into one const shared by aria-label and Tooltip.Content. In CloneButton the same string is also the dialog title (:46).
   • The ActionsDropdown trigger (ActionsDropdown.tsx:31-33) has no tooltip, so there is no text to reuse. It needs a new string, e.g. t({ en: 'More actions', fr: "Plus d'actions" }).
   • EditorTab needs a wrapper around the select button and the new close button.
     • Move the border, background and last:border-r classes to the wrapper. :last-child is evaluated among the toolbar row's children (Editor.tsx:62-86), and the select button would never be last inside its wrapper.
     • With one onClick per button, xRef and the event.target as HTMLElement cast go away.
     • Keep fix: resolve 26 low-difficulty issues, one commit each #1825's aria-current on the select button.
     • Do not switch to role="tablist"/role="tab". A tablist owns only tabs and a tab's children are presentational, so the close button would have no valid place.
   • Closing the focused tab unmounts its close button, and focus drops to <body>. Move focus to the next tab, else the previous one, else View Files.

   Tests

   • Unit: land after build: upgrade dependencies held back by breaking changes #1660, which adds happy-dom and @testing-library/react to the playground with a per-file // @vitest-environment happy-dom docblock (Editor/__tests__/MonacoEditor.test.tsx). On main the playground depends on neither. If this has to go first, renderToStaticMarkup (as build: upgrade dependencies held back by breaking changes #1660's Resizable/__tests__/ResizableHandle.test.tsx does) can pin the aria-labels and the close button's markup, but not the click.
     • Header/ActionButton/__tests__/ActionButton.test.tsx and Editor/__tests__/EditorButton.test.tsx: the button resolves by role with the tooltip text as its name.
     • Editor/__tests__/EditorTab.test.tsx: clicking Close a.ts removes it from openFilenames, and clicking the other button selects it. Drive the real useAppStore with idb-keyval and @/instruments mocked, as fix: resolve 26 low-difficulty issues, one commit each #1825's slice tests do.
   • E2E: fix: resolve 26 low-difficulty issues, one commit each #1825's new specs find these controls by icon class: button:has(svg.lucide-save), button:has(svg.lucide-columns-3), button:has(svg.lucide-ellipsis-vertical) and tab('a.ts').locator('svg.lucide-x'). The last one stops matching once the X leaves the tab button. Land after fix: resolve 26 low-difficulty issues, one commit each #1825 and replace all four with role locators as PlaygroundPage members.
     • Keep fix: resolve 26 low-difficulty issues, one commit each #1825's button[aria-current] filter for the tab itself. getByRole('button', { name: 'a.ts' }) also matches Close a.ts, because Playwright matches name as a substring unless exact: true. Even with exact: true it matches the sidebar's a.ts file button, whose name Playwright takes from its embedded <input> value.
     • Keyboard case: focus the a.ts tab, press Tab, assert Close a.ts is focused, press Enter. Then assert the tab is gone, and b.ts keeps aria-current="true" and has focus.

   Same area, not covered

   • Share popover: the link <Input readOnly id="link"> has no label (ShareButton.tsx:95). The Preview Mode help text is a hidden span that only group-hover/help:block reveals (ShareButton.tsx:69-77), so keyboard and screen-reader users never get it. Both are small enough to fold in here. The copy button is react-core's CopyButton, which Icon-only buttons on the instrument toolbar, results summary and navigation have no accessible name #1701 covers.
   • File sidebar: EditorFileButton.tsx:53-74 and EditorAddFileButton.tsx:20-39 nest an <input> inside a <button>, which HTML does not allow. Delete and Rename are reachable only through the context menu (EditorFileButton.tsx:76-93). This needs its own issue.

   Related

   • The playground Share button lz-compresses every file on each render, blocking about 200 ms per hover for media instruments #1761 also changes ShareButton.tsx (:17-19) and proposes a happy-dom ShareButton/__tests__/ShareButton.test.tsx. Whichever lands second adds its case to that file.
   • The playground instrument selector, loading screen and several labels stay in English in the French UI #1762 proposes extending the react/jsx-no-literals block to the playground, but that block sets ignoreProps: true (eslint.config.js:237), so it will not catch a hard-coded aria-label.
   • fix(playground): search instruments by label #1817 and build: upgrade dependencies held back by breaking changes #1660 also edit testing/src/pages/playground/index.page.ts and testing/src/specs/playground.spec.ts.

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