[tkc310]

Requested by tkc310 · project thread

変更内容

bouzu（tkc310/bouzu#84・#89）で見つかった「スマホで押しても見た目が変わらない」問題を、8341-ui の側で直します。

なぜ: Tailwind v4 の hover: は @media (hover: hover) の端末でだけ効くので、タッチではボタン以外の押せる部品を押しても何も変わりませんでした。また、buttonVariants を <a> に当てた「ボタンの見た目のリンク」は、Button の hover と押した見た目が enabled: で書かれていて :enabled が <a> に当たらないため、マウスでも押しても変わりませんでした。

• hover だけだった部品に、hover と同じ見た目の active: を足した: Link（下線も hover と同じ太さに）、Card（href）、Accordion、Checkbox / Radio / Switch（ラベルの文字を押しても四角・丸・トラックに出る）、入力欄、NotificationBanner の閉じる
• Button の enabled:hover: / enabled:active: を not-disabled: に替えた
• テーマで端末のタップの塗り（-webkit-tap-highlight-color）を消し、部品の active と二重にしない
• iOS Safari は touchstart の受け手が無いと :active を当てないので、アプリ側で document に passive の受け手を置く方法を README に書いた（インラインの ontouchstart は CSP で止まるのでスクリプトで付ける）
• ルールブック 02（A14）・04、DESIGN.md の enabled:hover: の記述を直した

Storybook プレビュー

なし（ホバーできない端末での押下時の見た目の変更のため、静止画では差が出ません。Storybook をスマホで開いて押すか、DevTools の :active で確かめてください）

完了の定義

• PR のタイトルが Conventional Commits の形式
• make check と make test が通る
• changeset を追加した（.changeset/press-feedback.md、patch）
• ライト / ダークの両方で見た目を確認した（エージェントは実機での描画を確認していません。hover と同じトークンを使っているのでコントラストの組み合わせは増えていません）
• キーボードで操作でき、フォーカス表示が見える（変更なし）
• 新しい semantic カラーは足していない
• 値や方針は変えていない（規約の書き方の修正）

改善ループ

• docs/improvement/log.md に 1 行追記した
• 再発防止として追加したもの: クラス監査に enabled-variant（enabled: を禁止）と hover-without-active（hover: があるのに active: が無い部品を止める）。main のままだと 9 件の error になることを確かめた。Button（リンクに当てたとき）・Link のテスト

---

Generated by Claude Code