From 012ba42325a23753ec464ea81eb59371c5c88656 Mon Sep 17 00:00:00 2001
From: Jean-Yves Moyen <jym@siteimprove.com>
Date: Thu, 7 Sep 2023 15:55:38 +0200
Subject: [PATCH] Include shadow DOM in name from content

---
 .changeset/nine-yaks-grow.md          |  7 +++
 packages/alfa-aria/src/name.ts        |  4 +-
 packages/alfa-aria/test/name.spec.tsx | 87 +++++++++++++++++++++++++++
 3 files changed, 96 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/nine-yaks-grow.md

diff --git a/.changeset/nine-yaks-grow.md b/.changeset/nine-yaks-grow.md
new file mode 100644
index 0000000000..68de831637
--- /dev/null
+++ b/.changeset/nine-yaks-grow.md
@@ -0,0 +1,7 @@
+---
+"@siteimprove/alfa-aria": patch
+---
+
+**Fixed:** Name from content now correctly includes shadow DOM.
+
+When the accessible name is computed from the descendants, slots and descendants inside a shadow DOM are correctly taken into account. This mimic what browsers are doing, and what the accessible name conputation group seems to be moving toward.
diff --git a/packages/alfa-aria/src/name.ts b/packages/alfa-aria/src/name.ts
index 41a364c50c..125d40f262 100644
--- a/packages/alfa-aria/src/name.ts
+++ b/packages/alfa-aria/src/name.ts
@@ -198,7 +198,7 @@ export namespace Name {
       public toJSON(): Descendant.JSON {
         return {
           type: "descendant",
-          element: this._element.path(),
+          element: this._element.path(Node.flatTree),
           name: this._name.toJSON(),
         };
       }
@@ -823,7 +823,7 @@ export namespace Name {
     state: State
   ): Option<Name> {
     const names: Sequence<readonly [string, Name]> = element
-      .children()
+      .children(Node.flatTree)
       .filter(or(isText, isElement))
       .collect((element) =>
         fromNode(element, device, state.recurse(true).descend(true)).map(
diff --git a/packages/alfa-aria/test/name.spec.tsx b/packages/alfa-aria/test/name.spec.tsx
index 7052ee7cc0..9c396fa873 100644
--- a/packages/alfa-aria/test/name.spec.tsx
+++ b/packages/alfa-aria/test/name.spec.tsx
@@ -1659,3 +1659,90 @@ test(`.from() only associates <label> elements with for attributes with the
 
   t.deepEqual(Name.from(bar, device).toJSON(), { type: "none" });
 });
+
+test(".from() looks for slotted descendants", (t) => {
+  const target = (
+    <button>
+      <slot name="content"></slot>
+    </button>
+  );
+
+  const _ = (
+    <div>
+      {h.shadow([target])}
+      <span slot="content">Hello</span>
+    </div>
+  );
+
+  t.deepEqual(getName(target), {
+    value: "Hello",
+    sources: [
+      {
+        element: "/div[1]/button[1]",
+        name: {
+          sources: [
+            {
+              element: "/div[1]/button[1]/span[1]",
+              name: {
+                sources: [{ text: "/div[1]/span[1]/text()[1]", type: "data" }],
+                value: "Hello",
+              },
+              type: "descendant",
+            },
+          ],
+          value: "Hello",
+        },
+        type: "descendant",
+      },
+    ],
+  });
+});
+
+test(".from() looks for shadow descendants", (t) => {
+  const target = (
+    <button>
+      {h.shadow([<slot name="content"></slot>])}
+      <span slot="content">Hello</span>
+    </button>
+  );
+
+  t.deepEqual(getName(target), {
+    value: "Hello",
+    sources: [
+      {
+        element: "/button[1]",
+        name: {
+          sources: [
+            {
+              element: "/button[1]/slot[1]",
+              name: {
+                sources: [
+                  {
+                    element: "/button[1]/span[1]",
+                    name: {
+                      sources: [
+                        { text: "/button[1]/span[1]/text()[1]", type: "data" },
+                      ],
+                      value: "Hello",
+                    },
+                    type: "descendant",
+                  },
+                ],
+                value: "Hello",
+              },
+              type: "descendant",
+            },
+          ],
+          value: "Hello",
+        },
+        type: "descendant",
+      },
+    ],
+  });
+});
+
+test(".from() does not recurse into content documents", (t) => {
+  const target = <button>{h.document([<span>Hello</span>])}</button>;
+
+  t.deepEqual(Name.from(target, Device.standard()).isNone(), true);
+});