画像の拡大表示を Esc で閉じたら、背面のスクロールが戻らなくなりました。dialog 要素に載せ替えて数えたこと

<!-- 古い作り: 全画面の div に画像と閉じるボタンを重ねるだけ -->
<div id="ov"><button id="close" aria-label="close">×</button><img id="big" alt=""></div>
 
<style>
  #ov{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none}
  #ov.open{display:block}
  #ov img{position:absolute;inset:0;margin:auto;width:auto;height:auto;
          max-width:100%;max-height:100%;object-fit:contain}
  #close{position:absolute;top:12px;right:12px;width:44px;height:44px;z-index:2}
</style>

// usage: node lightbox-check.js <file-or-url> <overlaySelector>
const { chromium } = require('playwright');
const path = require('path');
 
const VIEWPORTS = [
  { tag: 'phone-portrait', width: 390, height: 844 },
  { tag: 'phone-landscape', width: 844, height: 390 },
  { tag: 'desktop', width: 1280, height: 720 },
];
 
// 二つの矩形の重なり面積（px²）。0 なら重なっていません
const overlap = (a, b) => {
  const w = Math.min(a.x + a.width, b.x + b.width) - Math.max(a.x, b.x);
  const h = Math.min(a.y + a.height, b.y + b.height) - Math.max(a.y, b.y);
  return Math.round(Math.max(0, w) * Math.max(0, h));
};
 
(async () => {
  const [target, overlay] = process.argv.slice(2);
  const url = target.startsWith('http') ? target : 'file://' + path.resolve(target);
  const browser = await chromium.launch();
  for (const vp of VIEWPORTS) {
    const page = await (await browser.newContext({ viewport: vp })).newPage();
    await page.goto(url);
    const thumbs = await page.locator('[data-full]').count();
    const row = { viewport: vp.tag, worstOverlapPx2: 0 };
    for (let i = 0; i < thumbs; i++) {
      await page.evaluate((n) => document.querySelectorAll('[data-full]')[n].click(), i);
      await page.waitForTimeout(120);
      const img = await page.locator('#big').boundingBox();
      const btn = await page.locator('#close').boundingBox();
      row.worstOverlapPx2 = Math.max(row.worstOverlapPx2, overlap(img, btn));
      if (i === thumbs - 2) {
        // 開いている間: Tab を 4 回押して、フォーカスが重ね表示の内側にとどまるか
        let inside = 0;
        for (let k = 0; k < 4; k++) {
          await page.keyboard.press('Tab');
          inside += await page.evaluate((sel) => document.querySelector(sel).contains(document.activeElement) ? 1 : 0, overlay);
        }
        row.tabInsideOf4 = inside;
        // 開いている間: ホイールで背面が動くか
        await page.evaluate(() => scrollTo(0, 0));
        await page.mouse.move(vp.width / 2, vp.height / 2);
        await page.mouse.wheel(0, 600);
        await page.waitForTimeout(150);
        row.scrollWhileOpen = await page.evaluate(() => scrollY);
        // Esc のあと: 閉じたか、背面は動くか
        await page.evaluate(() => scrollTo(0, 0));
        await page.keyboard.press('Escape');
        await page.waitForTimeout(120);
        row.closedByEsc = await page.evaluate((sel) => {
          const el = document.querySelector(sel);
          return el.tagName === 'DIALOG' ? !el.open : !el.classList.contains('open');
        }, overlay);
        await page.mouse.wheel(0, 600);
        await page.waitForTimeout(150);
        row.scrollAfterEsc = await page.evaluate(() => scrollY);
      } else {
        await page.evaluate((sel) => {
          const el = document.querySelector(sel);
          el.tagName === 'DIALOG' ? el.close() : el.classList.remove('open');
        }, overlay);
      }
    }
    console.log(JSON.stringify(row));
  }
  await browser.close();
})();