1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
<!doctype html>
<title>HTMLSelectListElement Test: keyboard accessibility</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<selectlist id="selectList0">
<button id="selectList0-button0" type=selectlist>button</button>
<option class=one>one</option>
<option class=two>two</option>
<option class=three>three</option>
</selectlist>
<selectlist id="selectList1">
<option id="selectList1-child0">one</option>
</selectlist>
<selectlist id="selectList2" disabled>
<button id="selectList2-button0" type=selectlist>button</button>
<option disabled>one</option>
<option>two</option>
<option>three</option>
</selectlist>
<selectlist id="selectList3">
<button id="selectList3-button0" type=selectlist>button</button>
<option class=one>one</option>
<option disabled>two</option>
<option class=three>three</option>
</selectlist>
<script>
// See https://w3c.github.io/webdriver/#keyboard-actions
const KEY_CODE_MAP = {
'Enter': '\uE007',
'Space': '\uE00D',
'ArrowUp': '\uE013',
'ArrowDown': '\uE015'
};
function clickOn(element) {
const actions = new test_driver.Actions();
return actions.pointerMove(0, 0, {origin: element})
.pointerDown({button: actions.ButtonType.LEFT})
.pointerUp({button: actions.ButtonType.LEFT})
.send();
}
promise_test(async t => {
const selectList = document.querySelector("#selectList0");
const button = document.querySelector("#selectList0-button0");
assert_false(selectList.open, "selectlist should not be initially open");
await test_driver.send_keys(button, KEY_CODE_MAP.Enter);
assert_false(selectList.open, "Enter key shouldn't open selectlist");
await test_driver.send_keys(button, KEY_CODE_MAP.Space);
assert_true(selectList.open, "Space key should open selectlist");
assert_equals(selectList.value, "one");
await test_driver.send_keys(selectList, KEY_CODE_MAP.ArrowDown);
assert_equals(document.activeElement, selectList.querySelector('.two'),
"Down arrow should focus the next option.");
assert_equals(selectList.value, "one", "Down arrow should not commit the newly focused option.");
await test_driver.send_keys(selectList, KEY_CODE_MAP.ArrowDown);
assert_equals(document.activeElement, selectList.querySelector('.three'),
"Down arrow should focus the next option.");
assert_equals(selectList.value, "one", "Down arrow should not commit the newly focused option.");
await test_driver.send_keys(selectList, KEY_CODE_MAP.ArrowDown);
assert_equals(document.activeElement, selectList.querySelector('.three'),
"Down arrow should do nothing if already at the last option.");
assert_equals(selectList.value, "one", "Down arrow should not commit the newly focused option.");
await test_driver.send_keys(selectList, KEY_CODE_MAP.ArrowUp);
assert_equals(document.activeElement, selectList.querySelector('.two'),
"Up arrow should focus the previous option.");
assert_equals(selectList.value, "one", "Up arrow should not commit the newly focused option.");
await test_driver.send_keys(selectList, KEY_CODE_MAP.ArrowUp);
assert_equals(document.activeElement, selectList.querySelector('.one'),
"Up arrow should focus the previous option.");
assert_equals(selectList.value, "one", "Up arrow should not commit the newly focused option.");
await test_driver.send_keys(selectList, KEY_CODE_MAP.ArrowUp);
assert_equals(document.activeElement, selectList.querySelector('.one'),
"Up arrow should do nothing if already at the first option.");
assert_equals(selectList.value, "one", "Up arrow should not commit the newly focused option.");
await test_driver.send_keys(selectList, KEY_CODE_MAP.Enter);
assert_false(selectList.open, "Enter key should close selectlist");
await test_driver.send_keys(button, KEY_CODE_MAP.Space);
assert_true(selectList.open, "Space key should open selectlist");
// This behavior is suspicious (since Space key can open the selectlist),
// but it maches <select>. See https://github.com/openui/open-ui/issues/386
await test_driver.send_keys(selectList, " ");
assert_true(selectList.open, "Space key should *not* close selectlist");
await test_driver.send_keys(selectList, KEY_CODE_MAP.Enter);
assert_false(selectList.open, "Enter key should close selectlist");
}, "Validate Enter, Up/Down Arrow, and Space keyboard accessibility support for <selectlist>");
promise_test(async t => {
const selectListOption = document.getElementById("selectList1-child0");
const event = document.createEvent("Event");
event.initEvent("keydown");
selectListOption.dispatchEvent(event);
}, "Firing a synthetic event at a selectlist's option doesn't crash");
promise_test(async t => {
const selectList2 = document.querySelector("#selectList2");
const selectList2Button = document.querySelector("#selectList2-button0");
assert_false(selectList2.open, "selectlist should not be initially open");
await test_driver.send_keys(selectList2Button, KEY_CODE_MAP.Enter);
assert_false(selectList2.open, "Enter key should not open a disabled selectlist");
await clickOn(selectList2);
assert_false(selectList2.open, "Click should not open a disabled selectlist");
assert_equals(selectList2.value, "one");
const selectList3 = document.querySelector("#selectList3");
const selectList3Button = document.querySelector("#selectList3-button0");
assert_false(selectList3.open, "selectlist should not be initially open");
await test_driver.send_keys(selectList3Button, KEY_CODE_MAP.Enter);
assert_false(selectList3.open, "Enter key shouldn't open selectlist");
await test_driver.send_keys(selectList3Button, KEY_CODE_MAP.Space);
assert_true(selectList3.open, "Space key should open selectlist");
assert_equals(selectList3.value, "one");
await test_driver.send_keys(selectList3, KEY_CODE_MAP.ArrowDown);
assert_equals(document.activeElement, selectList3.querySelector('.three'),
"Down arrow should go to next non-disabled option");
await test_driver.send_keys(selectList3, KEY_CODE_MAP.ArrowUp);
assert_equals(document.activeElement, selectList3.querySelector('.one'),
"Up arrow should go to the previous non-disabled option");
}, "Validate Enter, Up/Down Arrow keyboard accessibility support for disabled <selectlist>");
</script>
|
