結果件数のライブ更新
条件を変えると件数がスケルトンになり、少し置いて数字に戻る。連続した変更はデバウンスで1回のリクエストにまとめ、aria-live で件数の変化を読み上げる。右上に変更回数とリクエスト回数を出す。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- 件数の更新を「前の数字のまま」にしない。古い数字が見えていると、変更が効いたのか分からない。スケルトンは『いま数えている』の合図
- 入力のたびに問い合わせると、サーバーにも利用者にも無駄。止まってから 300ms で1回にまとめる（デバウンス）
- 読み上げは polite で件数だけ。一覧全体を live にすると、変更のたびに長文が読まれて操作を妨げる
コード（コピーして使えます）
<div class="rcl">
<div class="rcl-controls">
<label class="rcl-f rcl-f-wide"><span>キーワード</span><input id="rcl-q" type="text" placeholder="例: 鍋" autocomplete="off"></label>
<label class="rcl-f"><span>カテゴリ</span><select id="rcl-cat"><option value="">すべて</option><option>キッチン</option><option>文具</option><option>インテリア</option><option>アウトドア</option></select></label>
<label class="rcl-f"><span>お届け</span><select id="rcl-d"><option value="">指定なし</option><option value="翌日">翌日</option><option value="2〜3日">2〜3日</option></select></label>
<label class="rcl-c"><input id="rcl-stock" type="checkbox"><span>在庫あり</span></label>
<label class="rcl-c"><input id="rcl-sale" type="checkbox"><span>セール中</span></label>
</div>
<div class="rcl-result">
<div class="rcl-count-row">
<p class="rcl-count" id="rcl-count" aria-live="polite"><span class="rcl-num" id="rcl-num">30</span> 件</p>
<p class="rcl-stat" id="rcl-stat">変更 0 回 → リクエスト 0 回</p>
</div>
<ul class="rcl-list" id="rcl-list" aria-label="商品（先頭4件）"></ul>
</div>
</div>