LayoutTests/accessibility/element-reflection-ariaerrormessage.html

<!DOCTYPE html>
<script src="../resources/js-test.js"></script>
<script src="../resources/accessibility-helper.js"></script>
<div id="error1">First error</div>
<div id="target1">Target 1</div>
<div id="wrapper" tabindex="0">
  <div class="error">Second error</div>
</div>
<div id="target2">Target 2</div>
<div id="error3">Third error</div>
<x-target></x-target>
<div id="error4">Fourth error</div>
<div id="target4">Target 4</div>
<x-custom></x-custom>

<script>
class XTarget extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: "open" });
        let target = document.createElement("div");
        target.id = "innertarget";
        target.textContent = "Target 3";
        target.ariaErrorMessageElements = [error3];
        target.ariaInvalid = true;
        this.shadowRoot.appendChild(target);
    }
}
customElements.define("x-target", XTarget);

class XCustom extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: "open" });
        let error = document.createElement("div");
        error.id = "error5";
        error.textContent = "Fifth error";
        let target = document.createElement("div");
        target.id = "target5";
        target.textContent = "Target 5";
        this.shadowRoot.appendChild(error);
        this.shadowRoot.appendChild(target);
        target.ariaErrorMessageElements = [error];
        target.ariaInvalid = true;
        document.body.appendChild(error);
    }
}
customElements.define("x-custom", XCustom);

var output = "Checks that element reflection is exposed to the a11y tree for 'ariaErrorMessageElements'\n\n";

if (window.accessibilityController) {
    window.jsTestIsAsync = true;
    
    var axError1, axTarget1, wrapper, axError2, axTarget2, axError3, axInnerTarget, axErrorMessage4, axTarget4, axErrorMessage5, axTarget5;
    setTimeout(async function() {
        target1.ariaInvalid = true;
        target1.ariaErrorMessageElements = [error1];
        axError1 = accessibilityController.accessibleElementById("error1");
        axTarget1 = accessibilityController.accessibleElementById("target1");
        await waitFor(() => axTarget1.ariaErrorMessageElementAtIndex(0));
        output += expect("axTarget1.ariaErrorMessageElementAtIndex(0).isEqual(axError1)", "true");

        target2.ariaInvalid = true;
        target2.ariaErrorMessageElements = [document.getElementsByClassName("error")[0]];
        wrapper = accessibilityController.accessibleElementById("wrapper");
        axError2 = wrapper.childAtIndex(0);
        axTarget2 = accessibilityController.accessibleElementById("target2");
        await waitFor(() => axTarget2.ariaErrorMessageElementAtIndex(0));
        output += expect("axTarget2.ariaErrorMessageElementAtIndex(0).isEqual(axError2)", "true");
        target2.setAttribute("aria-errormessage", "error1");
        await waitFor(() => axTarget2.ariaErrorMessageElementAtIndex(0).isEqual(axError1));
        output += expect("axTarget2.ariaErrorMessageElementAtIndex(0).isEqual(axError1)", "true");

        axError3 = accessibilityController.accessibleElementById("error3");
        axInnerTarget = accessibilityController.accessibleElementById("innertarget");
        output += expect("axInnerTarget.ariaErrorMessageElementAtIndex(0).isEqual(axError3)", "true");

        target2.ariaErrorMessageElements = [error1, document.getElementsByClassName("error")[0], error3];
        await waitFor(() => axTarget2.ariaErrorMessageElementAtIndex(2));
        output += expect("axTarget2.ariaErrorMessageElementAtIndex(0).isEqual(axError1)", "true");
        output += expect("axTarget2.ariaErrorMessageElementAtIndex(1).isEqual(axError2)", "true");
        output += expect("axTarget2.ariaErrorMessageElementAtIndex(2).isEqual(axError3)", "true");

        target4.ariaInvalid = true;
        target4.ariaErrorMessageElements = [error4];
        error4.id = "error4-new";
        axErrorMessage4 = await waitForElementById("error4-new");
        axTarget4 = accessibilityController.accessibleElementById("target4");
        await waitFor(() => axTarget4.ariaErrorMessageElementAtIndex(0));
        output += expect("axTarget4.ariaErrorMessageElementAtIndex(0).isEqual(axErrorMessage4)", "true");

        axErrorMessage5 = accessibilityController.accessibleElementById("error5");
        axTarget5 = accessibilityController.accessibleElementById("target5");
        output += expect("axTarget5.ariaErrorMessageElementAtIndex(0).isEqual(axErrorMessage5)", "true");
        debug(output);
        finishJSTest();   
    })
}
</script>