[tkc310]

Requested by tkc310 · project thread

変更内容

利用者が項目の順番を決める SortableList を追加します。bouzu（tkc310/bouzu#77・#89）で読誦セットの「読む順番」を作ったとき、次の問題を順に直してたどり着いた形を部品にしたものです。

• スマホで「上へ」「下へ」「外す」を行に並べると、項目名が一文字ずつ折り返した → 操作は右の開閉ボタンの中にしまう
• ドラッグ中に並びを都度入れ替えると、行が指に付かず 1 段ずつ動くように見えた → ドラッグ中は行を指に付けて動かし、ほかの行は入る位置を空けるだけにして、離したときに一度で決める
• 並びが急に変わってどこへ動いたか分からない → 前の位置から新しい位置へ動かす（FLIP）

<SortableList
  label="承認の手順"
  items={steps}
  getKey={(step) => step.id}
  getLabel={(step) => step.name}
  onChange={setSteps}
  onRemove={(step) => …}
/>

• 左のつまみ: ポインタ（タッチ・マウス）でドラッグ。フォーカスして上下の矢印キーでも動き、フォーカスはつまみに残る
• 右の開閉ボタン（aria-expanded）: 行の下に「上へ」「下へ」、onRemove を渡すと「外す」も出す。ドラッグできない人の代わりの操作（WCAG 2.5.7）
• 動かした・外したあとを role="status" で読み上げる（「下書きを作るを5件中2番目に動かしました」）。外したあとはフォーカスを隣の行のつまみへ移す（bouzu には無かった改善）
• 位置は style 属性ではなく CSSOM で動かす（style-src の CSP で止まらない）。動きを減らす設定ではテーマの規則で止まる
• renderItem で行の中身、numbered で番号の有無、messages で文言（既定は日本語）を変えられる
• 位置の計算（moveItemTo・dropIndex・shiftOf）は useSortable.ts の純粋な関数に分けてテストした
• DESIGN.md に節を追加、04 の「部品の選び方」と README の一覧に追加

Storybook プレビュー

プレビュー: https://tkc310.github.io/8341-ui/pr-preview/pr-33/ （a6cc7e0 時点）

ストーリー	ライト	ダーク	見てほしい点
SortableList / Default	開く	開く	つまみのドラッグ・矢印キー・開閉ボタンの操作。スマホ幅で長い項目名が折り返しすぎないか
SortableList / CustomContent	開く	開く	renderItem で 2 行の中身。外す操作なし

スマホでの指のドラッグは実機で確かめてください（エージェントはマウスのドラッグだけを確かめました）。

完了の定義

• PR のタイトルが Conventional Commits の形式
• make check と make test が通る（ストーリーの play 関数と axe を含む）
• changeset を追加した（.changeset/sortable-list.md、patch）
• ライト / ダークの両方で見た目を確認した（375px 幅で Playwright で描画。下のプレビュー）
• キーボードで操作でき、フォーカス表示が見える（矢印キー・開閉・上へ下へ・外す）
• 新しい semantic カラーは足していない
• 値や方針は変えていない

改善ループ

• docs/improvement/log.md に 1 行追記した
• 再発防止として追加したもの: 単体テスト（矢印キーとフォーカスの維持・開閉・外したあとのフォーカス・ドラッグで離れた位置へ一度に動く・文言の上書き）、位置の計算のテスト、ストーリーの play 関数。実ブラウザ（Chromium、375px）で 5 番目の行を上へドラッグして動くことも確かめた

https://claude.ai/code/session_01S5dPLGGVzZyRz8dob3cTmz

---

Generated by Claude Code