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

已关闭
#595 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

@richshaw 已经在做这个了。

开始于 2026年10月26日。

  • #668 来自 @richshaw —— 已合并

评估

难度
4/5
预计耗时
3-5 天
新手友好度
54/100
Issue 类型
缺陷
描述清晰度
描述清楚
活跃度
活跃
技术栈
react, typescript

调研方向

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.

由索引模型根据 Issue 内容生成。

描述

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

主要语言
TypeScript
星标
19
派生
4
平均合并
21 小时 41 分钟
30 天内合并 PR
201

环境准备

  • 提供 Dockerfile 或 Docker Compose 文件
  • 没有 Pull Request 模板
  • 阅读贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

richshaw/OpenSignup 的其他 Issue

查看 richshaw/OpenSignup 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。