ARIA対応のモーダルでフォーカストラップを実装する目的はどれですか？
- モーダル外のクリックを無視するため
- キーボード操作でフォーカスがモーダル内を循環するようにするため
- タブの順序をランダムにするため
- マウスホイールの速度を制御するため
正解
- キーボード操作でフォーカスがモーダル内を循環するようにするため
解説
アクセシビリティの観点から、Tab/Shift+Tabでのフォーカス移動がモーダル内に閉じる間は循環し、外へ出ないようにする必要があります。
使用例（サンプルコード）
[ html ]
<div id="dialog" role="dialog" aria-modal="true" hidden>
<button data-first>First</button>
<button>Ok</button>
<button data-last>Last</button>
</div>
<script>
const dlg = document.getElementById('dialog');
function trap(e){
if(e.key !== 'Tab') return;
const first = dlg.querySelector('[data-first]');
const last = dlg.querySelector('[data-last]');
if(e.shiftKey && document.activeElement === first){ last.focus(); e.preventDefault(); }
else if(!e.shiftKey && document.activeElement === last){ first.focus(); e.preventDefault(); }
}
function open(){ dlg.hidden = false; dlg.addEventListener('keydown', trap); dlg.querySelector('[data-first]').focus(); }
function close(){ dlg.hidden = true; dlg.removeEventListener('keydown', trap); }
</script>