| <!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> |
| |
| <div id="content"> |
| <p id="p-before-modal">Page content before modal</p> |
| |
| <div id="modal" aria-modal="true" role="dialog" style="display: none"> |
| <p id="p-inside-modal">Page content inside modal</p> |
| <button id="close-button">Close modal button</button> |
| </div> |
| <div id="new-modal-container"></div> |
| |
| <p id="p-after-modal">Page content after modal</p> |
| </div> |
| |
| <script> |
| var testOutput = "This test ensures that we update the page-wide active modal when an aria-modal element is dynamically added and removed.\n\n"; |
| |
| function backgroundIsAccessible() { |
| return accessibilityController.accessibleElementById("p-before-modal") && |
| accessibilityController.accessibleElementById("p-after-modal"); |
| } |
| function modalContentIsAccessible() { |
| return accessibilityController.accessibleElementById("p-inside-modal") && |
| accessibilityController.accessibleElementById("close-button"); |
| } |
| |
| if (window.accessibilityController) { |
| window.jsTestIsAsync = true; |
| |
| if (backgroundIsAccessible() && !modalContentIsAccessible()) |
| testOutput += "PASS: Modal content is not initially accessible.\n"; |
| else |
| testOutput += "FAIL: Model content is initially accessible.\n"; |
| |
| testOutput += `\nUn-hiding aria-modal element.\n`; |
| // Move the modal in the DOM. This is the key thing being tested -- do we properly preserve modal behavior |
| // for a modal that has been moved? |
| document.getElementById("new-modal-container").appendChild(document.getElementById("modal")) |
| document.getElementById("modal").removeAttribute("style"); |
| setTimeout(async function() { |
| await waitFor(() => { return !backgroundIsAccessible() && modalContentIsAccessible() }); |
| testOutput += "PASS: Background is inaccessible, modal content is accessible.\n"; |
| |
| testOutput += `\nRe-hiding aria-modal element.\n`; |
| document.getElementById("modal").style.display = "none"; |
| await waitFor(() => { return backgroundIsAccessible() }); |
| testOutput += "PASS: Background is accessible, modal content is inaccessible.\n"; |
| |
| document.getElementById("content").style.visibility = "hidden"; |
| debug(testOutput); |
| finishJSTest(); |
| }, 0); |
| } |
| </script> |
| </body> |
| </html> |
| |
