radio-button-title-label.html | Explore in Territory

<html>
<head>
<script src="../resources/js-test.js"></script>
</head>
<script>
    if (window.testRunner)
        testRunner.dumpAsText();
</script>
<body>

<p id="description"></p>
<div id="console"></div>

    <input type="radio" name="r1" id="r1" title="TITLE">Test<br>
    <label for="r1">LABEL</label>

    <input type="radio" id="r2" aria-labeledby="label3">Test<br>
    <label for="r2">LABEL2</label>
    <div id="label3">LABEL2a</div>

    <input type="radio" name="r3" id="r3" aria-label="radio3">Test<br>
    <label for="r3">LABEL3</label>

    <script>

        description("This test checks that radio buttons expose title ui elements correctly under a variety of cirmcumstances. In general, the <label> should disappear and act as the title for the radio button.");

        if (window.accessibilityController) {

            // radio button 1
            document.getElementById("r1").focus();

            // 1) Even though a checkbox has a title attribute, the title ui element should still be exposed.
            var focusedElement = accessibilityController.focusedElement;
            var titleUIElement = focusedElement.nameElementAtIndex(0);
            shouldBe("focusedElement.name", "'LABEL'");
            shouldBeTrue("!titleUIElement || titleUIElement.name == ''");

            // 2) aria-labeledby should override the native label semantics and return a title for the radio button, instead of a title ui element.
            document.getElementById("r2").focus();
            focusedElement = accessibilityController.focusedElement;
            titleUIElement = focusedElement.nameElementAtIndex(0);
            shouldBe("focusedElement.name", "'LABEL2a'");
            shouldBe("focusedElement.description", "''");
            shouldBeTrue("!titleUIElement || titleUIElement.name == ''");

            // 3) If a radio button has an aria-label and a <label>, the aria-label should be the title.
            document.getElementById("r3").focus();
            focusedElement = accessibilityController.focusedElement;
            titleUIElement = focusedElement.nameElementAtIndex(0);
            shouldBe("focusedElement.name", "'radio3'");
            shouldBe("focusedElement.description", "''");
            shouldBeTrue("!titleUIElement || titleUIElement.name == ''");

        }
    </script>


</body>
</html>
chromium/third_party/blink/web_tests/accessibility/radio-button-title-label.html
