You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
591 lines
16 KiB
591 lines
16 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|
"http://www.w3.org/TR/html4/strict.dtd"> |
|
<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> |