dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
167 lines (131 loc) • 4.7 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>_KeyNavContainer</title>
<script src="boilerplate.js"></script>
<script type="text/javascript">
require([
"doh/runner",
"dojo/_base/declare", "dojo/dom", "dojo/keys", "dojo/on", "dojo/parser",
"dijit/a11y", "dijit/focus", "dijit/registry",
"dijit/_WidgetBase", "dijit/_KeyNavContainer",
"dijit/tests/helpers", "dojo/domReady!"
], function(doh, declare, dom, keys, on, parser, a11y, focus, registry, _WidgetBase, _KeyNavContainer, helpers){
declare("TestContainer", [_WidgetBase, _KeyNavContainer], {
postCreate: function(){
this.inherited(arguments);
this.connectKeyNavHandlers([keys.LEFT_ARROW, keys.UP_ARROW], [keys.RIGHT_ARROW, keys.DOWN_ARROW]);
}
});
declare("TestContained", _WidgetBase, {
// _KeyNavContainer requires children to have focus()
focus: function(){
this.domNode.focus();
}
});
doh.register("parse", function(){
parser.parse();
});
/*
* Most of _KeyNavContainer is tested indirectly via Menu, Toolbar, etc. test suites, but
* starting to build up some basic tests here.
*/
doh.register("basic", [
{
name: "initial",
runTest: function(){
var c = registry.byId("container");
// initially container has tabIndex of 0
doh.is(0, c.domNode.getAttribute("tabIndex"), "container tabIndex=0");
// and all the contents have tabIndex of -1, or no tab index
doh.f(a11y.isTabNavigable("zero"), "child not tab navigable");
}
},
{
name: "tab in",
runTest: function(t){
var d = new doh.Deferred();
var c = registry.byId("container");
// focusing container (simulated tabbing into container) should move focus to first child
c.focus();
setTimeout(d.getTestCallback(function(){
doh.is("zero", focus.curNode.id, "focus moved to first child");
doh.t(a11y.isTabNavigable("zero"), "child is tab navigable");
doh.isNot(0, c.domNode.getAttribute("tabIndex"), "container tabIndex removed or set to -1");
}), 0);
return d;
}
},
{
name: "next",
runTest: function(t){
var d = new doh.Deferred();
var c = registry.byId("container");
on.emit(c.domNode, "keydown", {keyCode: keys.DOWN_ARROW, bubbles: true, cancelable: true});
setTimeout(d.getTestCallback(function(){
doh.is("one", focus.curNode.id, "focus moved to second child");
doh.f(a11y.isTabNavigable("zero"), "zero not tab navigable");
doh.t(a11y.isTabNavigable("one"), "one tab navigable");
}), 0);
return d;
}
},
{
name: "previous",
runTest: function(t){
var d = new doh.Deferred();
var c = registry.byId("container");
on.emit(c.domNode, "keydown", {keyCode: keys.LEFT_ARROW, bubbles: true, cancelable: true});
setTimeout(d.getTestCallback(function(){
doh.is("zero", focus.curNode.id, "focus moved to first child");
doh.f(a11y.isTabNavigable("one"), "one not tab navigable");
doh.t(a11y.isTabNavigable("zero"), "zero tab navigable");
}), 0);
return d;
}
},
{
name: "tab out",
runTest: function(t){
var d = new doh.Deferred();
var c = registry.byId("container");
dom.byId("input").focus();
// tab index on container restored
setTimeout(d.getTestCallback(function(){
doh.f(a11y.isTabNavigable("zero"), "child not tab navigable");
doh.is(0, c.domNode.getAttribute("tabIndex"), "container tabIndex restored");
}), 0);
return d;
}
},
{
name: "mouse in",
runTest: function(t){
var d = new doh.Deferred();
var c = registry.byId("container");
dom.byId("zero").focus();
// focusing first child directly (simulated mouse click) should remove tabIndex on container
setTimeout(d.getTestCallback(function(){
doh.isNot(0, c.domNode.getAttribute("tabIndex"), "container tabIndex removed or set to -1");
doh.t(a11y.isTabNavigable("zero"), "child tab navigable");
}), 0);
return d;
}
}
]);
doh.run();
});
</script>
</head>
<body>
<label for="input">before:</label><input id="input"/>
<div id="container" data-dojo-type="TestContainer">
<!-- comment just to make sure that numbering isn't thrown off -->
<div id="zero" data-dojo-type="TestContained">zero</div>
<div id="one" data-dojo-type="TestContained">one</div>
<div id="two" data-dojo-type="TestContained">two</div>
<div id="three" data-dojo-type="TestContained">three</div>
</div>
</body>
</html>