inert vs aria-hidden — the modal focus leak

<div class="pg">
    <h1 class="pg-title">🔒 inert vs aria-hidden: the modal focus leak</h1>
    <p class="pg-sub">
      Pick a background-protection mode, open the modal, then really try to
      click or Tab to the button behind it. This runs in your actual browser —
      only one mode genuinely stops you.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Background protection mode</div>
      <div class="seg" id="modeSeg" role="tablist" aria-label="Protection mode">
        <button class="seg-btn" data-mode="none" aria-pressed="true">Unprotected</button>
        <button class="seg-btn" data-mode="aria-hidden" aria-pressed="false">aria-hidden only (old way)</button>
        <button class="seg-btn" data-mode="inert" aria-pressed="false">inert (new way)</button>
      </div>
      <div class="btn-row" style="margin-top:14px">
        <button class="btn primary" id="openModal">Open modal</button>
        <button class="btn ghost" id="resetBtn">Reset</button>
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="none">Show: no protection</button>
        <button class="btn sm" data-preset="aria-hidden">Show: the old bug</button>
        <button class="btn sm" data-preset="inert">Show: the fix</button>
      </div>
      <p class="hint">Switching modes takes effect immediately, even while the modal is already open.</p>
    </div>

<div class="panel stageWrap">
      <div class="panel-label"><span class="n">2</span> The page (background) + the modal</div>

<div id="background" class="bg-area">
        <p class="muted" style="margin:0">This is "the rest of the page," sitting behind the modal.</p>
        <button class="btn sm bad" id="trapBtn">🪤 Delete account (background button)</button>
        <input class="bg-input" type="text" placeholder="Type here (background input)" />
      </div>

<div id="modal" class="modal-box" hidden>
        <div class="modal-inner">
          <h3>Delete account?</h3>
          <p>This can't be undone.</p>
          <div class="btn-row">
            <button class="btn bad" id="modalConfirm">Delete</button>
            <button class="btn ghost" id="modalClose">Cancel</button>
          </div>
        </div>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> What's happening</div>
      <div class="status" id="statusRow">
        <span class="dot info" id="dot"></span>
        <span id="statusText">Modal closed. Background is fully interactive.</span>
      </div>
      <div class="code code-line" id="attrCode">&lt;div id="background"&gt;</div>
      <p class="hint">Background clicks that got through: <strong id="leakCount">0</strong></p>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.