generate correct IDs for shadow DOM elements

Author: seanmcguire12

lib/a11y/utils.ts

@@ -195,6 +195,9 @@ export async function buildBackendIdMaps(
     const stack: StackEntry[] = [{ node: startNode, path: "", fid: rootFid }];
     const seen = new Set<EncodedId>();
 
+    const joinStep = (base: string, step: string): string =>
+      base.endsWith("//") ? `${base}${step}` : `${base}/${step}`;
+
     while (stack.length) {
       const { node, path, fid } = stack.pop()!;
 
@@ -212,6 +215,16 @@ export async function buildBackendIdMaps(
         stack.push({ node: node.contentDocument, path: "", fid: childFid });
       }
 
+      if (node.shadowRoots?.length) {
+        for (const shadowRoot of node.shadowRoots) {
+          stack.push({
+            node: shadowRoot,
+            path: `${path}//`,
+            fid,
+          });
+        }
+      }
+
       // push children
       const kids = node.children ?? [];
       if (kids.length) {
@@ -234,7 +247,7 @@ export async function buildBackendIdMaps(
         for (let i = kids.length - 1; i >= 0; i--) {
           stack.push({
             node: kids[i]!,
-            path: `${path}/${segs[i]}`,
+            path: joinStep(path, segs[i]!),
             fid,
           });
         }