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
|
<!doctype html>
<title>Keyboard navigation on input type=radio</title>
<meta charset=utf-8>
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
<link rel="author" href="https://mozilla.org" title="Mozilla">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<form dir="ltr">
<input type=radio name=whatever value=1>
<input type=radio name=whatever value=2>
<input type=radio name=whatever value=3>
</form>
<form dir="rtl">
<input type=radio name=whatever value=1>
<input type=radio name=whatever value=2>
<input type=radio name=whatever value=3>
</form>
<script>
const KEYS = {
ArrowLeft: '\uE012',
ArrowUp: '\uE013',
ArrowRight: '\uE014',
ArrowDown: '\uE015',
};
function nextFocusIndex(currentIndex, length, forward) {
if (forward) {
return (currentIndex + 1) % length;
}
return (currentIndex == 0 ? length : currentIndex) - 1;
}
async function testMove(form, keyName, forward) {
let radios = form.querySelectorAll("input[type=radio]");
assert_equals(radios.length, 3, "Sanity check");
let focusIndex = 1;
radios[focusIndex].focus();
// Enough to wrap around, and one more to test the last active element too.
for (let i = 0; i <= radios.length; ++i) {
assert_equals(document.activeElement, radios[focusIndex], `Focused expected radio input (${focusIndex})`);
await test_driver.send_keys(document.activeElement, KEYS[keyName]);
focusIndex = nextFocusIndex(focusIndex, radios.length, forward);
}
}
promise_test(async t => {
for (let form of document.querySelectorAll("form")) {
const rtl = form.dir == "rtl";
await testMove(form, "ArrowDown", /* forward = */ true);
await testMove(form, "ArrowUp", /* forward = */ false);
await testMove(form, "ArrowLeft", /* forward = */ rtl);
await testMove(form, "ArrowRight", /* forward = */ !rtl);
}
});
</script>
|
