ウェブアクセシビリティに対応した メガメニュー・トグルスイッチUI

---

サンプル

---

---

説明

アクセシビリティに対応したトグルスイッチUIです。
デバイスによって表示変更、キーボード操作・スクリーンリーダーに対応しています。
常に1つのスイッチが開きます。複数を開いたままにすることはできません。
開いている時、フォーカスは開いているコンテンツでループします。
メガメニューなどに使用可能です。

使用方法

トリガーの設定
トグルさせたいボタンにdata-switch-toggle属性を追加します。
aria-controls属性には、識別用のラベルを指定します。
aria-controls属性にaria-expanded="falseを指定します。
オプションを指定したい場合は、このdata-switch-toggle属性を持つタグにオプションを追加します。

コンテンツの設定
コンテンツ要素にdata-switch-body属性とaria-controlsで指定したラベルをidとして紐づけます。
aria-hidden="true" inertを指定します。

閉じるボタンの設定
data-close-switch属性を追加します。閉じるボタンは複数使用可能です。

背景の設定
data-bg-switch属性を設定します。

フォーカスエンドの設定
data-focus-end-drawer属性を設定します。
ドロワー展開時のフォーカスエンドを指定します。
これ以降のフォーカスは上に戻ります。
data-focus-end-switch tabindex="0"

設定オプション

data-sw-device
説明: トグルスイッチが動作するデバイス（画面幅）を指定します。
使用例: data-sw-device="pc"
値: 'all', 'sp', 'pc'（例: spはSP幅のみ動作）

その他

開閉時は次のクラスが付与されます。
.is-sw-active

変更履歴

[2024-08-07] 1.1.1
-修正：1つしか開かないように修正
[2024-08-05] 1.1.0
-機能追加：背景の追加
[2024-06-28] 1.0.0
-NEW: 初期リリース

---