role-change.html | Explore in Territory

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

<div role="grid">
  <div role="presentation" id="row1">
    <div role="gridcell">Cell</div>
    <div role="gridcell">Cell</div>
  </div>
</div>

<table role="presentation" id="table1">
  <caption>Real data table</caption>
  <tr id="tr1">
    <td id="td1">X</td>
  </tr>
</table>

<ul role="presentation" id="list1">
    <li id="listitem1">List item</li>
</ul>

<canvas id="myCanvas" width="300" height="300">
  <input type="radio" id="input">
</canvas>

<!-- TODO(aleventhal) this test breaks when put in a <canvas> -->
<select size="2" id="select1">
  <option id="opt1">option 1</option>
  <option>option 2</option>
</select>
<script>

function axElementById(id) {
    return accessibilityController.accessibleElementById(id);
}

test(function(t) {
    const axPresentation = axElementById('row1');
    // "row1" should not be in the accessibility tree at all.
    assert_equals(undefined, axPresentation);

    // Change role attribute
    document.getElementById('row1').setAttribute('role', 'row');

    const axRow = axElementById('row1');
    assert_equals(axRow.role, 'AXRole: AXRow');
}, "Role presentation changes to role row.");

test(function(t) {
    assert_equals(axElementById('table'), undefined);
    assert_equals(axElementById('tr1').role, "AXRole: AXGenericContainer");
    assert_equals(axElementById('td1').role, "AXRole: AXGenericContainer");

    // Change role="presentation"
    document.getElementById('table1').removeAttribute('role');

    const axTable = axElementById('table1');
    assert_equals(axTable.role, 'AXRole: AXTable');

    const axTableRow = axElementById('tr1');
    assert_equals(axTableRow.role, 'AXRole: AXRow');

    const axTableCell = axElementById('td1');
    assert_equals(axTableCell.role, 'AXRole: AXCell');

    // Change role attribute back to "presentation"
    document.getElementById('table1').setAttribute('role', 'presentation');

    assert_equals(axElementById('table'), undefined);
    assert_equals(axElementById('tr1').role, "AXRole: AXGenericContainer");
    assert_equals(axElementById('td1').role, "AXRole: AXGenericContainer");
}, "Role presentation toggled on table.");

test(function(t) {
    assert_equals(axElementById('list1'), undefined);
    assert_equals(axElementById('listitem1').role, "AXRole: AXNone");

    // Change role="presentation"
    document.getElementById('list1').removeAttribute('role');

    assert_equals(axElementById('list1').role, 'AXRole: AXList');
    assert_equals(axElementById('listitem1').role, 'AXRole: AXListItem');

    // Change role attribute back to "presentation"
    document.getElementById('list1').setAttribute('role', 'presentation');

    assert_equals(axElementById('list1'), undefined);
    assert_equals(axElementById('listitem1').role, "AXRole: AXNone");
}, "Role presentation toggled on list.");

test(function(t) {
    assert_equals(axElementById('opt1').role, "AXRole: AXListBoxOption");
    assert_equals(axElementById('select1').role, "AXRole: AXListBox");

    // Change @size to "1"
    document.getElementById('select1').setAttribute('size', '1');
    assert_equals(axElementById('select1').role, 'AXRole: AXComboBoxSelect');
    assert_equals(axElementById('opt1').role, 'AXRole: AXMenuListOption');

    // Change @size back to "2"
    document.getElementById('select1').setAttribute('size', '2');
    assert_equals(axElementById('opt1').role, 'AXRole: AXListBoxOption');

}, "Select size change.");

test(function(t) {
    const axInput = axElementById('input');
    assert_equals(axInput.role, "AXRole: AXRadioButton");

    // Change @type to "range"
    document.getElementById('input').setAttribute('type', 'range');
    const axSlider = axElementById('input');
    assert_equals(axSlider.role, 'AXRole: AXSlider');
}, "Input type change.");

</script>
chromium/third_party/blink/web_tests/accessibility/role-change.html
