モーダル表示時にフォーカスをモーダル内で循環させる方法｜ウェブアクセシビリティ対応

<div id="modal-area">
	<button type="button" class="modal-btn">開く</button>
	<div class="modal-content">
		<ul>
			<li>
				<a href="">リンクA</a>
			</li>
			<li>
				<a href="">リンクB</a>
			</li>
			<li>
				<a href="">リンクC</a>
			</li>
		</ul>
	</div>
</div>

$(function(){
    //フォーカスを当てたい要素を取得
    var modalElements = $('#modal-area').find('a, button');
    //開閉状態を取得
    var isOpenDrawer = false;
    $('.modal-btn').on('click', function () {
        $(this).toggleClass('open');
        if($(this).hasClass('open')) {
            isOpenDrawer = true;
        } else {
            isOpenDrawer = false;
        }
    });
    //モーダル表示時はフォーカスをモーダル内で循環させる
    $(document).keydown(function(event) {
        if(isOpenDrawer) {
            //フォーカスが当たっている要素
            var activeEl = document.activeElement;
            //モーダル内でフォーカスを当てたい最初の要素
            var firstEl = drawerElements[0];
            //モーダル内でフォーカスを当てたい最後の要素
            var lastEl = drawerElements[drawerElements.length - 1];
            //タブキーを押されたかどうか
            var tabKey = (9 === event.keyCode);
            //シフトキーが押されたかどうか
            var shiftKey = event.shiftKey;
            //最後の要素でタブキーが押された場合、最初の要素にフォーカスを当てる
            if(!shiftKey && tabKey && lastEl === activeEl) {
                event.preventDefault();
                firstEl.focus();
            }
            //最初の要素でタブキー+シフトキーが押された場合、最後の要素にフォーカスを当てる
            if(shiftKey && tabKey && firstEl === activeEl) {
                event.preventDefault();
                lastEl.focus();
            }
        }
    });
});