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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
<html lang="en">
<head>
<title>YUI FocusManager Node Plugin Tests</title>
/* Force the viewport to scroll to test the Focus Manager's ability to
prevent the viewport from scrolling when the user is using the
arrow keys to move focus among a set of descendants in Opera. */
body {
height: 10000px;
}
.focused {
border: solid 1px #ffcc00;
background-color: yellow;
}
</style>
</head>
<body class="yui3-skin-sam">
<h1>YUI Focus Manager Node Plugin Tests</h1>
<h2>Test 1</h2>
<p>
Test the Focus Manager's ability to make a set of non-natively focusable
elements focusable. Using the Focus Manager Node Plugin the user should be
able to move focus among each <code><li></code> and be able to click
each <code><li></code> by pressing the enter key while focused on it.
(Note: This test won't work in Safari 3 as it doesn't support the
<code>tabIndex</code> attribute on all elements.)
</p>
<ul id="list-1">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<h2>Test 2</h2>
<p>
Test the Focus Manager's ability to ensure that <code><a></code>
elements without an <code>href</code> attribute still fire a click event
while the user presses the enter key while focused on them.
</p>
<ul id="list-2">
<li><a>One</a></li>
<li><a>Two</a></li>
<li><a>Three</a></li>
<li><a>Four</a></li>
</ul>
<h2>Test 3</h2>
<p>
Test the Focus Manager's ability to manager a set of natively focusable
descendants.
</p>
<ul id="list-3">
<li><input type="button" name="button-1" value="One"></li>
<li><input type="button" name="button-2" value="Two"></li>
<li><input type="button" name="button-3" value="Three"></li>
<li><input type="button" name="button-4" value="Four"></li>
</ul>
<script type="text/javascript">
YUI({
timeout: 10000,
filters: {
'node-focusmanager': 'debug'
}
}).use("node-focusmanager", "node-event-simulate", "console", "dd-drag", function(Y) {
var myConsole = new Y.Console().render();
var dd = new Y.DD.Drag({ node: myConsole.get("boundingBox") });
var listone = Y.Node.get("#list-1");
descendants: "li",
keys: { next: "down:40", previous: "down:38" },
focusClass: "focused"
});
listone.on("click", function (event) {
Y.log(event.target.get("text"));
});
var listtwo = Y.Node.get("#list-2");
descendants: "a",
keys: { next: "down:40", previous: "down:38" },
focusClass: "focused"
});
listtwo.on("click", function (event) {
Y.log(event.target.get("text"));
});
var listthree = Y.Node.get("#list-3");
descendants: "input",
keys: { next: "down:40", previous: "down:38" },
focusClass: "focused"
});
listthree.on("click", function (event) {
Y.log(event.target.get("value"));
});
});
</script>
</body>
</html>