Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン
#595 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 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 の本文から書いたものです。

説明

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
平均マージ
20時間 9分
マージ済み PR(30日)
156

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

richshaw/OpenSignup のほかの issue

richshaw/OpenSignup の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。