LayoutTests/accessibility/custom-elements/modal.html

<!DOCTYPE html>
<html>
<body>
<script src="../../resources/js-test.js"></script>
<script src="../../resources/accessibility-helper.js"></script>
<p role="group" id="background-content">background</p>
<custom-dialog id="custom-dialog" tabindex="0">modal content</custom-dialog>
<script>

customElements.define('custom-dialog', class CustomDialog extends HTMLElement {
    constructor()
    {
        super();
        const internals = this.attachInternals();
        internals.role = 'dialog';
        internals.ariaModal = 'true';
    }
});

// In order for an object to be "modal" (trapping user focus inside), it must have focus within itself, or on the modal.
// Here, we focus the modal. This is intentional as a testcase ensuring we allow focus on the modal element itself to
// trigger modality.
document.getElementById("custom-dialog").focus();
description("This tests that aria fallback roles work correctly.");
if (!window.accessibilityController)
    debug('This test requires accessibilityController');
else {
    jsTestIsAsync = true;
    (async () => {
        await expectAsyncExpression('!accessibilityController.accessibleElementById("background-content") || accessibilityController.accessibleElementById("background-content").isIgnored', 'true');
        document.getElementById('custom-dialog').setAttribute('aria-modal', 'false');
        await new Promise(requestAnimationFrame);
        await expectAsyncExpression('accessibilityController.accessibleElementById("background-content").isIgnored', 'false');
        finishJSTest();
    })();
}

</script>
</body>
</html>