dom_dom0900_008

モーダルをキーボード操作で閉じるには、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>