Slot rows' buttons don't say which slot, and Escape doesn't close the slot editor
维护者通常 1 天内回复
评估
- 难度
- 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 内容生成。
描述
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
ariaLabelinWysiwygSlot). 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-labelreplaces 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
slotRowLabelinsrc/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
BuildWysiwygalready asks for focus in an editor that opens (focusRowId, and #580'sfocusRequest). 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
focusRowIdcomment inBuildWysiwyg.tsx). Focus must not jump when that happens. - Tests that find rows by name.
WysiwygSlot.test.tsxand the help walkthroughtests/e2e/help/create-and-publish-a-signup.spec.tsmatch/^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.tsxandSlotEditor.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 testpass.
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 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
richshaw/OpenSignup 的其他 Issue
-
The cookies table is cut off on a phone, hiding how long each cookie lasts可能已有人在做 @richshaw 于 1 天前认领。 未关闭bug pipeline:building pipeline:ux
难度 1/5 1 小时以内 新手友好度 85/100
richshaw/OpenSignup#749 · 已指派 1 人 ·
维护者通常 1 天内回复
-
A New signup description with line breaks can pass the form, then be refused as too long可能已有人在做 @richshaw 于 1 天前认领。 未关闭bug pipeline:building pipeline:ux
难度 2/5 1-3 小时 新手友好度 85/100
richshaw/OpenSignup#722 · 已指派 1 人 ·
维护者通常 1 天内回复
-
enhancement pipeline:proposed pipeline:ux
难度 2/5 1-3 小时 新手友好度 72/100
richshaw/OpenSignup#654 ·
维护者通常 1 天内回复
-
Magic Compose's reading screen quotes the description in a blue box that no other screen uses可能已有人在做 @richshaw 于 1 天前认领。 未关闭enhancement pipeline:building pipeline:ux
难度 3/5 1-2 天 新手友好度 75/100
richshaw/OpenSignup#751 · 1 条评论 · 已指派 1 人 ·
维护者通常 1 天内回复
-
enhancement pipeline:proposed pipeline:ux
难度 3/5 1-2 天 新手友好度 75/100
richshaw/OpenSignup#750 ·
维护者通常 1 天内回复
查看 richshaw/OpenSignup 的全部 Issue
相似的 Issue
-
check:passed streams:add
难度 1/5 1 小时以内 新手友好度 65/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 62/100
GiganticMinecraft/seichi-playguide#183 ·
维护者通常 1 天内回复
-
area: core complexity: easy impact: medium
难度 2/5 1-3 小时 新手友好度 86/100
ueberdosis/tiptap#8668 ·
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 68/100
longbridge/nsh#804 ·
维护者通常 1 天内回复