LayoutTests/accessibility/mac/expanded-notification.html

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

<button id="button" aria-expanded="false">

<button id="show-popover-btn" popovertarget="mypopover" popovertargetaction="show">Show popover</button>
<button id="hide-popover-btn" popovertarget="mypopover" popovertargetaction="hide">Hide popover</button>
<div id="mypopover" popover>Popover content</div>

<script>
let output = "This tests that expanded notifications will be sent when the appropriate changes occur.\n";

let notificationCount = 0;
function notificationCallback(element, notification) {
    if (notification == "AXExpandedChanged") {
        notificationCount++;

        output += `Received ${notification} for #${element.domIdentifier}\n`;
        output += `element.isExpanded: ${element.isExpanded}\n`;
    }
}

if (window.accessibilityController) {
    window.jsTestIsAsync = true;

    accessibilityController.addNotificationListener(notificationCallback);
    let button = accessibilityController.accessibleElementById("button");
    output += `Initial #button expanded status: ${button.isExpanded}\n`;

    document.getElementById("button").setAttribute("aria-expanded", "true");

    var showPopoverButton = accessibilityController.accessibleElementById("show-popover-btn");
    var hidePopoverButton = accessibilityController.accessibleElementById("hide-popover-btn");
    setTimeout(async () => {
        await waitFor(() => button.isExpanded);

        document.getElementById("button").setAttribute("aria-expanded", "false");
        await waitFor(() => !button.isExpanded);
        await waitFor(() => notificationCount == 2);

        // Now test popover.
        output += expect("showPopoverButton.isExpanded", "false");
        output += expect("hidePopoverButton.isExpanded", "false");

        output += evalAndReturn("document.getElementById('show-popover-btn').click()");
        // We expanded the popover via #show-popover-btn, but #hide-popover-btn (which is also linked to the popover) should be considered expanded now as well.
        output += await expectAsync("hidePopoverButton.isExpanded", "true");
        output += await expectAsync("showPopoverButton.isExpanded", "true");

        output += evalAndReturn("document.getElementById('hide-popover-btn').click()");
        output += await expectAsync("showPopoverButton.isExpanded", "false");
        output += await expectAsync("hidePopoverButton.isExpanded", "false");

        output += evalAndReturn("document.getElementById('show-popover-btn').click()");
        output += await expectAsync("showPopoverButton.isExpanded", "true");
        // Point popovertarget at non-existent ID.
        output += evalAndReturn("document.getElementById('show-popover-btn').setAttribute('popovertarget', 'non-existent')");
        output += await expectAsync("showPopoverButton.isExpanded", "false");
        output += await expectAsync("showPopoverButton.isAttributeSupported('AXExpanded')", "false");

        output += evalAndReturn("document.getElementById('show-popover-btn').setAttribute('popovertarget', 'mypopover')");
        output += await expectAsync("showPopoverButton.isExpanded", "true");
        output += await expectAsync("showPopoverButton.isAttributeSupported('AXExpanded')", "true");

        debug(output);
        accessibilityController.removeNotificationListener();
        finishJSTest();
    }, 0);
}
</script>
</body>
</html>