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
591 lines (474 loc) • 16.5 kB
HTML
<html>
<head>
<title>robot TabContainer A11Y Test</title>
<style>
@import "../../../../util/doh/robot/robot.css";
</style>
<!-- required: dojo.js -->
<script type="text/javascript" src="../../../../dojo/dojo.js"
data-dojo-config="isDebug: true"></script>
<script type="text/javascript">
require([
"doh/runner", "dojo/robotx",
"dojo/dom", "dojo/keys", "dojo/query", "dojo/sniff", "dojo/window",
"dijit/tests/helpers"
], function(doh, robot, dom, keys, query, has, winUtils, helpers){
robot.initRobot('../test_TabContainer.html');
var registry;
doh.register("setup", [
function setup(){
// get pointers to singletons loaded on test page
registry = robot.window.require("dijit/registry");
}
]);
doh.register("aria", [
{
name: "tab container attributes",
timeout: 10000,
runTest: function(t){
var d = new doh.Deferred();
var tc = registry.byId("mainTabContainer");
doh.is("tabpanel", tc.containerNode.children[0].getAttribute("role"), "containerNode child role");
doh.is("mainTabContainer_tablist_tab1", tc.containerNode.children[0].getAttribute("aria-labelledby"), "containerNode.child (the tabpanel) labelledby");
var tablist = tc.tablist;
// The tablist that stretches across the top
doh.is("tablist", tablist.containerNode.getAttribute("role"), "tablist role");
doh.is("tab", tablist.getChildren()[0].focusNode.getAttribute("role"), "tablist child's role should be tab");
// Now the drop down button
doh.is("button", tablist._menuBtn.domNode.getAttribute("role"), "_menuBtn role");
doh.f(tablist._menuBtn.domNode.getAttribute("aria-expanded"), "aria-expanded should initially be absent");
doh.f(tablist._menuBtn.domNode.getAttribute("aria-owns"), "aria-owns should initially be absent");
// Now open the drop down to verify changes in aria-expanded, aria-owns, and aria-labelledby
tablist._menuBtn.focus();
robot.keyPress(keys.ENTER, 500, {});
robot.sequence(d.getTestCallback(function(){
doh.t(tablist._menuBtn.domNode.getAttribute("aria-expanded"), "aria-expanded with open dropdown");
doh.is("mainTabContainer_menu", tablist._menuBtn.domNode.getAttribute("aria-owns"), "menuBtn should own the menu dropdown");
var menu = registry.byId("mainTabContainer_menu");
doh.is("menu", menu.domNode.getAttribute("role"), "the dropdown role");
doh.is("mainTabContainer_tablist_menuBtn", menu.domNode.getAttribute("aria-labelledby"), "aria-labelledby on menu dropdown");
}), 500);
return d;
}
}
]);
doh.register("basic navigation", [
{
name: "focus on button before TabContainer",
timeout: 10000,
runTest: function(t){
var d = new doh.Deferred();
// Note: for this to work, focus needs to start somewhere else; otherwise there will be no
// focus event.
helpers.onFocus(d.getTestCallback(function(node){
}));
query("button")[0].focus();
return d;
}
},
{
name: "tab into main TabContainer",
timeout: 10000,
runTest: function(t){
var d = new doh.Deferred();
helpers.onFocus(d.getTestCallback(function(node){
doh.is("mainTabContainer_tablist_tab2", node.id, "focus");
}));
robot.keyPress(keys.TAB, 500, {});
return d;
}
},
{
name: "move to tab 3 with RIGHT arrow",
timeout: 10000,
runTest: function(t){
var d = new doh.Deferred();
helpers.onFocus(d.getTestCallback(function(node){
var tc = registry.byId("mainTabContainer");
doh.is('mainTabContainer_tablist_tab3', node.id, "currently chosen tab");
doh.is("tab3", tc.selectedChildWidget.id, "currently displayed pane");
}));
robot.keyPress(keys.RIGHT_ARROW, 500, {});
return d;
}
},
{
name: "move to tab 2 with LEFT arrow",
timeout: 10000,
runTest: function(t){
var d = new doh.Deferred();
var tc = registry.byId("mainTabContainer");
helpers.onFocus(d.getTestCallback(function(node){
doh.is('mainTabContainer_tablist_tab2', node.id, "currently chosen tab");
doh.is("tab2", tc.selectedChildWidget.id, "currently chosen pane");
}));
robot.keyPress(keys.LEFT_ARROW, 500, {});
return d;
}
},
{
name: "move to tab 3 again with RIGHT arrow",
timeout: 10000,
runTest: function(t){
var d = new doh.Deferred();
helpers.onFocus(d.getTestCallback(function(node){
}));
robot.keyPress(keys.RIGHT_ARROW, 500, {});
return d;
}
},
{
name: "move to inlined subcontainer tab with RIGHT arrow",
timeout: 10000,
runTest: function(t){
var d = new doh.Deferred();
helpers.onFocus(d.getTestCallback(function(node){
}));
robot.keyPress(keys.RIGHT_ARROW, 500, {});
return d;
}
},
{
name: "TAB focus to nested tab",
timeout: 10000,
runTest: function(t){
var d = new doh.Deferred();
helpers.onFocus(d.getTestCallback(function(node){
doh.is('inlined_tablist_tab2href', node.id);
}));
robot.keyPress(keys.TAB, 750);
return d;
}
},
{
name: "move to second nested tab button",
timeout: 10000,
runTest: function(t){
var d = new doh.Deferred();
helpers.onFocus(d.getTestCallback(function(node){
}));
robot.keyPress(keys.RIGHT_ARROW, 500, {});
return d;
}
},
{
name: "shift-TAB to parent tabs from nested tabs",
timeout: 10000,
runTest: function(t){
var d = new doh.Deferred();
helpers.onFocus(d.getTestCallback(function(node){
}));
robot.keyPress(keys.TAB, 750, {shift:true});
return d;
}
},
{
name: "left arrow to tab 3",
timeout: 10000,
runTest: function(t){
var d = new doh.Deferred();
helpers.onFocus(d.getTestCallback(function(node){
doh.is('mainTabContainer_tablist_tab3', node.id);
}));
robot.keyPress(keys.LEFT_ARROW, 500, {});
return d;
}
},
{
name: "right arrow to inline subtabcontainer",
timeout: 10000,
runTest: function(t){
var d = new doh.Deferred();
helpers.onFocus(d.getTestCallback(function(node){
}));
robot.keyPress(keys.RIGHT_ARROW, 500, {});
return d;
}
},
{
name: "verify nested tablist keeps it's state",
timeout: 10000,
runTest: function(t){
var d = new doh.Deferred();
//verify that the third nested tab is still selected
helpers.onFocus(d.getTestCallback(function(node){
doh.is('inlined_tablist_subtab3', node.id);
}));
robot.keyPress(keys.TAB, 750, {}); // give IE8 time to complete slide animation
return d;
}
}
]);
doh.register("HOME/END keys", [
{
name: "focus tab 3",
timeout: 10000,
runTest: function(t){
var d = new doh.Deferred();
registry.byId("mainTabContainer").selectChild(registry.byId("tab3"), false);
setTimeout(d.getTestErrback(function(){
// on IE the focus event lands after control releases (after the NEXT test has set its focus handler) so do 0 timeout to let focus happen
dom.byId("mainTabContainer_tablist_tab3href").focus();
setTimeout(d.getTestCallback(function(){}),0);
}), 500);
return d;
}
},
{
name: "home key",
timeout: 10000,
runTest: function(t){
var d = new doh.Deferred();
helpers.onFocus(d.getTestCallback(function(node){
doh.is('mainTabContainer_tablist_tab1', node.id);
}));
robot.keyPress(keys.HOME, 500, {});
return d;
}
},
{
name: "end key",
timeout: 10000,
runTest: function(t){
var d = new doh.Deferred();
helpers.onFocus(d.getTestCallback(function(node){
doh.is('mainTabContainer_tablist_embedded', node.id);
}));
robot.keyPress(keys.END, 500, {});
return d;
}
},
{
name: "verify left/right arrows still work",
timeout: 10000,
runTest: function(t){
var d = new doh.Deferred();
helpers.onFocus(d.getTestCallback(function(node){
doh.is('mainTabContainer_tablist_tab4href', node.id);
}));
robot.keyPress(keys.LEFT_ARROW, 500, {});
return d;
}
}
]);
doh.register("disabled tabs",[
{
name: "setup",
runTest: function(){
// disable first, last, and middle tab
registry.byId("tab1").set("disabled", true);
registry.byId("tab3").set("disabled", true);
registry.byId("embedded").set("disabled", true);
// set second tab as selected
registry.byId("mainTabContainer").selectChild(registry.byId("tab2"));
}
},
{
name: "focus on button before TabContainer",
timeout: 10000,
runTest: function(t){
var d = new doh.Deferred();
helpers.onFocus(d.getTestCallback(function(node){
}));
query("button")[0].focus();
return d;
}
},
{
name: "tab into main TabContainer",
timeout: 10000,
runTest: function(t){
var d = new doh.Deferred();
helpers.onFocus(d.getTestCallback(function(node){
doh.is("mainTabContainer_tablist_tab2", node.id, "focus");
}));
robot.keyPress(keys.TAB, 500, {});
return d;
}
},
{
name: "skip over tab 3 with RIGHT arrow",
timeout: 10000,
runTest: function(t){
var d = new doh.Deferred();
helpers.onFocus(d.getTestCallback(function(node){
var tc = registry.byId("mainTabContainer");
doh.is('mainTabContainer_tablist_inlined', node.id, "currently chosen tab");
doh.is("inlined", tc.selectedChildWidget.id, "currently displayed pane");
}));
robot.keyPress(keys.RIGHT_ARROW, 500, {});
return d;
}
},
{
name: "skip over tab 3 with LEFT arrow",
timeout: 10000,
runTest: function(t){
var d = new doh.Deferred();
var tc = registry.byId("mainTabContainer");
helpers.onFocus(d.getTestCallback(function(node){
doh.is('mainTabContainer_tablist_tab2', node.id, "currently chosen tab");
doh.is("tab2", tc.selectedChildWidget.id, "currently chosen pane");
}));
robot.keyPress(keys.LEFT_ARROW, 500, {});
return d;
}
},
{
name: "end key should skip disabled tab",
timeout: 10000,
runTest: function(t){
var d = new doh.Deferred();
helpers.onFocus(d.getTestCallback(function(node){
doh.is('mainTabContainer_tablist_tab4href', node.id);
}));
robot.keyPress(keys.END, 500, {});
return d;
}
},
{
name: "home key should skip disabled tab",
timeout: 10000,
runTest: function(t){
var d = new doh.Deferred();
helpers.onFocus(d.getTestCallback(function(node){
doh.is('mainTabContainer_tablist_tab2', node.id);
}));
robot.keyPress(keys.HOME, 500, {});
return d;
}
},
{
name: "teardown",
runTest: function(){
// disable first, last, and middle tab
registry.byId("tab1").set("disabled", false);
registry.byId("tab3").set("disabled", false);
registry.byId("embedded").set("disabled", false);
}
}
]);
doh.register("closing tabs", [
{
name: "close tab with DELETE button",
timeout: 10000,
runTest: function(t){
var d = new doh.Deferred();
var tc = registry.byId("mainTabContainer");
// Select "SplitContainer from href tab"
tc.selectChild("tab4href");
// Go to "Embedded layout widgets" tab, and close it.
// This puts focus back on "SplitContainer from href".
robot.keyPress(keys.RIGHT_ARROW, 500, {});
robot.keyPress(keys.DELETE, 750, {});
robot.sequence(d.getTestCallback(function(){
doh.is(6, tc.getChildren().length, "six tabs left");
doh.is("tab4href", tc.selectedChildWidget.id, "selection moved to previous tab");
}), 500);
return d;
}
},
{
name: "close tab with CTRL-W button",
timeout: 10000,
runTest: function(t){
var d = new doh.Deferred();
robot.sequence(function(){
dom.byId("mainTabContainer_tablist_tab1").focus();
}, 500);
// Go to "Tab 3", and close it.
// This puts the focus back on "Tab 2".
robot.keyPress(keys.LEFT_ARROW, 500, {});
robot.keyPress(keys.LEFT_ARROW, 750, {});
robot.keyPress(keys.LEFT_ARROW, 750, {});
if(has("chrome")){
// on chrome ctrl+w isn't trapped, and closes the whole browser!
robot.keyPress(keys.DELETE, 750, {});
}else{
robot.keyPress("w", 750, {ctrl:true});
}
var tc = registry.byId("mainTabContainer");
robot.sequence(d.getTestCallback(function(){
doh.is(5, tc.getChildren().length);
doh.is("tab2", tc.selectedChildWidget.id, "selection moved to previous tab");
}), 500);
return d;
}
}
]);
// Run test about opening context menu via keyboard, except on:
// - safari/mac where it doesn't work unless VoiceOver is turned on (#9927)
// - webkit/win, where in suite mode (runTests.html), F10 triggers context menu
// in both the iframe and the outer window
if(!has("webkit")){
doh.register("closing tabs via context menu", {
name: "close tab through context menu",
timeout: 10000,
runTest: function(t){
var d = new doh.Deferred();
var tc = registry.byId("ttabs");
winUtils.scrollIntoView(tc.domNode);
doh.is(4, tc.getChildren().length, "num tabs before trying to close one");
dom.byId("ttabs_tablist_ttab1").focus();
// Open context menu via keyboard
if(has("mac")){
robot.keyPress(keys.SPACE, 500, {
ctrl: true
});
}else{
robot.keyPress(keys.F10, 500, {
shift: true
});
}
// Close tab
robot.keyPress(keys.ENTER, 500, {});
robot.sequence(d.getTestCallback(function(){
doh.is(3, tc.getChildren().length, "remaining tabs");
doh.is("ttab2", tc.selectedChildWidget.id,
"selection moved to next tab (since first tab was deleted)");
}), 500);
return d;
}
});
}
doh.register("up/down arrows", [
{
name: "move to tab with DOWN button",
timeout: 10000,
runTest: function(t){
var d = new doh.Deferred();
var tc = registry.byId("ltabs");
winUtils.scrollIntoView(tc.domNode);
dom.byId("ltabs_tablist_HanselGretel1").focus();
setTimeout(d.getTestErrback(function(){
helpers.onFocus(d.getTestCallback(function(node){
doh.is('ltabs_tablist_GreenTwigs1', node.id, "currently chosen tab");
doh.is("GreenTwigs1", tc.selectedChildWidget.id, "currently displayed pane");
}));
robot.keyPress(keys.DOWN_ARROW, 500, {});
}), 0);
return d;
}
},
{
name: "move to tab with UP button",
timeout: 10000,
runTest: function(t){
var d = new doh.Deferred();
var tc = registry.byId("ltabs");
helpers.onFocus(d.getTestCallback(function(node){
doh.is('ltabs_tablist_HanselGretel1', node.id, "currently chosen tab");
doh.is("HanselGretel1", tc.selectedChildWidget.id, "currently chosen pane");
}));
robot.keyPress(keys.UP_ARROW, 500, {});
return d;
}
}
]);
doh.run();
});
</script>
</head>
</html>