絵文字リアクションバー
メッセージにホバー（PC）または長押し（スマホ）すると絵文字バーが開き、選ぶとバウンスしながらリアクションが付く。Slack/Messenger風。
プレビュー
長押し
操作ホバー（スマホは長押し）でメニューが開きます。
仕様書
- 向く場面
- チャット・コメントへの絵文字リアクション
- PC はホバー、スマホは長押しで出す副操作
- 同じ絵文字を件数で束ねたい場面
- 避ける場面
- リアクションが主操作の画面
- 長押しの誤発火が困る長いスクロール面
- 5 個を超える絵文字を並べる
- 構成要素
- メッセージ吹き出し
- 絵文字バー
- 絵文字ボタン
- リアクションのピル
- 持っている状態
- 通常
- ホバー
- 押下中
- キーボード
Tab でフォーカスすると現れる「リアクション」ボタンを Enter／Space で開き先頭の絵文字へ、←→／Home／End で移動、Enter で反応、Esc で閉じて戻る。ピルは Tab／Enter で取り消し
- 支援技術
APG Menu Button: 開くボタンに aria-haspopup＋aria-expanded、バーは role=menu＋aria-label、絵文字は role=menuitem＋aria-label。閉じたバーは visibility:hidden で Tab に入らない。reduce で停止
- 動き
バー 160ms（opacity＋6px＋scale 0.9→1）、絵文字ホバー 120ms で 1.25 倍、ピル 320ms バウンス。reduced-motion で停止
デザインの要点
- PC はホバー、タッチは長押し 400ms で開く。指の移動が 10px を超えたら取り消し、スクロールの始まりを長押しと誤認しない
- キーボードにはフォーカスしたときだけ現れる「リアクション」ボタンを置く。ホバーと長押しだけでは到達できない
- 同じ絵文字は 1 つのピルに件数で束ね、押すと自分の分を取り消す。並べ直すと誰が何に反応したか読めなくなる
- バーは transform-origin を左下にして 0.9→1 で開く。吹き出しの角から生えて見え、どのメッセージのバーかが分かる
実装メモ
PCはホバー、タッチ端末は長押し（pointerdownから400ms・指の移動でキャンセル）で絵文字バーを開く入力方式の出し分けが要点です。選ぶとリアクションのピルがバウンスして付き、同じ絵文字は件数が加算・タップで取り消せます。長押し時のブラウザ標準メニューは contextmenu の抑止と user-select:none で防いでいます。キーボードでは Tab で現れる「リアクション」ボタン（aria-haspopup=menu）から同じバーを開き、←→ で選んで Enter、Esc で戻れます。
コード（コピーして使えます）
<div class="rb-stage">
<div class="rb-msg" id="rb-msg">
<div class="rb-avatar" aria-hidden="true">花</div>
<div class="rb-bubble">
<p class="rb-text">来週の打ち合わせ、水曜の15時でどうですか？</p>
<div class="rb-reactions" id="rb-reactions"></div>
</div>
<button class="rb-open" id="rb-open" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="rb-bar">リアクション</button>
<div class="rb-bar" id="rb-bar" role="menu" aria-label="リアクションを選択">
<button class="rb-emoji" type="button" data-e="👍" role="menuitem" aria-label="いいね">👍</button>
<button class="rb-emoji" type="button" data-e="❤️" role="menuitem" aria-label="ハート">❤️</button>
<button class="rb-emoji" type="button" data-e="😂" role="menuitem" aria-label="笑い">😂</button>
<button class="rb-emoji" type="button" data-e="🎉" role="menuitem" aria-label="お祝い">🎉</button>
<button class="rb-emoji" type="button" data-e="👀" role="menuitem" aria-label="見てる">👀</button>
</div>
</div>
<p class="rb-hint">PCはホバー、スマホは長押し、キーボードは Tab</p>
</div>