Skip to content
Browse files
AX: VoiceOver highlight does not move to Shadow DOM button when using…
… aria-modal and role

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:
  • Loading branch information
tommymchugh authored and AndresGonzalezApple committed Nov 10, 2022
1 parent 1abd935 commit cbf7509a12dfb20efcf128f99ea2788f92622526
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 1 deletion.
@@ -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

Button One
Button Two Before Button Button Three After Button
@@ -0,0 +1,38 @@
<script src="../resources/accessibility-helper.js"></script>
<script src="../resources/js-test.js"></script>

<button>Button One</button>
<div aria-modal="true" role="dialog">
<button>Button Two</button>
Before Button
<my-button>Button Three</my-button>
After Button

class MyButton extends HTMLElement {
constructor() {

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");

@@ -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

0 comments on commit cbf7509

Please sign in to comment.