DialogOpen中にTab移動で親画面にFocusを当てないようにする

はじめに

子画面(DialogやModalなど)を開いていた状態でTab移動すると、背景の親画面にまでFocusが当たる。

これを今までは、TabIndexなどで制御したり、

子画面内の最後のFocus要素のKeydownEventなどで制御することが多かった。

2023年以降ではInert属性で制御することが増えたので備忘録的にまとめておく。

（Chrome、Edge、Firefoxに加えてSafariが2023年にサポートされた）

Inert　とは(参考記事)

この記事より詳しい記事

コード

DialogのOpen時とClose時に親画面のInert属性を制御する

const openDialogButton = document.getElementById('open-dialog');
const closeDialogButton = document.getElementById('close-dialog');
const dialog = document.getElementById('dialog');
const mainContent = document.getElementById('main-content');
const overlay = document.getElementById('overlay');

openDialogButton.addEventListener('click', () => {
  dialog.classList.add('open');
  overlay.classList.add('open');
  mainContent.inert = true; // ダイアログ表示時に背景を不活性化
});

closeDialogButton.addEventListener('click', () => {
  dialog.classList.remove('open');
  overlay.classList.remove('open');
  mainContent.inert = false; // ダイアログを閉じたら不活性化を解除
});

//略

  <style>
    #dialog {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 20px;
      background-color: white;
      border: 1px solid black;
    }

    #dialog.open {
      display: block;
    }

    .overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
    }

    .overlay.open {
      display: block;
    }
  </style>
  <div id="main-content">
    <h1>Main Content</h1>
    <button id="open-dialog">Open Dialog</button>
    <p>Some text content here...</p>
    <button>Another Button</button>
  </div>

  <div id="overlay" class="overlay"></div>

  <div id="dialog">
    <h2>Dialog</h2>
    <p>This is the dialog content.</p>
    <button id="close-dialog">Close</button>
  </div>
  
//略

まとめ

Inertによって簡単にFocusTrapできるようになった😄。

様々な場面で活用することで、ユーザーエクスペリエンスを向上につながるので、

使いこなしていきたい。💪