fix: ensure alertdialog considered for inert logic (#132)

Author: jlp-craigmorten

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guidepup/virtual-screen-reader",
-  "version": "0.30.0",
+  "version": "0.30.1",
   "description": "Virtual Screen Reader driver for unit test automation.",
   "author": "Craig Morten <[email protected]>",
   "license": "MIT",

src/getNodeAccessibilityData/index.ts

@@ -4,6 +4,7 @@ import { getAccessibleDescription } from "./getAccessibleDescription";
 import { getAccessibleName } from "./getAccessibleName";
 import { getAccessibleValue } from "./getAccessibleValue";
 import { getLocalName } from "../getLocalName";
+import { isDialogRole } from "../isDialogRole";
 import { isElement } from "../isElement";
 
 // TODO: swap out with the html-aria package once it supports `dpub-aam` /
@@ -93,7 +94,7 @@ const getIsInert = ({
     getLocalName(node) === "dialog" && node.hasAttribute("open");
 
   const isNonNativeModalDialog =
-    role === "dialog" && node.hasAttribute("aria-modal");
+    isDialogRole(role) && node.hasAttribute("aria-modal");
 
   const isModalDialog = isNonNativeModalDialog || isNativeModalDialog;
   const isExplicitInert = node.hasAttribute("inert");

test/int/inert.int.test.ts

@@ -7,7 +7,7 @@ describe("inert", () => {
     document.body.innerHTML = "";
   });
 
-  it("should hide inert elements from the tree unless they are modal dialog (non-native)", async () => {
+  it("should hide inert elements from the tree unless they are modal dialog (non-native dialog)", async () => {
     document.body.innerHTML = `<p>visible paragraph</p>
 <p inert>hidden paragraph</p>
 
@@ -116,4 +116,59 @@ describe("inert", () => {
       "end of dialog, visible dialog heading 5",
     ]);
   });
+
+  it("should hide inert elements from the tree unless they are modal dialog (alertdialog)", async () => {
+    document.body.innerHTML = `<p>visible paragraph</p>
+<p inert>hidden paragraph</p>
+
+<!-- Explicitly inert modal dialog should be inert -->
+<div aria-labelledby="dialog-heading-1" aria-modal="true" inert role="alertdialog">
+  <h1 id="dialog-heading-1">hidden dialog heading 1</h1>
+</div>
+
+<!-- Explicitly inert dialog should be inert -->
+<div aria-labelledby="dialog-heading-2" inert role="alertdialog">
+  <h1 id="dialog-heading-2">hidden dialog heading 2</h1>
+</div>
+
+<div inert>
+  <p>hidden paragraph</p>
+
+  <!-- Explicitly inert modal dialog should be inert -->
+  <div aria-labelledby="dialog-heading-3" aria-modal="true" inert role="alertdialog">
+    <h1 id="dialog-heading-3">hidden dialog heading 3</h1>
+  </div>
+
+  <!-- Non-modal dialog should inherit inert -->
+  <div aria-labelledby="dialog-heading-4" role="alertdialog">
+    <h1 id="dialog-heading-4">hidden dialog heading 4</h1>
+  </div>
+
+  <!-- Modal dialog should not inherit inert -->
+  <div aria-labelledby="dialog-heading-5" aria-modal="true" role="alertdialog">
+    <h1 id="dialog-heading-5">visible dialog heading 5</h1>
+  </div>
+</div>
+`;
+
+    await virtual.start({ container: document.body });
+
+    while (
+      (await virtual.lastSpokenPhrase()) !==
+      "end of alertdialog, visible dialog heading 5, modal"
+    ) {
+      await virtual.next();
+    }
+
+    expect(await virtual.spokenPhraseLog()).toEqual([
+      "document",
+      "paragraph",
+      "visible paragraph",
+      "end of paragraph",
+      "alertdialog, visible dialog heading 5, modal",
+      "alertdialog, visible dialog heading 5, modal",
+      "heading, visible dialog heading 5, level 1",
+      "end of alertdialog, visible dialog heading 5, modal",
+    ]);
+  });
 });