AX: Elements with display: contents and content in a shadowroot do not have their content read when referenced by aria-labelledby

twilco · twilco · commit 2b263331d69a · 2026-01-20T19:06:26.000-08:00
https://bugs.webkit.org/show_bug.cgi?id=275222 rdar://129361833 Reviewed by Joshua Hoffman. When computing accessible names for elements referenced by aria-labelledby, textUnderElement() relies on the render tree to find children. For display:contents shadow hosts, there is no renderer, so shadow root content was never included. The fix adds special handling in accessibleNameForNode() to explicitly traverse shadow root content for display:contents elements. * LayoutTests/accessibility/aria-labelledby-display-contents-shadow-root-expected.txt: Added. * LayoutTests/accessibility/aria-labelledby-display-contents-shadow-root.html: Added. * Source/WebCore/accessibility/AccessibilityNodeObject.cpp: (WebCore::accessibleNameForNode): Canonical link: https://commits.webkit.org/305918@main
diff --git a/LayoutTests/accessibility/aria-labelledby-display-contents-shadow-root-expected.txt b/LayoutTests/accessibility/aria-labelledby-display-contents-shadow-root-expected.txt
@@ -0,0 +1,11 @@
+This test ensures aria-labelledby correctly references display:contents elements with shadow roots.
+
+PASS: testButton.role.toLowerCase().includes('button') === true
+PASS: platformValueForW3CName(testButton) === 'Shadow Label Text'
+PASS: platformValueForW3CName(testButton).includes('should NOT appear') === false
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+Button Content
+
diff --git a/LayoutTests/accessibility/aria-labelledby-display-contents-shadow-root.html b/LayoutTests/accessibility/aria-labelledby-display-contents-shadow-root.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="../resources/accessibility-helper.js"></script>
+<script src="../resources/js-test.js"></script>
+</head>
+<body>
+
+<div id="label-element" style="display: contents;">
+  <template shadowrootmode="open">
+    <div>Shadow Label Text</div>
+  </template>
+</div>
+
+<button id="test-button" aria-labelledby="label-element">Button Content</button>
+
+<div id="unrelated-shadow-host">
+  <template shadowrootmode="open">
+    <div>This should NOT appear in button name</div>
+  </template>
+</div>
+
+<script>
+var output = "This test ensures aria-labelledby correctly references display:contents elements with shadow roots.\n\n";
+
+if (window.accessibilityController) {
+    var testButton = accessibilityController.accessibleElementById("test-button");
+    output += expect("testButton.role.toLowerCase().includes('button')", "true");
+    output += expect("platformValueForW3CName(testButton)", "'Shadow Label Text'");
+    output += expect("platformValueForW3CName(testButton).includes('should NOT appear')", "false");
+
+    debug(output);
+}
+</script>
+</body>
+</html>
diff --git a/Source/WebCore/accessibility/AccessibilityNodeObject.cpp b/Source/WebCore/accessibility/AccessibilityNodeObject.cpp
@@ -4279,6 +4279,22 @@ static String accessibleNameForNode(Node& node, Node* labelledbyNode)
     if (!title.isEmpty())
         return title;
 
+    if (element && element->hasDisplayContents()) {
+        // For display:contents elements with shadow roots, the element doesn't have a renderer,
+        // so textUnderElement() won't find any children via the render tree. We need to explicitly
+        // traverse the shadow root content to compute the accessible name.
+        // https://bugs.webkit.org/show_bug.cgi?id=275222
+        if (RefPtr shadowRoot = shadowRootIgnoringUserAgentShadow(node)) {
+            StringBuilder builder;
+            for (RefPtr child = shadowRoot->firstChild(); child; child = child->nextSibling())
+                appendNameToStringBuilder(builder, accessibleNameForNode(*child));
+
+            String shadowText = builder.toString();
+            if (!shadowText.isEmpty())
+                return shadowText;
+        }
+    }
+
     return { };
 }
 
