<!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="button" role="button" aria-description="Longer description">button</div>

<div id="button1" role="button" aria-describedby="label1">button</div>
<div id="label1">text</div>

<div id="button2" role="button" aria-describedby="label2" aria-description="Longer description ignored">button</div>
<div id="label2">text</div>

<script>
var output = "This test ensures that aria-description maps to appropriate attributes and works with aria-describedby correctly.\n\n";

if (window.accessibilityController) {
    window.jsTestIsAsync = true;
    const isCocoa = accessibilityController.platformName == "mac" || accessibilityController.platformName == "ios";

    // aria-description case.
    var button = accessibilityController.accessibleElementById("button");
    output += isCocoa ? `Custom content: ${button.customContent}\n` : `Help text: ${button.helpText}\n`;

    // aria-describedby case.
    const button1 = accessibilityController.accessibleElementById("button1");
    output += isCocoa ? `Custom content: ${button1.customContent}\n` : `Help text: ${button1.helpText}\n`;

    // aria-describedby and aria-description case.
    const button2 = accessibilityController.accessibleElementById("button2");
    output += isCocoa ? `Custom content: ${button2.customContent}\n` : `Help text: ${button2.helpText}\n`;

    var newDescription = "Newly added description";
    document.getElementById("button").setAttribute("aria-description", newDescription);
    setTimeout(async function() {
        // GTK / WPE seems to expect aria-description to have no effect.
        if (isCocoa)
            output += await expectAsync("button.customContent.includes(newDescription)", "true");

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