Skip to content

GitLab

T
tangled
Commit f467558f authored by Nektarios Paisios's avatar Nektarios Paisios Committed by Commit Bot
Browse files
Options

Added more layout tests for ARIA 1.1 combo boxes 

R=dmazzoni@chromium.org, aleventhal@chromium.org

Bug: 845651
Change-Id: I797678c5bd39e191e1511d6397d112a8a04ab35c
Reviewed-on: https://chromium-review.googlesource.com/1069807
Commit-Queue: Nektarios Paisios <nektar@chromium.org>
Reviewed-by: default avatarNektarios Paisios <nektar@chromium.org>
Reviewed-by: default avatarAaron Leventhal <aleventhal@chromium.org>
Cr-Commit-Position: refs/heads/master@{#561325}
parent a9fbd88c
Hide whitespace changes
Inline Side-by-side
Showing with 282 additions and 28 deletions
third_party/WebKit/LayoutTests/accessibility/aria-combo-box-with-delay.html 0 → 100644
View file @ f467558f
<!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>
third_party/WebKit/LayoutTests/accessibility/aria-combo-box.html 0 → 100644
View file @ f467558f
<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<input role="combobox"
type="search"
aria-autocomplete="list"
aria-expanded="true"
aria-haspopup="true"
aria-activedescendant="state20"
aria-owns="stateList0">
<ul id="stateList0"
role="listbox">
<li id="state10" role="option">Alabama</li>
<li id="state20" role="option">Alaska</li>
</ul>
<input role="combobox"
type="search"
aria-autocomplete="list"
aria-expanded="true"
aria-haspopup="true"
aria-activedescendant="state21"
aria-controls="stateList1">
<ul id="stateList1"
role="listbox">
<li id="state11" role="option">Alabama</li>
<li id="state21" role="option">Alaska</li>
</ul>
<input role="combobox"
type="search"
aria-autocomplete="list"
aria-expanded="true"
aria-haspopup="true"
aria-activedescendant="state22"
aria-controls="stateList2"
aria-owns="stateList2">
<ul id="stateList2"
role="listbox">
<li id="state12" role="option">Alabama</li>
<li id="state22" role="option">Alaska</li>
</ul>
<script>
test(() => {
for (let i = 0; i < 3; ++i) {
document.querySelectorAll('input')[i].focus();
let state1 = accessibilityController.accessibleElementById('state1' + i);
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' + i);
assert_equals(accessibilityController.focusedElement.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.');
}
}, 'An option with an activedescendant pointing to it is selected.');
test(() => {
for (let i = 0; i < 3; ++i) {
document.querySelectorAll('input')[i].focus();
document.querySelectorAll('input')[i].setAttribute('aria-activedescendant', 'state1' + i);
let state1 = accessibilityController.accessibleElementById('state1' + i);
assert_equals(accessibilityController.focusedElement.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' + i);
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.querySelectorAll('input')[i].setAttribute('aria-activedescendant', 'state2' + i);
}
}, 'Changing the activedescendant should change the item that is selected.');
</script>
third_party/WebKit/LayoutTests/accessibility/aria-combobox-activedescendant.html deleted 100644 → 0
View file @ a9fbd88c
<!DOCTYPE HTML>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<input role="combobox" type="search" aria-expanded="false" aria-haspopup="true"
aria-autocomplete="list" aria-activedescendant="" aria-owns="list">
<ul id="list" role="listbox">
<li id="option1" role="option">Apple</li>
<li id="option2" role="option">Orange</li>
<li id="option3" role="option">Banana</li>
</ul>
<script>
function axElementById(id) {
return accessibilityController.accessibleElementById(id);
}
test(function(t) {
document.querySelector('input').focus();
var combo_box = document.querySelector('input');
combo_box.setAttribute('aria-expanded', 'true');
combo_box.setAttribute('aria-activedescendant', 'option1');
var option1 = axElementById('option1');
assert_equals(option1.isFocusable, true);
}, "An option with an activedescendant aria-owns parent is focusable");
</script>
third_party/WebKit/LayoutTests/accessibility/aria1.1-combo-box-with-delay.html 0 → 100644
View file @ f467558f
<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<div role="main">
<div id="comboBox"
role="combobox"
aria-autocomplete="list"
aria-expanded="true"
aria-haspopup="listbox">
<input id="comboBoxInput"
type="text"
aria-controls="states-list"
aria-activedescendant="state2">
</div>
<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.comboBoxInput = accessibilityController.accessibleElementById('comboBoxInput');
document.querySelector('input').focus();
document.querySelector('ul').style.display = 'block';
});
async_test((t) => {
t.step_timeout(() => {
assert_true(window.comboBoxInput.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.comboBoxInput.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.comboBoxInput.isFocused, 'Combo box should be focused.');
let state1 = accessibilityController.accessibleElementById('state1');
assert_equals(window.comboBoxInput.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>
third_party/WebKit/LayoutTests/accessibility/aria1.1-combo-box.html 0 → 100644
View file @ f467558f
<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<div id="comboBox"
role="combobox"
aria-autocomplete="list"
aria-expanded="true"
aria-haspopup="listbox">
<input id="comboBoxInput"
type="text"
aria-controls="states-list"
aria-activedescendant="state2">
</div>
<ul id="stateList"
role="listbox">
<li id="state1" role="option">Alabama</li>
<li id="state2" role="option">Alaska</li>
</ul>
<script>
setup(() => {
window.comboBoxInput = accessibilityController.accessibleElementById('comboBoxInput');
document.querySelector('input').focus();
});
test(() => {
assert_true(window.comboBoxInput.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.comboBoxInput.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.');
}, 'An option with an activedescendant pointing to it is selected.');
test(() => {
document.querySelector('input').setAttribute('aria-activedescendant', 'state1');
assert_true(window.comboBoxInput.isFocused, 'Combo box should be focused.');
let state1 = accessibilityController.accessibleElementById('state1');
assert_equals(window.comboBoxInput.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');
}, 'Changing the activedescendant should change the item that is selected.');
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment