Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#595 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@richshaw đang làm issue này rồi.

Từ ngày 26/10/2026.

  • #668 của @richshaw — đang mở

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
54/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
react, typescript
Lĩnh vực
accessibility, frontend

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Ngôn ngữ chính
TypeScript
Star
19
Fork
4
Merge trung bình
21 giờ 3 phút
Pull request đã merge (30 ngày)
176

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của richshaw/OpenSignup

Tất cả issue của richshaw/OpenSignup

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.