fix: strengthen visible content accessibility proof

tests/helpers/serve-dist.ts

@@ -1,7 +1,7 @@
 import { readFile, realpath, stat } from 'node:fs/promises';
 import { createServer, type ServerResponse } from 'node:http';
 import { extname, isAbsolute, relative, resolve, sep } from 'node:path';
-import { expect, test as base } from '@playwright/test';
+import { expect, test as base, type Page } from '@playwright/test';
 
 const LOOPBACK_HOST = '127.0.0.1';
 
@@ -82,6 +82,40 @@ export interface DistPreviewServer {
   close(): Promise<void>;
 }
 
+export async function expectInsetFocusIndicator(
+  page: Page,
+  selector: string,
+): Promise<void> {
+  await expect
+    .poll(() =>
+      page.locator(selector).evaluate((element) => {
+        const rect = element.getBoundingClientRect();
+        const viewport = window.visualViewport;
+        const viewportLeft = viewport?.offsetLeft ?? 0;
+        const viewportTop = viewport?.offsetTop ?? 0;
+        const viewportRight =
+          viewportLeft + (viewport?.width ?? window.innerWidth);
+        const viewportBottom =
+          viewportTop + (viewport?.height ?? window.innerHeight);
+        const style = getComputedStyle(element);
+        return {
+          focused: document.activeElement === element,
+          intersectsViewport:
+            rect.right > viewportLeft &&
+            rect.left < viewportRight &&
+            rect.bottom > viewportTop &&
+            rect.top < viewportBottom,
+          insetIndicator: /\binset\b/iu.test(style.boxShadow),
+        };
+      }),
+    )
+    .toEqual({
+      focused: true,
+      intersectsViewport: true,
+      insetIndicator: true,
+    });
+}
+
 export async function startDistServer(
   distRoot = resolve(process.cwd(), 'dist'),
 ): Promise<DistPreviewServer> {