| <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> |
| <html> |
| <head> |
| <script src="../resources/js-test.js"></script> |
| <script src="../resources/accessibility-helper.js"></script> |
| </head> |
| <body> |
| |
| <div id="clock" role="timer" aria-live="polite" aria-atomic="true" aria-relevant="additions text">2:30pm</div> |
| <div id="clock-display-contents" style="display: contents" role="timer" aria-live="polite" aria-atomic="true" aria-relevant="additions text">4:30pm</div> |
| |
| <script> |
| var testOutput = "This test ensures that an element's busy state updates aria-busy changes.\n\n"; |
| |
| var axClock, axClockWithDisplayContents; |
| function verifyIsBusy() { |
| testOutput += `#clock is busy: ${axClock.isBusy}\n`; |
| testOutput += `#clock-display-contents is busy: ${axClockWithDisplayContents.isBusy}\n\n`; |
| } |
| function verifyIsAtomic() { |
| testOutput += `#clock is atomic: ${axClock.isAtomicLiveRegion}\n`; |
| testOutput += `#clock-display-contents is atomic: ${axClockWithDisplayContents.isAtomicLiveRegion}\n\n`; |
| } |
| function verifyLiveRegionRelevant() { |
| testOutput += `#clock relevant: ${axClock.liveRegionRelevant}\n`; |
| testOutput += `#clock-display-contents relevant: ${axClockWithDisplayContents.liveRegionRelevant}\n\n`; |
| } |
| function verifyLiveRegionStatus() { |
| testOutput += `#clock live region status: ${axClock.liveRegionStatus}\n`; |
| testOutput += `#clock-display-contents live region status: ${axClockWithDisplayContents.liveRegionStatus}\n\n`; |
| } |
| |
| if (window.accessibilityController) { |
| window.jsTestIsAsync = true; |
| axClock = accessibilityController.accessibleElementById("clock"); |
| axClockWithDisplayContents = accessibilityController.accessibleElementById("clock-display-contents"); |
| |
| testOutput += "Verifying initial states:\n\n"; |
| verifyIsAtomic(); |
| verifyIsBusy(); |
| verifyLiveRegionRelevant(); |
| verifyLiveRegionStatus(); |
| |
| const clock = document.getElementById("clock"); |
| const clockWithDisplayContents = document.getElementById("clock-display-contents"); |
| |
| testOutput += "Setting aria-busy to true.\n\n"; |
| clock.ariaBusy = "true"; |
| clockWithDisplayContents.ariaBusy = "true"; |
| setTimeout(async function() { |
| await waitFor(() => axClock.isBusy && axClockWithDisplayContents.isBusy); |
| verifyIsBusy(); |
| |
| testOutput += "Setting aria-busy to false.\n\n"; |
| clock.ariaBusy = "false"; |
| clockWithDisplayContents.ariaBusy = "false"; |
| await waitFor(() => !axClock.isBusy && !axClockWithDisplayContents.isBusy); |
| verifyIsBusy(); |
| |
| testOutput += "Setting aria-atomic to false.\n\n"; |
| clock.ariaAtomic = "false"; |
| clockWithDisplayContents.ariaAtomic = "false"; |
| await waitFor(() => !axClock.isAtomicLiveRegion && !axClockWithDisplayContents.isAtomicLiveRegion); |
| verifyIsAtomic(); |
| |
| testOutput += "Setting aria-relevant to removals.\n\n"; |
| clock.ariaRelevant = "removals"; |
| clockWithDisplayContents.ariaRelevant = "removals"; |
| await waitFor(() => axClock.liveRegionRelevant.includes("removals") && axClockWithDisplayContents.liveRegionRelevant.includes("removals")); |
| verifyLiveRegionRelevant(); |
| |
| testOutput += "Setting aria-live to assertive.\n\n"; |
| clock.ariaLive = "assertive"; |
| clockWithDisplayContents.ariaLive = "assertive"; |
| await waitFor(() => axClock.liveRegionStatus.includes("assertive") && axClockWithDisplayContents.liveRegionStatus.includes("assertive")); |
| verifyLiveRegionStatus(); |
| |
| debug(testOutput); |
| finishJSTest(); |
| }, 0); |
| } |
| </script> |
| </body> |
| </html> |
| |
