tests: Bypass native ariaNotify in polyfill tests

arianotify-polyfill.js

@@ -3,10 +3,16 @@
 const domAPIsAreAvailable =
   typeof globalThis.Element !== "undefined" &&
   typeof globalThis.Document !== "undefined";
+const shouldBypassNativeAriaNotify =
+  /** @type {typeof globalThis & {__bypassNativeAriaNotify?: boolean}} */ (
+    globalThis
+  ).__bypassNativeAriaNotify === true;
 
 if (
   domAPIsAreAvailable &&
-  (!("ariaNotify" in Element.prototype) || !("ariaNotify" in Document.prototype))
+  (shouldBypassNativeAriaNotify ||
+    !("ariaNotify" in Element.prototype) ||
+    !("ariaNotify" in Document.prototype))
 ) {
   /** @type {string} */
   let uniqueId = `${Date.now()}`;
@@ -200,31 +206,43 @@ if (
     AssertiveLiveRegionCustomElement
   );
 
-  if (!("ariaNotify" in Element.prototype)) {
-    /**
-     * @param {string} message
-     * @param {object} options
-     * @param {"high" | "normal"} [options.priority]
-     */
-    Element.prototype["ariaNotify"] = function (
-      message,
-      { priority = "normal" } = {}
-    ) {
-      queue.enqueue(new Message({ element: this, message, priority }));
-    };
+  /**
+   * @param {string} message
+   * @param {object} options
+   * @param {"high" | "normal"} [options.priority]
+   */
+  const elementAriaNotify = function (
+    message,
+    { priority = "normal" } = {}
+  ) {
+    queue.enqueue(new Message({ element: this, message, priority }));
+  };
+
+  if (shouldBypassNativeAriaNotify || !("ariaNotify" in Element.prototype)) {
+    Object.defineProperty(Element.prototype, "ariaNotify", {
+      configurable: true,
+      writable: true,
+      value: elementAriaNotify,
+    });
   }
 
-  if (!("ariaNotify" in Document.prototype)) {
-    /**
-     * @param {string} message
-     * @param {object} options
-     * @param {"high" | "normal"} [options.priority]
-     */
-    Document.prototype["ariaNotify"] = function (
-      message,
-      { priority = "normal" } = {}
-    ) {
-      queue.enqueue(new Message({ element: this.documentElement, message, priority }));
-    };
+  /**
+   * @param {string} message
+   * @param {object} options
+   * @param {"high" | "normal"} [options.priority]
+   */
+  const documentAriaNotify = function (
+    message,
+    { priority = "normal" } = {}
+  ) {
+    queue.enqueue(new Message({ element: this.documentElement, message, priority }));
+  };
+
+  if (shouldBypassNativeAriaNotify || !("ariaNotify" in Document.prototype)) {
+    Object.defineProperty(Document.prototype, "ariaNotify", {
+      configurable: true,
+      writable: true,
+      value: documentAriaNotify,
+    });
   }
 }

package.json

@@ -17,15 +17,14 @@
   },
   "files": [],
   "scripts": {
-    "test": "npx playwright install firefox && web-test-runner",
-    "test:guidepup": "npx playwright install firefox && npx playwright test"
+    "test": "web-test-runner",
+    "test:guidepup": "npx playwright test"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4-fix.0",
     "@guidepup/guidepup": "^0.24.0",
     "@guidepup/playwright": "^0.15.0",
     "@playwright/test": "^1.48.0",
-    "@web/test-runner": "^0.20.1",
-    "@web/test-runner-playwright": "^0.11.1"
+    "@web/test-runner": "^0.20.1"
   }
 }

playwright.config.mjs

@@ -9,8 +9,11 @@ const config = {
   retries: 0,
   projects: [
     {
-      name: 'firefox', // Use Firefox because Firefox doesn’t have a native implementation of 'ariaNotify' (as of 2026-01-15), so we can test the polyfill in it.
-      use: devices['Desktop Firefox'],
+      name: "Google Chrome",
+      use: {
+        ...devices["Desktop Chrome"],
+        channel: "chrome",
+      },
     },
   ],
   quiet: false,

tests/bypass-native-arianotify.js

@@ -0,0 +1,15 @@
+// @ts-check
+
+for (const prototype of [Element.prototype, Document.prototype]) {
+  Object.defineProperty(prototype, "ariaNotify", {
+    configurable: true,
+    writable: true,
+    value() {
+      throw new Error("Expected tests to use the ariaNotify polyfill");
+    },
+  });
+}
+
+/** @type {typeof globalThis & {__bypassNativeAriaNotify?: boolean}} */ (
+  globalThis
+).__bypassNativeAriaNotify = true;

tests/guidepup/nvda.spec.mjs

@@ -25,6 +25,13 @@ import path from "node:path";
 
 const test = baseTest.extend({
   context: async ({ context }, run) => {
+    await context.addInitScript({
+      path: path.join(
+        import.meta.dirname,
+        "..",
+        "bypass-native-arianotify.js"
+      ),
+    });
     await context.route("**/*", (route, request) =>
       route.fulfill({
         path: path.join(

tests/guidepup/voiceover.spec.mjs

@@ -9,6 +9,13 @@ import path from "node:path";
 
 const test = baseTest.extend({
   context: async ({ context }, run) => {
+    await context.addInitScript({
+      path: path.join(
+        import.meta.dirname,
+        "..",
+        "bypass-native-arianotify.js"
+      ),
+    });
     await context.route("**/*", (route, request) =>
       route.fulfill({
         path: path.join(

web-test-runner.config.js

@@ -1,15 +1,7 @@
-import { playwrightLauncher } from '@web/test-runner-playwright';
-
 export default {
   files: "tests/web-test-runner/*.test.html",
   coverage: true,
   nodeResolve: true,
-  browsers: [
-    playwrightLauncher({
-      product: 'firefox', // Use Firefox instead of Chrome (web-test-runner’s default), because Firefox doesn’t have a native implementation of 'ariaNotify' (as of 2025-11-07), so we can test the polyfill in it.
-      launchOptions: { headless: true }
-    }),
-  ],
   plugins: [
     {
       name: "include-polyfill",
@@ -18,7 +10,8 @@ export default {
           return context.body.replace(
             /<\/body>/,
             `
-  <script src="./arianotify-polyfill.js"></script>
+  <script src="/tests/bypass-native-arianotify.js"></script>
+  <script src="/arianotify-polyfill.js"></script>
   <script type="module">
     import { runTests } from "@web/test-runner-mocha";
     import { tests } from "./arianotify-polyfill.test.js";