フォーカストラップ

フォーカストラップの設定

設定方法

「折り返しリンク」でtabを押すと、「最初のリンク」へ戻ります。また、逆に「最初のリンク」でshift+tabを押すと「折り返しリンク」へフォーカスが遷移します。

最初のリンク リンク リンク 折り返しリンク リンク 
<div class="u-flex u-gap-xs u-flex-wrap">
<a class="js-focustrap-start" href="#">最初のリンク</a>
<a href="#">リンク</a>
<a href="#">リンク</a>
<a class="js-focustrap-end" href="#">折り返しリンク</a>
<a href="#">リンク</a>
</div> 
const focusTrap = new FocusTrap();
focusTrap.addFocusTrap(".js-focustrap-start", ".js-focustrap-end");

設定オプション

addFocusTrapメソッドは下記の引数を取ります。

focusTrap.addFocusTrap("開始セレクター", "終了セレクター", "方向");
引数 概要
開始セレクターの設定 フォーカストラップの開始セレクターを入力します。
終了セレクターの設定 フォーカストラップの終了セレクターを入力します。
方向の設定 フォーカストラップの方向を指定します。

開始セレクターの設定

開始セレクター: string

フォーカストラップの開始セレクターを入力します。通常は最初のリンクやボタンなど、フォーカスが当たる要素を指定します。

終了セレクターの設定

終了セレクター: string

フォーカストラップの終了セレクターを入力します。通常は最後のリンクやボタンなど、フォーカスが戻る要素を指定します。

方向の設定

方向の設定: string = both

フォーカストラップの方向を指定します。デフォルトは"forward"で、"backward"を指定すると逆方向にフォーカスが移動します。

focusTrap.addFocusTrap(".js-focustrap-start", ".js-focustrap-end", "backward");

フォーカストラップの解除

解除方法

フォーカストラップを設定すると、それを解除しない限り設定が残り続けます。それを解除するためには下記のメソッドを呼び出してください。

const focusTrap = new FocusTrap();
focusTrap.removeFocusTrap(".js-focustrap-start", ".js-focustrap-end");

解除オプション

removeFocusTrapメソッドは下記の引数を取ります。

focusTrap.removeFocusTrap("開始セレクター", "終了セレクター");
引数 概要
開始セレクターの解除 フォーカストラップの開始セレクターを入力します。
終了セレクターの解除 フォーカストラップの終了セレクターを入力します。

開始セレクターの解除

開始セレクター: string

フォーカストラップを解除する開始セレクターを入力します。

終了セレクターの解除

終了セレクター: string

フォーカストラップを解除する終了セレクターを入力します。