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

Slot rows' buttons don't say which slot, and Escape doesn't close the slot editor

Abierto
  • ¿Algo no está bien?
#595 1 comentario 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
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
54/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
accessibility, frontend

Línea de trabajo

Start with src/components/build-wysiwyg/slotRow.ts, WysiwygSlot, SlotEditor, EnumPicker, and the focus handling in BuildWysiwyg.tsx; first review the changes planned in #581 and the existing Escape and focus patterns. Add tests in WysiwygSlot.test.tsx for toolbar and row names, Escape behavior, and focus after closing. Done means the listed keyboard and screen reader behaviors pass, the walkthrough still matches row names, and the stated lint, typecheck, knip, and test commands pass.

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

Descripción

bug pipeline:ready pipeline:ux

What happens

The Build tab's slot list (src/components/build-wysiwyg/) has four gaps for someone using a keyboard or a screen reader:

  • The toolbar's buttons don't say which slot. A closed row's own button is named for its slot: "Edit slot — Cupcakes" (the ariaLabel in WysiwygSlot). Tab past it, and the row's toolbar (ToolbarButton) reads just "Edit", "Duplicate", "Delete". Every row's toolbar sounds the same, and "Delete" doesn't say what it deletes.
  • The row's name leaves out its count. The row button's aria-label replaces its text, so a screen reader hears "Edit slot — Cupcakes" but never the "0 of 6 taken" shown on screen.
  • Escape doesn't close the open slot's editor (SlotEditor): nothing handles it. From Spots, the last box, a keyboard user presses Shift+Tab 6 times, through each part of the date box, to get back to Done. The rest of the tab already uses Escape to back out: the Fields dialog, an inline title edit (Editable), a new list item (EnumPicker) and a new field (InlineFieldForm).
  • Closing the editor drops focus. Done unmounts the editor with the focused Done button in it, and nothing puts focus back, so the next Tab starts from the top of the page. The editor itself is unnamed too: it reads "Editing slot", then bare "Duplicate", "Delete" and "Done".

To see it: create a signup with three slots, named Cupcakes, Cookies and Brownies. Using only the keyboard, tab through the slot list. Then open a slot with Enter, tab to Spots, and press Escape.

Fix, in outline

  • Name the toolbar's buttons for the slot, the way the row is named: "Edit slot — Cupcakes", "Duplicate slot — Cupcakes", "Delete slot — Cupcakes" ("Delete slot at 9:00 AM" when the first field is a time, "Delete slot — Set a date" when it's empty). #581 moves the row's name into slotRowLabel in src/components/build-wysiwyg/slotRow.ts. Build every name from that one place.
  • Add the count to the row's name: "Edit slot — Cupcakes, 0 of 6 taken", using the same words as the row.
  • Name the open editor. Make it a group labelled "Editing slot — Cupcakes", so its Duplicate, Delete and Done are heard with their slot.
  • Escape closes the editor, as Done does. Handle it on the editor, and skip a key another control has already handled (e.defaultPrevented), so Escape in a list's new-item box closes only that box.
  • Put focus back on the slot's row after Done or Escape, the way BuildWysiwyg already asks for focus in an editor that opens (focusRowId, and #580's focusRequest). When Publish's check opened the slot, #581 hands focus to Publish and share on Done; Escape does the same there.

Watch for

  • An open list menu. EnumPicker's menu doesn't close on Escape; only its new-item box does. With this change, Escape on an open menu would close the whole editor. Make Escape close the menu first, and mark the key handled.
  • Edits still save. Closing doesn't cancel the waiting saves in useBuildState. Escape keeps them, as Done does. It doesn't discard anything.
  • A slot that moves group. In a signup grouped by date, changing the date remounts the editor in its new group (see the focusRowId comment in BuildWysiwyg.tsx). Focus must not jump when that happens.
  • Tests that find rows by name. WysiwygSlot.test.tsx and the help walkthrough tests/e2e/help/create-and-publish-a-signup.spec.ts match /^Edit slot/ and /Fruit and water/. Those still match; check any exact names.
  • Overlap with #593 (the row's toolbar covering its count) and #594 (reordering by keyboard), which also change WysiwygSlot.tsx and SlotEditor.tsx. Whichever lands second has a small merge.
  • CHANGELOG entry.

Order

After #581. It moves the row's name into slotRowLabel, which the toolbar names should share, and adds the Build tab's focus handling for Done and Enter (rowAsks and enterIsDone in BuildWysiwyg.tsx), which Escape and the focus return belong beside. Built on main first, one of the two would be redone.

Done when

  • Tabbing through the slot list, every toolbar button names its slot, and each row's name includes its count.
  • Escape in any box of an open slot editor closes it, keeps its edits, and puts focus on that slot's row. Escape in an open list menu closes only the menu.
  • Done also puts focus on the slot's row, or on Publish and share when the check opened the slot.
  • Unit tests cover the names, Escape, and focus after Done and after Escape.
  • pnpm lint && pnpm typecheck && pnpm knip && pnpm test pass.

Found by the UX walkthrough (scenarios O1 and X2) on 2026-10-24, and checked against the code on main at 4ed27a9.

Generated by Claude Code

Lenguaje dominante
TypeScript
Estrellas
19
Forks
4
Merge medio
20 h 9 min
PR fusionados (30 d)
156

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 richshaw/OpenSignup

Todos los issues de richshaw/OpenSignup

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.