7つの部品を1つのデザイントークンの下に統合し、開閉系UIのキーボード操作(フォーカス/Escキー)を一律で揃えた例です。
マウスホバーに加え、Tabキーでのフォーカスでも開閉します。開いた状態でEscキーを押すと閉じます。
見出しや本文の文字数が違っても、バッジ・見出し・本文開始位置が横並びで揃います。
Escキー・背景クリック・フォーカストラップはブラウザ標準機能でカバーされます。
4秒おきに自動送り。ホバー・タッチ中・タブが裏に回った時は停止します。
4秒おきに自動スクロール、ホバーで一時停止します。
タブが裏に回るとタイマーを止めます。
ボタン操作でも指フリックでも動きます。
統一トークンの偶数リズムで統一しています。
カードを増やして、実際にスクロールする幅を確保しています。
右端まで進むと自動的に先頭へ戻ります。