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
|
<!DOCTYPE HTML>
<title>label element focus forwarding via "for" attribute or nested labelable element</title>
<link rel="author" title="yaycmyk" href="mailto:evan@yaycmyk.com">
<link rel="help" href="https://html.spec.whatwg.org/multipage/forms.html#the-label-element:the-label-element-10">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<form id="test">
<input id="input-a" type="checkbox">
<label id="label-a" for="input-a">a</label>
<label id="label-b">
<input id="input-b" type="checkbox" /> b
</label>
<label id="label-c" tabindex="0">
<input id="input-c" type="checkbox" /> c
</label>
<label id="label-d" tabindex="-1">
<input id="input-d" type="checkbox" /> d
</label>
<label id="label-e" tabindex="">
<input id="input-e" type="checkbox" /> e
</label>
<input id="input-f" type="checkbox">
<label id="label-f" for="input-f" tabindex="0" style="display:none">f</label>
</form>
<script>
"use strict";
async_test(t => {
const label = document.getElementById("label-a");
const input = document.getElementById("input-a");
input.addEventListener("focus", t.step_func_done());
label.addEventListener("focus", t.unreached_func("Label should not receive focus"));
label.focus();
}, "focusing a label with for attribute should forward focus to the associated element");
async_test(t => {
const label = document.getElementById("label-b");
const input = document.getElementById("input-b");
input.addEventListener("focus", t.step_func_done());
label.addEventListener("focus", t.unreached_func("Label should not receive focus"));
label.focus();
}, "focusing a label without for attribute should fowrad focus to the first labelable child");
async_test(t => {
const label = document.getElementById("label-c");
const input = document.getElementById("input-c");
input.addEventListener("focus", t.unreached_func("Input should not receive focus"));
label.addEventListener("focus", t.step_func_done());
label.focus();
}, "focusing a label with tabindex should not forward focus to the labelable element");
async_test(t => {
const label = document.getElementById("label-d");
const input = document.getElementById("input-d");
input.addEventListener("focus", t.unreached_func("Input should not receive focus"));
label.addEventListener("focus", t.step_func_done());
label.focus();
}, "focusing a label with negative tabindex should not forward focus to the labelable element");
async_test(t => {
const label = document.getElementById("label-e");
const input = document.getElementById("input-e");
label.addEventListener("focus", t.unreached_func("Label should not receive focus"));
input.addEventListener("focus", t.step_func_done());
label.focus();
}, "focusing a label with empty tabindex should forward focus to the labelable element");
async_test(t => {
const label = document.getElementById("label-f");
const input = document.getElementById("input-f");
label.addEventListener("focus", t.unreached_func("Label should not receive focus"));
input.addEventListener("focus", t.step_func_done());
label.focus();
}, "focusing a hidden label with tabindex should forward focus to the labelable element");
</script>
|
