スワイプ削除
リスト項目を左にスワイプすると赤い削除ボタンが現れ、さらに引っ張ると削除アニメ。PC（ドラッグ）もスマホ（スワイプ）も対応。元の位置にスナップバックも。
プレビュー
ドラッグ
操作ドラッグ／スワイプで操作できます（PC・スマホ対応）。
仕様書
- 向く場面
- モバイルの通知・メール・注文の一覧
- 行ごとに1つの破壊的操作を隠したい
- 片手操作で素早く整理させたい一覧
- 避ける場面
- 横スクロールやカルーセルと共存する一覧
- 取り消しの無い重要データの削除
- PC中心で発見性が要る画面（常時ボタンを出す）
- 構成要素
- 行項目
- 行の内容
- 削除ボタン
- 一覧
- 持っている状態
- 通常
- 押下中
- キーボード
スワイプはマウス・タッチ専用。代替: Tab で各行の削除 button へ移ると行が左へずれて削除が現れ、Enter／Space で削除できる
- 支援技術
削除は「注文 #1024 を削除」の aria-label 付き button で、フォーカスが当たると見える（focus-within）。削除完了は sr-only の role=status で告知。絵文字は aria-hidden
- 動き
追従中は transition なし、離すと 0.2s ease でスナップ。削除は横退場 0.3s の後に高さ 0.3s で行が詰まる。reduced-motion では即時に消す
デザインの要点
- しきい値を2段にする。36px で削除ボタンが見え、130px で離すと削除。1段だと「見せるだけ」と「消す」が同じ動きになる
- 指に追従する間は transition を切り、離した瞬間に戻す。追従中に transition が残ると指より遅れて動き、掴んでいる感覚が消える
- 削除ボタンは隠れていても Tab で届くので、フォーカスが当たったら行をずらして見せる（focus-within）。隠れたまま Enter で消えるのは事故
- 行の消し方は横退場→高さ 0 の2段。いきなり高さを 0 にすると、下の行が飛び上がって何が消えたか分からない
コード（コピーして使えます）
<ul class="std-list">
<li class="std-item"><div class="std-content"><span class="std-icon" aria-hidden="true">📦</span><span class="std-text">注文 #1024</span></div><button class="std-del-btn" aria-label="注文 #1024 を削除">削除</button></li>
<li class="std-item"><div class="std-content"><span class="std-icon" aria-hidden="true">🎁</span><span class="std-text">注文 #1025</span></div><button class="std-del-btn" aria-label="注文 #1025 を削除">削除</button></li>
<li class="std-item"><div class="std-content"><span class="std-icon" aria-hidden="true">🛒</span><span class="std-text">注文 #1026</span></div><button class="std-del-btn" aria-label="注文 #1026 を削除">削除</button></li>
<li class="std-item"><div class="std-content"><span class="std-icon" aria-hidden="true">📮</span><span class="std-text">注文 #1027</span></div><button class="std-del-btn" aria-label="注文 #1027 を削除">削除</button></li>
</ul>
<p class="std-status" role="status" aria-live="polite"></p>