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