From 3f300066af954fe36486dbcf08f838d4b97fe246 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rolf=20Christian=20J=C3=B8rgensen?=
 <114920418+rcj-siteimprove@users.noreply.github.com>
Date: Wed, 17 Dec 2025 10:33:51 +0100
Subject: [PATCH 01/10] Add `isInert` method to `Element`

---
 packages/alfa-dom/src/node/element.ts | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/packages/alfa-dom/src/node/element.ts b/packages/alfa-dom/src/node/element.ts
index 74646e69e4..dd915f83e7 100644
--- a/packages/alfa-dom/src/node/element.ts
+++ b/packages/alfa-dom/src/node/element.ts
@@ -268,6 +268,31 @@ export class Element<N extends string = string>
     return None;
   }
 
+  /**
+   * Computes inertness of an element based on the `inert` attribute.
+   *
+   * {@link https://html.spec.whatwg.org/#the-inert-attribute}
+   *
+   * @privateRemarks
+   * According to {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inert}
+   * only open dialogs can escape inertness (except when they have the `inert` attribute).
+   */
+  public isInert(): boolean {
+    if (this._isInert === undefined) {
+      if (this.attribute("inert").isSome()) {
+        this._isInert = true;
+      } else if (this.name === "dialog" && this.attribute("open").isSome()) {
+        this._isInert = false;
+      } else {
+        this._isInert = this.ancestors(Node.flatTree)
+          .find(Element.isElement)
+          .map((parent) => parent.isInert())
+          .getOr(false);
+      }
+    }
+    return this._isInert;
+  }
+
   /*
    * This collects caches for methods that are specific to some kind of elements.
    * The actual methods are declared in element/augment.ts to de-clutter this
@@ -279,6 +304,7 @@ export class Element<N extends string = string>
   protected _inputType: helpers.InputType | undefined;
   protected _displaySize: number | undefined;
   protected _optionsList: Sequence<Element<"option">> | undefined;
+  private _isInert: boolean | undefined;
 
   /*
    * End of caches for methods specific to some kind of elements.

From 7b0dd460736a3f3b4f534374e65c76f47bf555b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rolf=20Christian=20J=C3=B8rgensen?=
 <114920418+rcj-siteimprove@users.noreply.github.com>
Date: Wed, 17 Dec 2025 10:36:47 +0100
Subject: [PATCH 02/10] Update `isInert` predicate to include call to
 `Element#isInert`

---
 .../src/element/predicate/is-inert.ts         |  16 ++-
 .../test/element/predicate/is-inert.spec.tsx  | 117 ++++++++++++++++++
 packages/alfa-style/test/tsconfig.json        |   1 +
 3 files changed, 129 insertions(+), 5 deletions(-)
 create mode 100644 packages/alfa-style/test/element/predicate/is-inert.spec.tsx

diff --git a/packages/alfa-style/src/element/predicate/is-inert.ts b/packages/alfa-style/src/element/predicate/is-inert.ts
index 31784e4f0f..a87ea44bf2 100644
--- a/packages/alfa-style/src/element/predicate/is-inert.ts
+++ b/packages/alfa-style/src/element/predicate/is-inert.ts
@@ -1,19 +1,25 @@
 import type { Device } from "@siteimprove/alfa-device";
-import type { Element } from "@siteimprove/alfa-dom";
-import type { Predicate } from "@siteimprove/alfa-predicate";
+import { Element } from "@siteimprove/alfa-dom";
+import { Predicate } from "@siteimprove/alfa-predicate";
 
 import { Style } from "../../style.js";
 
+const { or } = Predicate;
+
 /**
  * {@link https://html.spec.whatwg.org/#inert}
  *
  * @public
  */
-export function isInert(device: Device): Predicate<Element> {
-  return Style.hasComputedStyle(
+export const isInert = (device: Device) =>
+  or(isInertFromVisibility(device), isInertFromAttribute);
+
+const isInertFromVisibility = (device: Device) =>
+  Style.hasComputedStyle(
     "visibility",
     (specified) =>
       specified.value === "hidden" || specified.value === "collapse",
     device,
   );
-}
+
+const isInertFromAttribute = (element: Element) => element.isInert();
diff --git a/packages/alfa-style/test/element/predicate/is-inert.spec.tsx b/packages/alfa-style/test/element/predicate/is-inert.spec.tsx
new file mode 100644
index 0000000000..774943ade8
--- /dev/null
+++ b/packages/alfa-style/test/element/predicate/is-inert.spec.tsx
@@ -0,0 +1,117 @@
+import { test } from "@siteimprove/alfa-test";
+
+import { Device } from "@siteimprove/alfa-device";
+import { h } from "@siteimprove/alfa-dom/h";
+
+import { isInert } from "../../../src/element/predicate/is-inert.js";
+
+const device = Device.standard();
+const inert = isInert(device);
+
+test("isInert() returns false for elements with visibility: visible", (t) => {
+  t.equal(inert(<div style={{ visibility: "visible" }} />), false);
+});
+
+test("isInert() returns true for elements with visibility: hidden", (t) => {
+  t.equal(inert(<div style={{ visibility: "hidden" }} />), true);
+});
+
+test("isInert() returns true for elements with visibility: collapse", (t) => {
+  t.equal(inert(<div style={{ visibility: "collapse" }} />), true);
+});
+
+test("isInert() returns false by default", (t) => {
+  t.equal(inert(<div />), false);
+});
+
+test("isInert() returns true for elements inheriting visibility: hidden", (t) => {
+  const child = <div />;
+  const parent = <div style={{ visibility: "hidden" }}>{child}</div>;
+
+  h.document([parent]);
+
+  t.equal(inert(child), true);
+});
+
+test("isInert() returns true when stylesheet applies visibility: hidden", (t) => {
+  const element = <div class="hidden" />;
+
+  h.document(
+    [element],
+    [h.sheet([h.rule.style(".hidden", { visibility: "hidden" })])],
+  );
+
+  t.equal(inert(element), true);
+});
+
+test("isInert() returns true for elements with the inert attribute", (t) => {
+  t.equal(inert(<div inert />), true);
+});
+
+test("isInert() returns true for descendants of elements with the inert attribute", (t) => {
+  const child = <span>Text</span>;
+  const parent = <div inert>{child}</div>;
+
+  h.document([parent]);
+
+  t.equal(inert(child), true);
+});
+
+test("isInert() returns true for nested descendants of elements with the inert attribute", (t) => {
+  const descendant = <em>Text</em>;
+  const div = (
+    <div inert>
+      <span>{descendant}</span>
+    </div>
+  );
+
+  h.document([div]);
+
+  t.equal(inert(descendant), true);
+});
+
+test("isInert() returns false for open dialog", (t) => {
+  const dialog = <dialog open>Hello, from open dialog</dialog>;
+  const parent = <div inert>{dialog}</div>;
+
+  h.document([parent]);
+
+  t.equal(inert(dialog), false);
+});
+
+test("isInert() returns false for child of open dialog", (t) => {
+  const div = <div>Hello, from child of open dialog</div>;
+  const dialog = <dialog open>{div}</dialog>;
+  const parent = <div inert>{dialog}</div>;
+
+  h.document([parent]);
+
+  t.equal(inert(div), false);
+});
+
+test("isInert() returns true for open dialog with explicit inert attribute", (t) => {
+  const dialog = (
+    <dialog open inert>
+      <div>Hello from inert open dialog</div>
+    </dialog>
+  );
+  const parent = <div>{dialog}</div>;
+
+  h.document([parent]);
+
+  t.equal(inert(dialog), true);
+});
+
+test("isInert() returns true for child of open dialog with explicit inert attribute", (t) => {
+  const div = <div>Hello from inert open dialog</div>;
+  const dialog = (
+    <dialog open inert>
+      {div}
+    </dialog>
+  );
+  const parent = <div>{dialog}</div>;
+
+  h.document([parent]);
+
+  t.equal(inert(div), true);
+});
diff --git a/packages/alfa-style/test/tsconfig.json b/packages/alfa-style/test/tsconfig.json
index a4fca8deb8..758a2551df 100644
--- a/packages/alfa-style/test/tsconfig.json
+++ b/packages/alfa-style/test/tsconfig.json
@@ -9,6 +9,7 @@
   },
   "files": [
     "./common.ts",
+    "./element/predicate/is-inert.spec.tsx",
     "./node/helpers/inner-text.spec.tsx",
     "./node/predicate/has-transparent-background.spec.tsx",
     "./node/predicate/is-clipped.spec.tsx",

From 76d23d20d00def9c9de24bc005d5ed4c6fc53432 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rolf=20Christian=20J=C3=B8rgensen?=
 <114920418+rcj-siteimprove@users.noreply.github.com>
Date: Wed, 17 Dec 2025 11:18:20 +0100
Subject: [PATCH 03/10] Handle inert attribute when building accessibility tree

---
 packages/alfa-aria/src/node.ts        |  67 ++++++++++--
 packages/alfa-aria/test/node.spec.tsx | 141 ++++++++++++++++++++++++++
 2 files changed, 197 insertions(+), 11 deletions(-)

diff --git a/packages/alfa-aria/src/node.ts b/packages/alfa-aria/src/node.ts
index 021a9b6a06..c916e70714 100644
--- a/packages/alfa-aria/src/node.ts
+++ b/packages/alfa-aria/src/node.ts
@@ -275,7 +275,7 @@ export namespace Node {
   }
 
   class State {
-    private static _empty = new State(false, true);
+    private static _empty = new State(false, true, false);
 
     public static empty(): State {
       return this._empty;
@@ -283,10 +283,16 @@ export namespace Node {
 
     private readonly _isPresentational: boolean;
     private readonly _isVisible: boolean;
+    private readonly _isInert: boolean;
 
-    protected constructor(isPresentational: boolean, isVisible: boolean) {
+    protected constructor(
+      isPresentational: boolean,
+      isVisible: boolean,
+      isInert: boolean,
+    ) {
       this._isPresentational = isPresentational;
       this._isVisible = isVisible;
+      this._isInert = isInert;
     }
 
     public get isPresentational(): boolean {
@@ -297,12 +303,16 @@ export namespace Node {
       return this._isVisible;
     }
 
+    public get isInert(): boolean {
+      return this._isInert;
+    }
+
     public presentational(isPresentational: boolean): State {
       if (this._isPresentational === isPresentational) {
         return this;
       }
 
-      return new State(isPresentational, this._isVisible);
+      return new State(isPresentational, this._isVisible, this._isInert);
     }
 
     public visible(isVisible: boolean): State {
@@ -310,10 +320,24 @@ export namespace Node {
         return this;
       }
 
-      return new State(this._isPresentational, isVisible);
+      return new State(this._isPresentational, isVisible, this._isInert);
+    }
+
+    public inert(isInert: boolean): State {
+      if (this._isInert === isInert) {
+        return this;
+      }
+
+      return new State(this._isPresentational, this._isVisible, isInert);
     }
   }
 
+  const hasInertDomAttribute = dom.Element.hasAttribute("inert");
+  const isOpenDialog = and(
+    dom.Element.hasName("dialog"),
+    dom.Element.hasAttribute("open"),
+  );
+
   function fromNode(
     node: dom.Node,
     device: Device,
@@ -397,6 +421,24 @@ export namespace Node {
 
         state = state.visible(true);
 
+        if (hasInertDomAttribute(node)) {
+          // Elements with the inert attribute are exposed as containers
+          // as they may contain non-inert descendants
+          return Container.of(
+            node,
+            children(state.inert(true)),
+            Option.of(Role.of("generic")),
+          );
+        } else if (isOpenDialog(node)) {
+          // Open dialogs without the inert attribute escapes inertness
+          state = state.inert(false);
+        }
+
+        if (state.isInert) {
+          // We're in an inert context and haven't escaped, this element is inert
+          return Inert.of(node);
+        }
+
         const role = Role.fromExplicit(node).orElse(() =>
           // If the element has no explicit role and instead inherits a
           // presentational role then use that, otherwise fall back to the
@@ -464,13 +506,16 @@ export namespace Node {
         // nor a tabindex, it is not itself interesting for accessibility
         // purposes. It is therefore exposed as a container.
         // Some elements (mostly embedded content) are always exposed.
+        // However, if the element is inert, it becomes an Inert node instead.
         if (
           attributes.isEmpty() &&
           role.every(Role.hasName("generic")) &&
           node.tabIndex().isNone() &&
           !test(alwaysExpose, node)
         ) {
-          return Container.of(node, children(state), role);
+          return state.isInert
+            ? Inert.of(node)
+            : Container.of(node, children(state), role);
         }
 
         // If the element has a role that designates its children as
@@ -489,12 +534,12 @@ export namespace Node {
       }
 
       if (dom.Text.isText(node)) {
-        // As elements with `visibility: hidden` are exposed as containers for
-        // other elements that _might_ be visible, we need to check the
-        // visibility of the parent element before deciding to expose the text
-        // node. If the parent element isn't visible, the text node instead
-        // becomes inert.
-        if (!state.isVisible) {
+        // As elements with `visibility: hidden` or inert are exposed as
+        // containers for other elements that _might_ be visible or escape
+        // inertness, we need to check the state before deciding to expose
+        // the text node. If the parent element isn't visible or is inert,
+        // the text node becomes inert.
+        if (!state.isVisible || state.isInert) {
           return Inert.of(node);
         }
 
diff --git a/packages/alfa-aria/test/node.spec.tsx b/packages/alfa-aria/test/node.spec.tsx
index 592786432e..9107bbf19a 100644
--- a/packages/alfa-aria/test/node.spec.tsx
+++ b/packages/alfa-aria/test/node.spec.tsx
@@ -658,3 +658,144 @@ test(`.from() treats second <summary> elements as generic`, (t) => {
     ],
   });
 });
+
+test(`.from() does not expose elements with the inert attribute`, (t) => {
+  const target = <div inert>Hello world</div>;
+
+  t.deepEqual(Node.from(target, device).toJSON(), {
+    type: "container",
+    node: "/div[1]",
+    role: "generic",
+    children: [
+      {
+        type: "inert",
+        node: "/div[1]/text()[1]",
+      },
+    ],
+  });
+});
+
+test(`.from() does not expose flat tree descendants of elements with the inert attribute`, (t) => {
+  const target = (
+    <div inert>
+      <button>Click me</button>
+      <input type="text" />
+      <span>Some text</span>
+    </div>
+  );
+
+  t.deepEqual(Node.from(target, device).toJSON(), {
+    type: "container",
+    node: "/div[1]",
+    role: "generic",
+    children: [
+      {
+        type: "inert",
+        node: "/div[1]/button[1]",
+      },
+      {
+        type: "inert",
+        node: "/div[1]/input[1]",
+      },
+      {
+        type: "inert",
+        node: "/div[1]/span[1]",
+      },
+    ],
+  });
+});
+
+test(`.from() exposes descendants that escape inertness via open dialog`, (t) => {
+  const popup = <div>I'm in a popup dialog</div>;
+  const button = <button>Click me in popup</button>;
+
+  const target = (
+    <div inert>
+      <input />
+      <span>Hidden text</span>
+      <dialog open>
+        {popup}
+        {button}
+      </dialog>
+    </div>
+  );
+
+  t.deepEqual(Node.from(target, device).toJSON(), {
+    type: "container",
+    node: "/div[1]",
+    role: "generic",
+    children: [
+      {
+        type: "inert",
+        node: "/div[1]/input[1]",
+      },
+      {
+        type: "inert",
+        node: "/div[1]/span[1]",
+      },
+      {
+        type: "element",
+        node: "/div[1]/dialog[1]",
+        role: "dialog",
+        name: null,
+        attributes: [
+          {
+            name: "aria-expanded",
+            value: "true",
+          },
+        ],
+        children: [
+          {
+            type: "container",
+            node: "/div[1]/dialog[1]/div[1]",
+            role: "generic",
+            children: [
+              {
+                type: "text",
+                node: "/div[1]/dialog[1]/div[1]/text()[1]",
+                name: "I'm in a popup dialog",
+              },
+            ],
+          },
+          {
+            type: "element",
+            node: "/div[1]/dialog[1]/button[1]",
+            role: "button",
+            name: "Click me in popup",
+            attributes: [],
+            children: [
+              {
+                type: "text",
+                node: "/div[1]/dialog[1]/button[1]/text()[1]",
+                name: "Click me in popup",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  });
+});
+
+test(`.from() does not expose dialog without open attribute inside inert element`, (t) => {
+  const target = (
+    <div inert>
+      <dialog>
+        <div>Not open</div>
+        <button>Can't click me</button>
+      </dialog>
+    </div>
+  );
+
+  t.deepEqual(Node.from(target, device).toJSON(), {
+    type: "container",
+    node: "/div[1]",
+    role: "generic",
+    children: [
+      {
+        type: "inert",
+        node: "/div[1]/dialog[1]",
+      },
+    ],
+  });
+});

From 04789b6b2a5bc356664c516b7aa021c93786e220 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rolf=20Christian=20J=C3=B8rgensen?=
 <114920418+rcj-siteimprove@users.noreply.github.com>
Date: Wed, 17 Dec 2025 11:40:36 +0100
Subject: [PATCH 04/10] Exclude inert elements from `isSuggestedFocusable`

---
 .../predicate/is-suggested-focusable.ts       |   4 +
 .../predicate/is-suggested-focusable.spec.tsx | 143 ++++++++++++++++++
 packages/alfa-dom/test/tsconfig.json          |   1 +
 3 files changed, 148 insertions(+)
 create mode 100644 packages/alfa-dom/test/node/predicate/is-suggested-focusable.spec.tsx

diff --git a/packages/alfa-dom/src/node/element/predicate/is-suggested-focusable.ts b/packages/alfa-dom/src/node/element/predicate/is-suggested-focusable.ts
index ad0aa34ddb..95debc1dcd 100644
--- a/packages/alfa-dom/src/node/element/predicate/is-suggested-focusable.ts
+++ b/packages/alfa-dom/src/node/element/predicate/is-suggested-focusable.ts
@@ -12,6 +12,10 @@ import { Element } from "../../element.js";
  * @public
  */
 export function isSuggestedFocusable(element: Element): boolean {
+  if (element.isInert()) {
+    return false;
+  }
+
   switch (element.name) {
     case "a":
     case "link":
diff --git a/packages/alfa-dom/test/node/predicate/is-suggested-focusable.spec.tsx b/packages/alfa-dom/test/node/predicate/is-suggested-focusable.spec.tsx
new file mode 100644
index 0000000000..7bc0a20a6a
--- /dev/null
+++ b/packages/alfa-dom/test/node/predicate/is-suggested-focusable.spec.tsx
@@ -0,0 +1,143 @@
+import { test } from "@siteimprove/alfa-test";
+import { h, type Element } from "../../../dist/index.js";
+import { isSuggestedFocusable } from "../../../dist/node/element/predicate/is-suggested-focusable.js";
+
+test("isSuggestedFocusable() returns false for inert elements", (t) => {
+  const div = <div inert>content</div>;
+  const button = <button inert>click</button>;
+  const input = <input type="text" inert />;
+
+  t.deepEqual(isSuggestedFocusable(div), false);
+  t.deepEqual(isSuggestedFocusable(button), false);
+  t.deepEqual(isSuggestedFocusable(input), false);
+});
+
+test("isSuggestedFocusable() handles nested inert containers", (t) => {
+  const button = <button>should not be focusable</button>;
+  h.document([<div inert>{button}</div>]);
+  t.deepEqual(isSuggestedFocusable(button), false);
+});
+
+test("isSuggestedFocusable() returns true for elements inside open dialog within inert container", (t) => {
+  const button = <button>should be focusable</button>;
+  h.document([
+    <div inert>
+      <dialog open>{button}</dialog>
+    </div>,
+  ]);
+  t.deepEqual(isSuggestedFocusable(button), true);
+});
+
+test("isSuggestedFocusable() returns true for <a> with href", (t) => {
+  const link = <a href="https://example.com">link</a>;
+  t.deepEqual(isSuggestedFocusable(link), true);
+});
+
+test("isSuggestedFocusable() returns false for <a> without href", (t) => {
+  const link = <a>not a link</a>;
+  t.deepEqual(isSuggestedFocusable(link), false);
+});
+
+test("isSuggestedFocusable() returns true for <link> with href", (t) => {
+  const link = <link href="style.css" />;
+  t.deepEqual(isSuggestedFocusable(link), true);
+});
+
+test("isSuggestedFocusable() returns false for <link> without href", (t) => {
+  const link = <link />;
+  t.deepEqual(isSuggestedFocusable(link), false);
+});
+
+test("isSuggestedFocusable() returns true for <input> with non-hidden type", (t) => {
+  const text = <input type="text" />;
+  const checkbox = <input type="checkbox" />;
+  const radio = <input type="radio" />;
+  const button = <input type="button" />;
+  const noType = <input />;
+
+  t.deepEqual(isSuggestedFocusable(text), true);
+  t.deepEqual(isSuggestedFocusable(checkbox), true);
+  t.deepEqual(isSuggestedFocusable(radio), true);
+  t.deepEqual(isSuggestedFocusable(button), true);
+  t.deepEqual(isSuggestedFocusable(noType), true);
+});
+
+test("isSuggestedFocusable() returns false for <input type='hidden'>", (t) => {
+  const hidden = <input type="hidden" />;
+  t.deepEqual(isSuggestedFocusable(hidden), false);
+});
+
+test("isSuggestedFocusable() returns true for <audio> with controls", (t) => {
+  const audio = <audio controls src="audio.mp3" />;
+  t.deepEqual(isSuggestedFocusable(audio), true);
+});
+
+test("isSuggestedFocusable() returns false for <audio> without controls", (t) => {
+  const audio = <audio src="audio.mp3" />;
+  t.deepEqual(isSuggestedFocusable(audio), false);
+});
+
+test("isSuggestedFocusable() returns true for <video> with controls", (t) => {
+  const video = <video controls src="video.mp4" />;
+  t.deepEqual(isSuggestedFocusable(video), true);
+});
+
+test("isSuggestedFocusable() returns false for <video> without controls", (t) => {
+  const video = <video src="video.mp4" />;
+  t.deepEqual(isSuggestedFocusable(video), false);
+});
+
+test("isSuggestedFocusable() returns true for <button>", (t) => {
+  const button = <button>click me</button>;
+  t.deepEqual(isSuggestedFocusable(button), true);
+});
+
+test("isSuggestedFocusable() returns true for <select>", (t) => {
+  const select = (
+    <select>
+      <option>Option 1</option>
+    </select>
+  );
+  t.deepEqual(isSuggestedFocusable(select), true);
+});
+
+test("isSuggestedFocusable() returns true for <textarea>", (t) => {
+  const textarea = <textarea>content</textarea>;
+  t.deepEqual(isSuggestedFocusable(textarea), true);
+});
+
+test("isSuggestedFocusable() returns true for <summary> of parent <details>", (t) => {
+  const summary = <summary>Summary</summary>;
+  h.document([
+    <details>
+      {summary}
+      <p>Details content</p>
+    </details>,
+  ]);
+  t.deepEqual(isSuggestedFocusable(summary), true);
+});
+
+test("isSuggestedFocusable() returns false for <summary> not in <details>", (t) => {
+  const summary = <summary>Summary</summary>;
+  t.deepEqual(isSuggestedFocusable(summary), false);
+});
+
+test("isSuggestedFocusable() returns true for editing host", (t) => {
+  const editable = <div contenteditable="true">editable</div>;
+  t.deepEqual(isSuggestedFocusable(editable), true);
+});
+
+test("isSuggestedFocusable() returns true for browsing context container", (t) => {
+  const iframe = <iframe src="page.html" />;
+  t.deepEqual(isSuggestedFocusable(iframe), true);
+});
+
+test("isSuggestedFocusable() returns false for regular elements", (t) => {
+  const div = <div>content</div>;
+  const span = <span>text</span>;
+  const p = <p>paragraph</p>;
+
+  t.deepEqual(isSuggestedFocusable(div), false);
+  t.deepEqual(isSuggestedFocusable(span), false);
+  t.deepEqual(isSuggestedFocusable(p), false);
+});
diff --git a/packages/alfa-dom/test/tsconfig.json b/packages/alfa-dom/test/tsconfig.json
index 2c47963944..23cd48c730 100644
--- a/packages/alfa-dom/test/tsconfig.json
+++ b/packages/alfa-dom/test/tsconfig.json
@@ -16,6 +16,7 @@
     "./node/element.spec.tsx",
     "./node/text.spec.ts",
     "./node/predicate/has-tab-index.spec.tsx",
+    "./node/predicate/is-suggested-focusable.spec.tsx",
     "./node/traversal/get-nodes-between.spec.tsx",
     "./node/traversal/lowest-common-ancestor.spec.tsx",
     "./node/query/descendants.spec.tsx",

From f3fb8b431c7cf78e47a118d0670c913c1352825a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rolf=20Christian=20J=C3=B8rgensen?=
 <114920418+rcj-siteimprove@users.noreply.github.com>
Date: Wed, 17 Dec 2025 11:41:08 +0100
Subject: [PATCH 05/10] Include inert elements in `isProgrammaticallyHidden`

---
 .../predicate/is-programmatically-hidden.ts   |  12 +-
 .../is-programmatically-hidden.spec.tsx       | 177 ++++++++++++++++++
 packages/alfa-aria/test/tsconfig.json         |   1 +
 3 files changed, 180 insertions(+), 10 deletions(-)
 create mode 100644 packages/alfa-aria/test/dom/predicate/is-programmatically-hidden.spec.tsx

diff --git a/packages/alfa-aria/src/dom/predicate/is-programmatically-hidden.ts b/packages/alfa-aria/src/dom/predicate/is-programmatically-hidden.ts
index 340106f7bc..399215d4c2 100644
--- a/packages/alfa-aria/src/dom/predicate/is-programmatically-hidden.ts
+++ b/packages/alfa-aria/src/dom/predicate/is-programmatically-hidden.ts
@@ -9,7 +9,7 @@ import { Style } from "@siteimprove/alfa-style";
 const { hasAttribute, isElement } = Element;
 const { or, equals } = Predicate;
 const { and } = Refinement;
-const { hasComputedStyle } = Style;
+const { hasComputedStyle, isInert } = Style;
 
 /**
  * Check if an element is programmatically hidden.
@@ -23,15 +23,7 @@ export function isProgrammaticallyHidden(
   device: Device,
   context: Context = Context.empty(),
 ): Predicate<Element> {
-  return or(
-    hasComputedStyle(
-      "visibility",
-      (visibility) => visibility.value !== "visible",
-      device,
-      context,
-    ),
-    hasHiddenAncestors(device, context),
-  );
+  return or(isInert(device), hasHiddenAncestors(device, context));
 }
 
 const hasHiddenAncestors = Cache.memoize(function (
diff --git a/packages/alfa-aria/test/dom/predicate/is-programmatically-hidden.spec.tsx b/packages/alfa-aria/test/dom/predicate/is-programmatically-hidden.spec.tsx
new file mode 100644
index 0000000000..d5407b3016
--- /dev/null
+++ b/packages/alfa-aria/test/dom/predicate/is-programmatically-hidden.spec.tsx
@@ -0,0 +1,177 @@
+import { h } from "@siteimprove/alfa-dom/h";
+import { test } from "@siteimprove/alfa-test";
+
+import { Device } from "@siteimprove/alfa-device";
+
+import { DOM } from "../../../dist/index.js";
+
+const device = Device.standard();
+const isProgrammaticallyHidden = DOM.isProgrammaticallyHidden(device);
+
+test("isProgrammaticallyHidden() returns false for visible elements", (t) => {
+  const button = <button>Click me</button>;
+  h.document([button]);
+
+  t.equal(isProgrammaticallyHidden(button), false);
+});
+
+test("isProgrammaticallyHidden() returns true for elements with display: none", (t) => {
+  const button = <button style={{ display: "none" }}>Hidden</button>;
+  h.document([button]);
+
+  t.equal(isProgrammaticallyHidden(button), true);
+});
+
+test("isProgrammaticallyHidden() returns true for elements with visibility: hidden", (t) => {
+  const button = <button style={{ visibility: "hidden" }}>Hidden</button>;
+  h.document([button]);
+
+  t.equal(isProgrammaticallyHidden(button), true);
+});
+
+test("isProgrammaticallyHidden() returns true for elements with visibility: collapse", (t) => {
+  const button = <button style={{ visibility: "collapse" }}>Hidden</button>;
+  h.document([button]);
+
+  t.equal(isProgrammaticallyHidden(button), true);
+});
+
+test("isProgrammaticallyHidden() returns false for elements with visibility: visible", (t) => {
+  const button = <button style={{ visibility: "visible" }}>Visible</button>;
+  h.document([button]);
+
+  t.equal(isProgrammaticallyHidden(button), false);
+});
+
+test("isProgrammaticallyHidden() returns true for elements with aria-hidden='true'", (t) => {
+  const button = <button aria-hidden="true">Hidden</button>;
+  h.document([button]);
+
+  t.equal(isProgrammaticallyHidden(button), true);
+});
+
+test("isProgrammaticallyHidden() returns false for elements with aria-hidden='false'", (t) => {
+  const button = <button aria-hidden="false">Visible</button>;
+  h.document([button]);
+
+  t.equal(isProgrammaticallyHidden(button), false);
+});
+
+test("isProgrammaticallyHidden() returns true for inert elements", (t) => {
+  const button = <button inert>Inert</button>;
+  h.document([button]);
+
+  t.equal(isProgrammaticallyHidden(button), true);
+});
+
+test("isProgrammaticallyHidden() returns true for elements inside inert container", (t) => {
+  const button = <button>Not inert itself</button>;
+  const parent = <div inert>{button}</div>;
+  h.document([parent]);
+
+  t.equal(isProgrammaticallyHidden(button), true);
+});
+
+test("isProgrammaticallyHidden() returns true for elements with display: none ancestor", (t) => {
+  const button = <button>Hidden by ancestor</button>;
+  const parent = <div style={{ display: "none" }}>{button}</div>;
+  h.document([parent]);
+
+  t.equal(isProgrammaticallyHidden(button), true);
+});
+
+test("isProgrammaticallyHidden() returns true for elements with aria-hidden='true' ancestor", (t) => {
+  const button = <button>Hidden by ancestor</button>;
+  const parent = <div aria-hidden="true">{button}</div>;
+  h.document([parent]);
+
+  t.equal(isProgrammaticallyHidden(button), true);
+});
+
+test("isProgrammaticallyHidden() returns true for elements with visibility: hidden ancestor", (t) => {
+  const button = <button>Hidden by ancestor</button>;
+  const parent = <div style={{ visibility: "hidden" }}>{button}</div>;
+  h.document([parent]);
+
+  t.equal(isProgrammaticallyHidden(button), true);
+});
+
+test("isProgrammaticallyHidden() returns true for elements with visibility: collapse ancestor", (t) => {
+  const button = <button>Hidden by ancestor</button>;
+  const parent = <div style={{ visibility: "collapse" }}>{button}</div>;
+  h.document([parent]);
+
+  t.equal(isProgrammaticallyHidden(button), true);
+});
+
+test("isProgrammaticallyHidden() returns true for deeply nested hidden elements", (t) => {
+  const button = <button>Deeply hidden</button>;
+  const level2 = <div>{button}</div>;
+  const level1 = <div aria-hidden="true">{level2}</div>;
+  h.document([level1]);
+
+  t.equal(isProgrammaticallyHidden(button), true);
+});
+
+test("isProgrammaticallyHidden() returns false for elements inside open dialog within inert container", (t) => {
+  const button = <button>Should be visible</button>;
+  const dialog = <dialog open>{button}</dialog>;
+  const parent = <div inert>{dialog}</div>;
+  h.document([parent]);
+
+  t.equal(isProgrammaticallyHidden(button), false);
+});
+
+test("isProgrammaticallyHidden() returns true for elements with multiple hiding conditions", (t) => {
+  const button = (
+    <button aria-hidden="true" style={{ display: "none" }}>
+      Multiple conditions
+    </button>
+  );
+  h.document([button]);
+
+  t.equal(isProgrammaticallyHidden(button), true);
+});
+
+test("isProgrammaticallyHidden() returns false for visible elements with visible ancestors", (t) => {
+  const button = <button>Visible</button>;
+  const parent = <div>{button}</div>;
+  const grandparent = <section>{parent}</section>;
+  h.document([grandparent]);
+
+  t.equal(isProgrammaticallyHidden(button), false);
+});
+
+test("isProgrammaticallyHidden() returns true for elements with display: none even if aria-hidden='false'", (t) => {
+  const button = (
+    <button aria-hidden="false" style={{ display: "none" }}>
+      Hidden
+    </button>
+  );
+  h.document([button]);
+
+  t.equal(isProgrammaticallyHidden(button), true);
+});
+
+test("isProgrammaticallyHidden() returns false for elements with display: block", (t) => {
+  const button = <button style={{ display: "block" }}>Visible</button>;
+  h.document([button]);
+
+  t.equal(isProgrammaticallyHidden(button), false);
+});
+
+test("isProgrammaticallyHidden() handles mixed visibility in hierarchy", (t) => {
+  const visibleButton = <button>Visible</button>;
+  const hiddenButton = <button>Hidden</button>;
+  const hiddenDiv = <div aria-hidden="true">{hiddenButton}</div>;
+  const parent = (
+    <div>
+      {visibleButton}
+      {hiddenDiv}
+    </div>
+  );
+  h.document([parent]);
+
+  t.equal(isProgrammaticallyHidden(visibleButton), false);
+  t.equal(isProgrammaticallyHidden(hiddenButton), true);
+});
diff --git a/packages/alfa-aria/test/tsconfig.json b/packages/alfa-aria/test/tsconfig.json
index 7653842782..d291ecb079 100644
--- a/packages/alfa-aria/test/tsconfig.json
+++ b/packages/alfa-aria/test/tsconfig.json
@@ -11,6 +11,7 @@
     "./dom/predicate/has-accessible-name.spec.tsx",
     "./dom/predicate/has-incorrect-role-without-name.spec.tsx",
     "./dom/predicate/has-role.spec.tsx",
+    "./dom/predicate/is-programmatically-hidden.spec.tsx",
     "./name.spec.tsx",
     "./name-testable-statements.spec.tsx",
     "./node.spec.tsx",

From 6c7590f4285bdb477c9b7b37e061db32ddcdd8de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rolf=20Christian=20J=C3=B8rgensen?=
 <114920418+rcj-siteimprove@users.noreply.github.com>
Date: Wed, 17 Dec 2025 13:59:21 +0100
Subject: [PATCH 06/10] Remove generic role from inert containers

---
 packages/alfa-aria/src/node.ts        |  7 +----
 packages/alfa-aria/test/node.spec.tsx | 44 +++------------------------
 2 files changed, 6 insertions(+), 45 deletions(-)

diff --git a/packages/alfa-aria/src/node.ts b/packages/alfa-aria/src/node.ts
index c916e70714..fa364cb81c 100644
--- a/packages/alfa-aria/src/node.ts
+++ b/packages/alfa-aria/src/node.ts
@@ -424,18 +424,13 @@ export namespace Node {
         if (hasInertDomAttribute(node)) {
           // Elements with the inert attribute are exposed as containers
           // as they may contain non-inert descendants
-          return Container.of(
-            node,
-            children(state.inert(true)),
-            Option.of(Role.of("generic")),
-          );
+          return Container.of(node, children(state.inert(true)));
         } else if (isOpenDialog(node)) {
           // Open dialogs without the inert attribute escapes inertness
           state = state.inert(false);
         }
 
         if (state.isInert) {
-          // We're in an inert context and haven't escaped, this element is inert
           return Inert.of(node);
         }
 
diff --git a/packages/alfa-aria/test/node.spec.tsx b/packages/alfa-aria/test/node.spec.tsx
index 9107bbf19a..a673178d72 100644
--- a/packages/alfa-aria/test/node.spec.tsx
+++ b/packages/alfa-aria/test/node.spec.tsx
@@ -665,7 +665,7 @@ test(`.from() does not expose elements with the inert attribute`, (t) => {
   t.deepEqual(Node.from(target, device).toJSON(), {
     type: "container",
     node: "/div[1]",
-    role: "generic",
+    role: null,
     children: [
       {
         type: "inert",
@@ -678,8 +678,6 @@ test(`.from() does not expose elements with the inert attribute`, (t) => {
 test(`.from() does not expose flat tree descendants of elements with the inert attribute`, (t) => {
   const target = (
     <div inert>
-      <button>Click me</button>
-      <input type="text" />
       <span>Some text</span>
     </div>
   );
@@ -687,16 +685,8 @@ test(`.from() does not expose flat tree descendants of elements with the inert a
   t.deepEqual(Node.from(target, device).toJSON(), {
     type: "container",
     node: "/div[1]",
-    role: "generic",
+    role: null,
     children: [
-      {
-        type: "inert",
-        node: "/div[1]/button[1]",
-      },
-      {
-        type: "inert",
-        node: "/div[1]/input[1]",
-      },
       {
         type: "inert",
         node: "/div[1]/span[1]",
@@ -706,16 +696,11 @@ test(`.from() does not expose flat tree descendants of elements with the inert a
 });
 
 test(`.from() exposes descendants that escape inertness via open dialog`, (t) => {
-  const popup = <div>I'm in a popup dialog</div>;
-  const button = <button>Click me in popup</button>;
-
   const target = (
     <div inert>
-      <input />
       <span>Hidden text</span>
       <dialog open>
-        {popup}
-        {button}
+        <div>I'm in a popup dialog</div>
       </dialog>
     </div>
   );
@@ -723,12 +708,8 @@ test(`.from() exposes descendants that escape inertness via open dialog`, (t) =>
   t.deepEqual(Node.from(target, device).toJSON(), {
     type: "container",
     node: "/div[1]",
-    role: "generic",
+    role: null,
     children: [
-      {
-        type: "inert",
-        node: "/div[1]/input[1]",
-      },
       {
         type: "inert",
         node: "/div[1]/span[1]",
@@ -757,20 +738,6 @@ test(`.from() exposes descendants that escape inertness via open dialog`, (t) =>
               },
             ],
           },
-          {
-            type: "element",
-            node: "/div[1]/dialog[1]/button[1]",
-            role: "button",
-            name: "Click me in popup",
-            attributes: [],
-            children: [
-              {
-                type: "text",
-                node: "/div[1]/dialog[1]/button[1]/text()[1]",
-                name: "Click me in popup",
-              },
-            ],
-          },
         ],
       },
     ],
@@ -781,7 +748,6 @@ test(`.from() does not expose dialog without open attribute inside inert element
   const target = (
     <div inert>
       <dialog>
-        <div>Not open</div>
         <button>Can't click me</button>
       </dialog>
     </div>
@@ -790,7 +756,7 @@ test(`.from() does not expose dialog without open attribute inside inert element
   t.deepEqual(Node.from(target, device).toJSON(), {
     type: "container",
     node: "/div[1]",
-    role: "generic",
+    role: null,
     children: [
       {
         type: "inert",

From 4cf1a2d75337cac560f9ab748cae0b11fadc3890 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rolf=20Christian=20J=C3=B8rgensen?=
 <114920418+rcj-siteimprove@users.noreply.github.com>
Date: Wed, 17 Dec 2025 14:02:17 +0100
Subject: [PATCH 07/10] Add tests showing that R17 handles the inert attribute

---
 .../alfa-rules/test/sia-r17/rule.spec.tsx     | 49 +++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/packages/alfa-rules/test/sia-r17/rule.spec.tsx b/packages/alfa-rules/test/sia-r17/rule.spec.tsx
index a02ea3cec1..a81a3df3b4 100644
--- a/packages/alfa-rules/test/sia-r17/rule.spec.tsx
+++ b/packages/alfa-rules/test/sia-r17/rule.spec.tsx
@@ -143,3 +143,52 @@ test(`evaluate() is inapplicable when aria-hidden has incorrect value`, async (t
 
   t.deepEqual(await evaluate(R17, { document }), [inapplicable(R17)]);
 });
+
+test(`evaluate() passes an element with the inert attribute`, async (t) => {
+  const target = (
+    <div aria-hidden="true" inert>
+      <a href="/">Link</a>
+    </div>
+  );
+
+  const document = h.document([target]);
+
+  t.deepEqual(await evaluate(R17, { document }), [
+    passed(R17, target, {
+      1: Outcomes.IsNotTabbable,
+    }),
+  ]);
+});
+
+test(`evaluate() passes an element with inert ancestor`, async (t) => {
+  const target = (
+    <div aria-hidden="true">
+      <a href="/">Link</a>
+    </div>
+  );
+
+  const document = h.document([<div inert>{target}</div>]);
+
+  t.deepEqual(await evaluate(R17, { document }), [
+    passed(R17, target, {
+      1: Outcomes.IsNotTabbable,
+    }),
+  ]);
+});
+
+test(`evaluate() fails an inert element with a descendant that escapes inertness`, async (t) => {
+  const button = <button>Click me in popup</button>;
+  const target = (
+    <div aria-hidden="true" inert>
+      <dialog open>{button}</dialog>
+    </div>
+  );
+
+  const document = h.document([target]);
+
+  t.deepEqual(await evaluate(R17, { document }), [
+    failed(R17, target, {
+      1: Outcomes.IsTabbable([button]),
+    }),
+  ]);
+});

From 0c573ec537611da6fe557e36adf07098c695950f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rolf=20Christian=20J=C3=B8rgensen?=
 <114920418+rcj-siteimprove@users.noreply.github.com>
Date: Wed, 17 Dec 2025 14:07:13 +0100
Subject: [PATCH 08/10] Create neat-ads-happen.md

---
 .changeset/neat-ads-happen.md | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 .changeset/neat-ads-happen.md

diff --git a/.changeset/neat-ads-happen.md b/.changeset/neat-ads-happen.md
new file mode 100644
index 0000000000..63af1aeaa2
--- /dev/null
+++ b/.changeset/neat-ads-happen.md
@@ -0,0 +1,8 @@
+---
+"@siteimprove/alfa-aria": patch
+"@siteimprove/alfa-dom": patch
+"@siteimprove/alfa-rules": patch
+"@siteimprove/alfa-style": patch
+---
+
+**Added:** The `inert` attribute is now supported.

From ae361ff94e84c40d43b412205b97563a5dbe7981 Mon Sep 17 00:00:00 2001
From: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 17 Dec 2025 13:24:44 +0000
Subject: [PATCH 09/10] Extract API

---
 docs/review/api/alfa-dom.api.md   | 1 +
 docs/review/api/alfa-style.api.md | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/docs/review/api/alfa-dom.api.md b/docs/review/api/alfa-dom.api.md
index ed320917b3..551b81ae9a 100644
--- a/docs/review/api/alfa-dom.api.md
+++ b/docs/review/api/alfa-dom.api.md
@@ -316,6 +316,7 @@ export class Element<N extends string = string> extends Node<"element"> implemen
     protected _inputType: helpers.InputType | undefined;
     // @internal (undocumented)
     protected _internalPath(options?: Node.Traversal): string;
+    isInert(): boolean;
     // (undocumented)
     isVoid(): boolean;
     // (undocumented)
diff --git a/docs/review/api/alfa-style.api.md b/docs/review/api/alfa-style.api.md
index 93ee748489..9385609874 100644
--- a/docs/review/api/alfa-style.api.md
+++ b/docs/review/api/alfa-style.api.md
@@ -483,7 +483,7 @@ export namespace Style {
     isFlexOrGridChild: typeof element.isFlexOrGridChild, // (undocumented)
     isFocusable: typeof element.isFocusable, // (undocumented)
     isImportant: typeof element.isImportant, // (undocumented)
-    isInert: typeof element.isInert, // (undocumented)
+    isInert: (device: Device) => Predicate<Element<string>, []>, // (undocumented)
     isPositioned: typeof element.isPositioned, // (undocumented)
     isTabbable: typeof element.isTabbable, // (undocumented)
     isVisibleShadow: typeof element.isVisibleShadow;

From adfaea1bf82839ca749f6919246e7798c256381b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rolf=20Christian=20J=C3=B8rgensen?=
 <114920418+rcj-siteimprove@users.noreply.github.com>
Date: Mon, 12 Jan 2026 16:24:19 +0100
Subject: [PATCH 10/10] Update packages/alfa-dom/src/node/element.ts

Co-authored-by: Jean-Yves Moyen <jym@siteimprove.com>
---
 packages/alfa-dom/src/node/element.ts | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/alfa-dom/src/node/element.ts b/packages/alfa-dom/src/node/element.ts
index dd915f83e7..fec71d52c8 100644
--- a/packages/alfa-dom/src/node/element.ts
+++ b/packages/alfa-dom/src/node/element.ts
@@ -284,10 +284,9 @@ export class Element<N extends string = string>
       } else if (this.name === "dialog" && this.attribute("open").isSome()) {
         this._isInert = false;
       } else {
-        this._isInert = this.ancestors(Node.flatTree)
-          .find(Element.isElement)
-          .map((parent) => parent.isInert())
-          .getOr(false);
+        this._isInert = this.parent(Node.flatTree)
+          .filter(Element.isElement)
+          .some((parent) => parent.isInert());
       }
     }
     return this._isInert;