<!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>