ヘッダーのドロップダウンと共通モーダルをStimulus化する
- Dominant language
- Ruby
- Stars
- 296
- Forks
- 80
- Avg merge
- 3d 1h
- Merged PRs (30d)
- 29
Description
## 概要
ヘッダーのドロップダウンと共通モーダルをStimulus controller化し、Turbo Driveの画面遷移でも安全に初期化・破棄できるようにする。
親Issue: #10196
関連Issue: #10359
## 方針
- ドロップダウンを要素単位のStimulus controllerへ移行する
- モーダルのtrigger / target / close操作をStimulus actionsで表現する
- document全体のイベントはconnect / disconnectで確実に登録・解除する
- 通知ベル固有の処理は#10359に残し、共通開閉処理だけを対象にする
## 受け入れ条件
- ユーザー、管理者、メンター、ヘルプの各メニューが正常に開閉する
- 画面外クリックとEscapeキーで閉じられる
- モーダルの開閉と複数triggerが正常に動く
- ARIA属性とフォーカスの既存挙動が維持または改善される
- Turboの再訪でイベントが二重登録されない
- `DOMContentLoaded` 前提の共通初期化が削除される
- 関連system testが追加・更新される
- `./bin/lint` が通る
## 関連コード
- `app/javascript/header-dropdown.js`
- `app/javascript/modal-switcher.js`
- `app/views/application/header/_header_links.html.slim`
- `app/views/application/_global_nav_helps.html.slim`
## Turboの段階導入について
Turbo Driveはサイト全体で一括して有効化せず、移行期間中はデフォルトで無効にする。Turboを利用する場合は、対応とテストが完了したリンク、フォーム、機能の範囲だけに`data-turbo="true"`を付けてオプトインする。Stimulus化では、Turboによる再訪や部分更新を考慮して`connect()` / `disconnect()`で初期化と後始末を管理する。
実装方法と確認項目は次のWikiを参照する。
- [Turbo Driveを必要な箇所だけ有効にする方法](https://github.com/fjordllc/bootcamp/wiki/Turbo-Drive%E3%82%92%E5%BF%85%E8%A6%81%E3%81%AA%E7%AE%87%E6%89%80%E3%81%A0%E3%81%91%E6%9C%89%E5%8A%B9%E3%81%AB%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95)
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.