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
|
<!DOCTYPE html>
<meta charset=utf-8>
<title>Label event handling when a descendant noninteractive and unlabelable content is clicked</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<body>
<label id=label></label>
<template id=noninteractive-unlabelable-content>
<div></div>
<svg></svg>
<!-- These are "almost interactive": they could become interactive with the
addition/removal of a non-tabindex attribute. -->
<a></a>
<audio></audio>
<img>
<input type=hidden>
<object></object>
<video></video>
<!-- These are considered interactive content for the purpose of <label> in a
previous version of the HTML Standard, but no longer. -->
<a tabindex=""></a>
<audio tabindex=""></audio>
<div tabindex=""></div>
<img tabindex="">
<input type=hidden tabindex="">
<object tabindex=""></object>
<video tabindex=""></video>
</template>
<script>
"use strict";
const template = document.getElementById("noninteractive-unlabelable-content");
{
const details = document.createElementNS("http://www.w3.org/2000/svg", "details");
template.content.appendChild(details);
}
const elements = Array.from(template.content.children);
const label = document.getElementById("label");
for (const srcElement of elements) {
test(t => {
t.add_cleanup(() => {
label.innerHTML = "";
});
const element = srcElement.cloneNode();
label.appendChild(element);
let clicked = 0;
element.addEventListener("click", () => {
clicked++;
});
element.dispatchEvent(new MouseEvent("click", { bubbles: true }));
assert_equals(clicked, 1, "clicking interactive content");
clicked = 0;
const span = document.createElement("span");
element.appendChild(span);
span.click();
assert_equals(clicked, 1, "clicking descendant of interactive content");
}, `noninteractive unlabelable content ${srcElement.outerHTML} as first child of <label>`);
test(t => {
t.add_cleanup(() => {
label.innerHTML = "";
});
const element = srcElement.cloneNode();
const div = document.createElement("div");
div.appendChild(element);
label.appendChild(div);
let clicked = 0;
element.addEventListener("click", () => {
clicked++;
});
element.dispatchEvent(new MouseEvent("click", { bubbles: true }));
assert_equals(clicked, 1, "clicking nested interactive content");
clicked = 0;
const span = document.createElement("span");
element.appendChild(span);
span.click();
assert_equals(clicked, 1, "clicking descendant of nested interactive content");
}, `noninteractive unlabelable content ${srcElement.outerHTML} deeply nested under <label>`);
test(t => {
t.add_cleanup(() => {
label.innerHTML = "";
});
const button = document.createElement("button");
label.appendChild(button);
const element = srcElement.cloneNode();
label.appendChild(element);
let buttonClicked = 0;
button.addEventListener("click", () => {
buttonClicked++;
});
let clicked = 0;
element.addEventListener("click", () => {
clicked++;
});
element.dispatchEvent(new MouseEvent("click", { bubbles: true }));
assert_equals(clicked, 1, "clicking noninteractive unlabelable content");
assert_equals(buttonClicked, 1, "clicking noninteractive unlabelable content should click button");
buttonClicked = 0;
clicked = 0;
const span = document.createElement("span");
element.appendChild(span);
span.click();
assert_equals(clicked, 1, "clicking descendant of nested noninteractive unlabelable content");
assert_equals(
buttonClicked, 1,
"clicking descendant of nested noninteractive unlabelable content should click button"
);
}, `noninteractive unlabelable content ${srcElement.outerHTML} as second child under <label>`);
}
</script>
</body>
|
