モーダルをキーボード操作で閉じるには、keydownイベントで( A ) === ‘Escape’を判定する。また、モーダル内のフォーカスを閉じるまでトラップするため、フォーカス移動キーの( B )も処理する。
解答
A: key
B: Tab
解説
keydownのevent.keyで押下キーを判定。アクセシビリティ対応では、Tabによるフォーカス移動をモーダル内に制限し、外へ抜けないようにする。
使用例(サンプルコード)
[ html ]
<div id="backdrop" class="hidden">...</div>
<script>
document.addEventListener('keydown', e=>{
const open = !backdrop.classList.contains('hidden');
if(!open) return;
if(e.key === 'Escape'){ backdrop.classList.add('hidden'); }
if(e.key === 'Tab'){ /* (B) フォーカストラップ実装(省略) */ }
});
</script>