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
|
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:h="http://www.w3.org/1999/xhtml">
<metadata>
<h:link rel="help" href="https://svgwg.org/svg2-draft/interact.html#Focus"/>
</metadata>
<g id="default-samples">
<!-- non-default focusable renderable element -->
<rect></rect>
<svg></svg>
<!-- for compatibility with SVG Tiny 1.2 focusable attribute, user agents should treat an element with a value of true for that attribute as focusable -->
<rect focusable="true"></rect>
<!-- anchors need a href to be focusable -->
<a></a>
<a href=""></a>
<!-- Remove default focus behaviour with focusable="false" (SVG Tiny 1.2 compatibility) -->
<a href="" focusable="false"></a>
<!-- iframe, and audio/video with controls are default focusable -->
<h:iframe src="resources/blank.htm"></h:iframe>
<h:audio controls="controls"></h:audio>
<h:video controls="controls"></h:video>
<!-- non-default focusable renderable element with valid tabindex -->
<h:canvas tabindex="0"></h:canvas>
<circle tabindex="0"></circle>
<ellipse tabindex="0"></ellipse>
<foreignObject tabindex="0"></foreignObject>
<g tabindex="0"></g>
<image tabindex="0"></image>
<line tabindex="0"></line>
<mesh tabindex="0"></mesh>
<path tabindex="0"></path>
<polygon tabindex="0"></polygon>
<rect tabindex="0"></rect>
<svg tabindex="0"></svg>
<switch tabindex="0"></switch>
<text tabindex="0">
<textPath tabindex="0"></textPath>
<tspan tabindex="0"></tspan>
</text>
<unknown tabindex="0"></unknown>
<use tabindex="0"></use>
<!-- never-rendered element with valid tabindex -->
<clipPath tabindex="0"></clipPath>
<defs tabindex="0"></defs>
<desc tabindex="0"></desc>
<hatch tabindex="0"></hatch>
<linearGradient tabindex="0"></linearGradient>
<marker tabindex="0"></marker>
<mask tabindex="0"></mask>
<meshgradient tabindex="0"></meshgradient>
<metadata tabindex="0"></metadata>
<pattern tabindex="0"></pattern>
<radialGradient tabindex="0"></radialGradient>
<script tabindex="0"></script>
<style tabindex="0"></style>
<title tabindex="0"></title>
<symbol tabindex="0"></symbol>
</g>
<h:script src="/resources/testharness.js"/>
<h:script src="/resources/testharnessreport.js"/>
<script><![CDATA[
var root = document.querySelector("svg");
test(() => {
root.focus();
assert_equals(document.activeElement, root);
}, 'The document root element should be focusable.');
const defaultList = [
['rect', false],
['svg', false],
['rect[focusable=true]', true],
['a', false],
['a[href]', true],
['a[focusable=false]', false],
['iframe', true],
['audio[controls]', true],
['video[controls]', true],
['canvas[tabindex]', true],
['circle[tabindex]', true],
['ellipse[tabindex]', true],
['foreignObject[tabindex]', true],
['g[tabindex]', true],
['image[tabindex]', true],
['line[tabindex]', true],
['mesh[tabindex]', true],
['path[tabindex]', true],
['polygon[tabindex]', true],
['rect[tabindex]', true],
['svg[tabindex]', true],
['switch[tabindex]', true],
['text[tabindex]', true],
['textPath[tabindex]', true],
['tspan[tabindex]', true],
['unknown[tabindex]', true],
['use[tabindex]', true],
['clipPath[tabindex]', false],
['defs[tabindex]', false],
['desc[tabindex]', false],
['hatch[tabindex]', false],
['linearGradient[tabindex]', false],
['marker[tabindex]', false],
['mask[tabindex]', false],
['meshgradient[tabindex]', false],
['metadata[tabindex]', false],
['pattern[tabindex]', false],
['radialGradient[tabindex]', false],
['script[tabindex]', false],
['style[tabindex]', false],
['title[tabindex]', false],
['symbol[tabindex]', false],
];
for (entry of defaultList) {
test(() => {
var element = document.querySelector('#default-samples ' + entry[0]);
element.focus();
if (entry[1])
assert_equals(document.activeElement, element);
else
assert_not_equals(document.activeElement, element);
}, entry[0] + ' should ' + (entry[1] ? '' : 'not ') + 'be focusable.');
}
]]></script>
</svg>
|
