AX: VoiceOver highlight does not move to Shadow DOM button when using…

… aria-modal and role https://bugs.webkit.org/show_bug.cgi?id=247134 rdar://problem/101637934 Reviewed by Andres Gonzalez. AccessibilityObject::isModalDescendant eroneuously returned false for shadow hosts inside the modal because the template code is outside the modal. This patch fixes that by using Node::isDescendantOrShadowDescendantOf to properly consider shadow DOM elements. * LayoutTests/accessibility/shadow-dom-element-in-aria-modal-expected.txt: Added. * LayoutTests/accessibility/shadow-dom-element-in-aria-modal.html: Added. * Source/WebCore/accessibility/AccessibilityObject.cpp: (WebCore::AccessibilityObject::isModalDescendant const): Canonical link: https://commits.webkit.org/256531@main
WebKit · Nov 10, 2022 · cbf7509 · cbf7509
1 parent 1abd935
commit cbf7509
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 1 deletion.
diff --git a/LayoutTests/accessibility/shadow-dom-element-in-aria-modal-expected.txt b/LayoutTests/accessibility/shadow-dom-element-in-aria-modal-expected.txt
@@ -0,0 +1,11 @@
+This test ensures shadow DOM descendants of something that is aria-modal are accessible.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS button.isIgnored is false
+PASS successfullyParsed is true
+
+TEST COMPLETE
+Button One
+Button Two Before Button Button Three After Button
diff --git a/LayoutTests/accessibility/shadow-dom-element-in-aria-modal.html b/LayoutTests/accessibility/shadow-dom-element-in-aria-modal.html
@@ -0,0 +1,38 @@
+<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
+<html>
+<head>
+<script src="../resources/accessibility-helper.js"></script>
+<script src="../resources/js-test.js"></script>
+</head>
+<body>
+
+<button>Button One</button>
+<div aria-modal="true" role="dialog">
+    <button>Button Two</button>
+    Before Button
+    <my-button>Button Three</my-button>
+    After Button
+</div>
+
+<script>
+    class MyButton extends HTMLElement {
+        constructor() {
+            super();
+
+            const root = this.attachShadow({ mode: 'open' });
+            root.innerHTML = '<button id="my-button"><slot></slot></button>';
+        }
+    }    
+    customElements.define('my-button', MyButton);
+
+    description("This test ensures shadow DOM descendants of something that is aria-modal are accessible.");
+
+    if (window.accessibilityController) {
+        var button = accessibilityController.accessibleElementById("my-button");
+        shouldBeFalse("button.isIgnored");
+    }
+</script>
+</body>
+</html>
+
+
diff --git a/Source/WebCore/accessibility/AccessibilityObject.cpp b/Source/WebCore/accessibility/AccessibilityObject.cpp
@@ -2189,7 +2189,7 @@ bool AccessibilityObject::isModalDescendant(Node* modalNode) const
 
     // ARIA 1.1 aria-modal, indicates whether an element is modal when displayed.
     // For the decendants of the modal object, they should also be considered as aria-modal=true.
-    return node->isDescendantOf(*modalNode);
+    return node->isDescendantOrShadowDescendantOf(*modalNode);
 }
 
 bool AccessibilityObject::isModalNode() const