blob: fcefebdb2eae1399c4bad6eac1ef5f81316b5466 [file] [log] [blame]
<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<div role="main">
<input id="comboBox"
role="combobox"
type="search"
aria-autocomplete="list"
aria-expanded="true"
aria-haspopup="true"
aria-activedescendant="state2"
aria-owns="stateList">
<ul id="stateList"
role="listbox"
style="display: none;">
<li id="state1" role="option">Alabama</li>
<li id="state2" role="option">Alaska</li>
</ul>
</div>
<script>
setup(() => {
window.comboBox = accessibilityController.accessibleElementById('comboBox');
document.querySelector('input').focus();
document.querySelector('ul').style.display = 'block';
});
async_test((t) => {
t.step_timeout(() => {
assert_true(window.comboBox.isFocused, 'Combo box should be focused.');
let state1 = accessibilityController.accessibleElementById('state1');
assert_false(state1.isSelected, 'State1 should not be selected.');
assert_true(state1.isFocusable, 'State1 should be focusable.');
assert_false(state1.isFocused, 'State1 should not be focused.');
let state2 = accessibilityController.accessibleElementById('state2');
assert_equals(window.comboBox.activeDescendant, state2, 'State2 should be the active descendant.');
assert_true(state2.isSelected, 'State2 should be selected.');
assert_true(state2.isFocusable, 'State2 should be focusable.');
assert_false(state2.isFocused, 'State2 should not be focused.');
t.done();
}, 0);
}, 'An option with an activedescendant pointing to it is selected.');
async_test((t) => {
t.step_timeout(() => {
document.querySelector('input').setAttribute('aria-activedescendant', 'state1');
assert_true(window.comboBox.isFocused, 'Combo box should be focused.');
let state1 = accessibilityController.accessibleElementById('state1');
assert_equals(window.comboBox.activeDescendant, state1, 'State1 should be the active descendant.');
assert_true(state1.isSelected, 'State1 should be selected.');
assert_true(state1.isFocusable, 'State1 should be focusable.');
assert_false(state1.isFocused, 'State1 should not be focused.');
let state2 = accessibilityController.accessibleElementById('state2');
assert_false(state2.isSelected, 'State2 should not be selected.');
assert_true(state2.isFocusable, 'State2 should be focusable.');
assert_false(state2.isFocused, 'State2 should not be focused.');
document.querySelector('input').setAttribute('aria-activedescendant', 'state2');
t.done();
}, 0);
}, 'Changing the activedescendant should change the item that is selected.');
</script>