Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#1,763 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
82/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
playwright, react, typescript
Área
accessibility, frontend, testing

Línea de trabajo

Start with the named playground components: Header/ActionButton/ActionButton.tsx, Editor/EditorButton.tsx, CloneButton.tsx, ShareButton.tsx, ActionsDropdown.tsx, and Editor/EditorTab.tsx. Then run or inspect the E2E tests in testing/src/specs/playground.spec.ts and the page object in testing/src/pages/playground/index.page.ts. Done means icon buttons have accessible names, the tab close control is keyboard-accessible, and the described role-based checks pass.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Area: Playground Bug Difficulty: Low Priority: Medium

The playground's icon-only buttons have no accessible names, and editor tabs cannot be closed from the keyboard. These buttons render nothing but a lucide icon: Save, Create New Instrument, Share, Download Archive, Upload Archive, Refresh and the actions menu in the header, and View Files, Add File and Upload Files in the editor toolbar. lucide marks its icons aria-hidden="true". The visible label lives only in a Radix tooltip, which sets aria-describedby on the trigger while the tooltip is open; that is a description, not a name. Screen readers announce each of them as "button". Each editor tab is a single <button>, and its close "X" is a plain <div> detected by click target. The X cannot be focused and has no label, and Enter or Space on the tab only selects it, so a keyboard user has no way to close a tab. (The theme and language toggles in the same header are libui components; #1722 covers those.)

Where

apps/playground/src/components/Header/ActionButton/ActionButton.tsx:15-24 (the same pattern is in Editor/EditorButton.tsx:13-21, CloneButton.tsx:40-42, ShareButton.tsx:49-51 and ActionsDropdown.tsx:31-33):

<Tooltip.Trigger
  className="h-9 w-9"
  disabled={disabled}
  size="icon"
  type="button"
  variant="outline"
  onClick={onClick}
>
  {icon}
</Tooltip.Trigger>

apps/playground/src/components/Editor/EditorTab.tsx:25-37:

onClick={(event) => {
  const isClose = xRef.current?.contains(event.target as HTMLElement);
  if (isClose) {
    closeFile(filename);
  } else {
    selectFile(filename);
  }
}}
>
  <span className="leading-non truncate">{filename}</span>
  <div className="rounded-md p-0.5 hover:bg-slate-200 dark:hover:bg-slate-600" ref={xRef}>
    <XIcon style={{ height: '14px', width: '14px' }} />
  </div>

Reproduce

  1. Open the playground with VoiceOver or NVDA running and Tab through the header and the editor toolbar.
  2. Tab to an editor tab and try to close it with the keyboard.

Actual: each icon button is announced as "button" with no name, and no key closes the tab.
Expected: each button is announced by its tooltip text ("Save", "Share", …), and each tab has a focusable close button announced as "Close index.ts".

Tests

E2E in testing/src/specs/playground.spec.ts: assert that page.getByRole('button', { name: 'Save' }) and the other header and toolbar buttons resolve, and that focusing a tab's close button and pressing Enter removes the tab. These role-based locators also give testing/src/pages/playground/index.page.ts a stable way to reach the header actions. There is no pure logic to unit-test.

Suggested fix

Pass the translated tooltip text as aria-label from ActionButton and EditorButton, and add the same to the Create New Instrument and Share triggers and the actions-menu trigger. In EditorTab, render the close control as a sibling <button type="button"> with a translated aria-label (for example Close {filename}), instead of a <div> nested in the tab button.

Lenguaje dominante
TypeScript
Estrellas
119
Forks
19
Merge medio
1 d 2 h
PR fusionados (30 d)
56

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de DouglasNeuroInformatics/OpenDataCapture

Todos los issues de DouglasNeuroInformatics/OpenDataCapture

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.