description-calc-inputs.html | Explore in Territory

<!DOCTYPE HTML>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>

<div class="container">
    <input id="text1" type="text" placeholder="Placeholder">
</div>

<script>
test(function(t) {
    var axTextInput1 = accessibilityController.accessibleElementById("text1");
    assert_equals(axTextInput1.name, "Placeholder");
    assert_equals(axTextInput1.nameFrom, "placeholder");
    assert_equals(axTextInput1.description, "");
    assert_equals(axTextInput1.descriptionFrom, "");
}, "Text input uses placeholder as accessible name if that's the only accessible text.");
</script>

<div class="container">
    <input id="text1a" type="text" aria-placeholder="ARIA Placeholder">
</div>

<script>
test(function(t) {
    var axTextInput1a = accessibilityController.accessibleElementById("text1a");
    assert_equals(axTextInput1a.name, "ARIA Placeholder");
    assert_equals(axTextInput1a.nameFrom, "placeholder");
    assert_equals(axTextInput1a.description, "");
    assert_equals(axTextInput1a.descriptionFrom, "");
}, "Text input uses ARIA placeholder as accessible name if that's the only accessible text.");
</script>

<div class="container">
    <input id="text1b" type="text" aria-placeholder="ARIA Placeholder" placeholder="Placeholder">
</div>

<script>
test(function(t) {
    var axTextInput1b = accessibilityController.accessibleElementById("text1b");
    assert_equals(axTextInput1b.name, "Placeholder");
    assert_equals(axTextInput1b.nameFrom, "placeholder");
    assert_equals(axTextInput1b.description, "");
    assert_equals(axTextInput1b.descriptionFrom, "");
}, "Text input uses placeholder in preference to ARIA placeholder for accessible name.");
</script>

<div class="container">
    <input id="text2" type="text" aria-label="Label" placeholder="Placeholder">
</div>

<script>
test(function(t) {
    var axTextInput2 = accessibilityController.accessibleElementById("text2");
    assert_equals(axTextInput2.name, "Label");
    assert_equals(axTextInput2.nameFrom, "attribute");
    assert_equals(axTextInput2.description, "");
    assert_equals(axTextInput2.descriptionFrom, "");
    assert_equals(axTextInput2.placeholder, "Placeholder");
}, "Text input uses placeholder as accessible placeholder (not description) if it wasn't used as the accessible name.");
</script>

<div class="container">
    <input id="text2a" type="text" aria-label="Label" aria-placeholder="ARIA Placeholder">
</div>

<script>
test(function(t) {
    var axTextInput2a = accessibilityController.accessibleElementById("text2a");
    assert_equals(axTextInput2a.name, "Label");
    assert_equals(axTextInput2a.nameFrom, "attribute");
    assert_equals(axTextInput2a.description, "");
    assert_equals(axTextInput2a.descriptionFrom, "");
    assert_equals(axTextInput2a.placeholder, "ARIA Placeholder");
}, "Text input uses aria-placeholder as accessible placeholder if it wasn't used as the accessible name.");
</script>

<div class="container">
    <input id="text2b" type="text" aria-label="Label" aria-placeholder="ARIA Placeholder" placeholder="Placeholder">
</div>

<script>
test(function(t) {
    var axTextInput2b = accessibilityController.accessibleElementById("text2b");
    assert_equals(axTextInput2b.name, "Label");
    assert_equals(axTextInput2b.nameFrom, "attribute");
    assert_equals(axTextInput2b.description, "");
    assert_equals(axTextInput2b.descriptionFrom, "");
    assert_equals(axTextInput2b.placeholder, "Placeholder");
}, "Text input uses placeholder in preference to ARIA placeholder for accessible placeholder.");
</script>

<div class="container">
    <input id="text3" type="text" aria-label="Label" placeholder="Placeholder" aria-describedby="describedby3">
    <div id="describedby3">DescribedBy</div>
</div>

<script>
test(function(t) {
    var axTextInput3 = accessibilityController.accessibleElementById("text3");
    assert_equals(axTextInput3.name, "Label");
    assert_equals(axTextInput3.nameFrom, "attribute");
    assert_equals(axTextInput3.description, "DescribedBy");
    assert_equals(axTextInput3.descriptionFrom, "relatedElement");
    assert_equals(axTextInput3.placeholder, "Placeholder");
}, "aria-describedby is used as the accessible description, placeholder is used as placeholder.");
</script>

<div class="container">
    <input id="text4" type="text" title="Title">
</div>

<script>
test(function(t) {
    var axTextInput4 = accessibilityController.accessibleElementById("text4");
    assert_equals(axTextInput4.name, "Title");
    assert_equals(axTextInput4.nameFrom, "title");
    assert_equals(axTextInput4.description, "");
    assert_equals(axTextInput4.descriptionFrom, "");
}, "Text input uses title as accessible name if that's the only accessible text.");
</script>

<div class="container">
    <input id="text5" type="text" aria-label="Label" title="Title">
</div>

<script>
test(function(t) {
    var axTextInput5 = accessibilityController.accessibleElementById("text5");
    assert_equals(axTextInput5.name, "Label");
    assert_equals(axTextInput5.nameFrom, "attribute");
    assert_equals(axTextInput5.description, "Title");
    assert_equals(axTextInput5.descriptionFrom, "title");
}, "Text input uses title as accessible description if it wasn't used as the accessible name.");
</script>

<div class="container">
    <input id="text6" type="text" aria-label="Label" title="Title" aria-describedby="describedby6">
    <div id="describedby6">DescribedBy</div>
</div>

<script>
test(function(t) {
    var axTextInput6 = accessibilityController.accessibleElementById("text6");
    assert_equals(axTextInput6.name, "Label");
    assert_equals(axTextInput6.nameFrom, "attribute");
    assert_equals(axTextInput6.description, "DescribedBy");
    assert_equals(axTextInput6.descriptionFrom, "relatedElement");
}, "aria-describedby overrides title as the accessible description.");
</script>

<div class="container">
    <input id="text7" type="text" aria-describedby="describedby7">
    <p id="describedby7">
        Described
        <br>
        By
    </p>
</div>

<script>
test(function(t) {
    var axTextInput7 = accessibilityController.accessibleElementById("text7");
    assert_equals(axTextInput7.name, "");
    assert_equals(axTextInput7.nameFrom, "");
    assert_equals(axTextInput7.description, "Described By");
    assert_equals(axTextInput7.descriptionFrom, "relatedElement");
}, "aria-describedby does not include newlines.");
</script>
chromium/third_party/blink/web_tests/accessibility/description-calc-inputs.html
