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.
303 lines
11 KiB
303 lines
11 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
|
<title>dijit/a11y unit test</title> |
|
|
|
<script src="boilerplate.js"></script> |
|
|
|
<script type="text/javascript"> |
|
require([ |
|
"doh/runner", "dojo/dom", "dojo/parser", |
|
"dijit/a11y", "dijit/registry", "dojo/domReady!", "dijit/Editor" |
|
], function(doh, dom, parser, a11y, registry){ |
|
|
|
doh.register("dijit/a11y", [ |
|
function parse(){ |
|
parser.parse(); |
|
}, |
|
|
|
function isTabNavigable(t){ |
|
var d = new doh.Deferred(); |
|
doh.t(a11y.isTabNavigable(dom.byId("a-with-href")), "a-with-href"); |
|
doh.f(a11y.isTabNavigable(dom.byId("a-without-href")), "a-without-href"); |
|
doh.t(a11y.isTabNavigable(dom.byId("area")), "area"); |
|
doh.t(a11y.isTabNavigable(dom.byId("button")), "button"); |
|
doh.t(a11y.isTabNavigable(dom.byId("input")), "input"); |
|
doh.t(a11y.isTabNavigable(dom.byId("object")), "object"); |
|
doh.t(a11y.isTabNavigable(dom.byId("select")), "select"); |
|
doh.t(a11y.isTabNavigable(dom.byId("textarea")), "textarea"); |
|
doh.f(a11y.isTabNavigable(dom.byId("empty")), "empty"); |
|
doh.t(a11y.isTabNavigable(dom.byId("zero-tabindex-div")), "zero-tabindex-div"); |
|
doh.f(a11y.isTabNavigable(dom.byId("no-tabindex-div")), "no-tabindex-div"); |
|
doh.f(a11y.isTabNavigable(dom.byId("iframe")), "iframe"); |
|
|
|
registry.byId("editor").onLoadDeferred.then(d.getTestCallback(function(){ |
|
doh.t(a11y.isTabNavigable(dom.byId("editor_iframe")), "editor_iframe"); |
|
})); |
|
|
|
return d; |
|
}, |
|
function findTabNullOnEmpty(t){ |
|
doh.is(null, a11y.getFirstInTabbingOrder("empty")); |
|
doh.is(null, a11y.getLastInTabbingOrder("empty")); |
|
}, |
|
function findTabElements(t){ |
|
doh.is(null, a11y.getFirstInTabbingOrder("div-container")); |
|
doh.is(null, a11y.getFirstInTabbingOrder("a-without-href-container")); |
|
doh.is("a-with-href", a11y.getFirstInTabbingOrder("a-with-href-container").id); |
|
|
|
// in WebKit area elements are not in the tab order |
|
// and their display style property is "none"; |
|
// therefore it is expected that this test will fail |
|
if(!dojo.isWebKit){ |
|
doh.is("area", a11y.getFirstInTabbingOrder("area-map").id); |
|
} |
|
|
|
doh.is("button", a11y.getFirstInTabbingOrder("button-container").id); |
|
doh.is("input", a11y.getFirstInTabbingOrder("input-container").id); |
|
doh.is("object", a11y.getFirstInTabbingOrder("object-container").id); |
|
doh.is("select", a11y.getFirstInTabbingOrder("select-container").id); |
|
doh.is("textarea", a11y.getFirstInTabbingOrder("textarea-container").id); |
|
doh.is(null, a11y.getLastInTabbingOrder("div-container")); |
|
doh.is(null, a11y.getLastInTabbingOrder("a-without-href-container")); |
|
doh.is("a-with-href", a11y.getLastInTabbingOrder("a-with-href-container").id); |
|
|
|
// in WebKit area elements are not in the tab order |
|
// and their display style property is "none"; |
|
// therefore it is expected that this test will fail |
|
if(!dojo.isWebKit){ |
|
doh.is("area", a11y.getLastInTabbingOrder("area-map").id); |
|
} |
|
|
|
doh.is("button", a11y.getLastInTabbingOrder("button-container").id); |
|
doh.is("input", a11y.getLastInTabbingOrder("input-container").id); |
|
doh.is("object", a11y.getLastInTabbingOrder("object-container").id); |
|
doh.is("select", a11y.getLastInTabbingOrder("select-container").id); |
|
doh.is("textarea", a11y.getLastInTabbingOrder("textarea-container").id); |
|
}, |
|
function findTabOnElementRatherThanString(t){ |
|
doh.is("a-with-href", a11y.getFirstInTabbingOrder(dom.byId("a-with-href-container")).id); |
|
doh.is("a-with-href", a11y.getLastInTabbingOrder(dom.byId("a-with-href-container")).id); |
|
}, |
|
function findTabSkipDisabled(t){ |
|
doh.is("not-disabled-input", a11y.getFirstInTabbingOrder("skip-disabled").id); |
|
doh.is("not-disabled-input", a11y.getLastInTabbingOrder("skip-disabled").id); |
|
}, |
|
function findTabZeroTabindex(t){ |
|
doh.is("zero-tabindex-div", a11y.getFirstInTabbingOrder("zero-tabindex-div-container").id); |
|
doh.is("zero-tabindex-input", a11y.getFirstInTabbingOrder("zero-tabindex-input-container").id); |
|
doh.is("zero-tabindex-div", a11y.getLastInTabbingOrder("zero-tabindex-div-container").id); |
|
doh.is("zero-tabindex-input", a11y.getLastInTabbingOrder("zero-tabindex-input-container").id); |
|
}, |
|
function findTabPositiveTabindex(t){ |
|
doh.is("positive-tabindex-input1a", a11y.getFirstInTabbingOrder("positive-tabindex-mixed-with-no-tabindex").id); |
|
doh.is("positive-tabindex-input3a", a11y.getFirstInTabbingOrder("positive-tabindex").id); |
|
doh.is("no-tabindex-input2", a11y.getLastInTabbingOrder("positive-tabindex-mixed-with-no-tabindex").id); |
|
doh.is("positive-tabindex-input4b", a11y.getLastInTabbingOrder("positive-tabindex").id); |
|
}, |
|
function findTabSkipMinusOneTabindex(t){ |
|
doh.is("not-minus-one-input", a11y.getFirstInTabbingOrder("skip-minus-one").id); |
|
doh.is("not-minus-one-input", a11y.getLastInTabbingOrder("skip-minus-one").id); |
|
}, |
|
function findTabDescend(t){ |
|
doh.is("child-input1", a11y.getFirstInTabbingOrder("descend").id); |
|
doh.is("child-input2", a11y.getLastInTabbingOrder("descend").id); |
|
}, |
|
function findTabOuterInner(t){ |
|
doh.is("outer1", a11y.getFirstInTabbingOrder("outer-inner-container").id); |
|
doh.is("inner2", a11y.getLastInTabbingOrder("outer-inner-container").id); |
|
}, |
|
function skipNotShown(t){ |
|
doh.is(null, a11y.getFirstInTabbingOrder("hidden-element-container")); |
|
doh.is(null, a11y.getFirstInTabbingOrder("hidden-container-tabindex-zero")); |
|
doh.is(null, a11y.getFirstInTabbingOrder("hidden-container-no-tabindex")); |
|
doh.is(null, a11y.getFirstInTabbingOrder("container-with-hidden-containers")); |
|
|
|
doh.is(null, a11y.getFirstInTabbingOrder("display-none-element-container")); |
|
doh.is(null, a11y.getFirstInTabbingOrder("display-none-container-tabindex-zero")); |
|
doh.is(null, a11y.getFirstInTabbingOrder("display-none-container-no-tabindex")); |
|
doh.is(null, a11y.getFirstInTabbingOrder("container-with-display-none-containers")); |
|
}, |
|
function multiDigitTabIndex(){ |
|
doh.is("one", a11y.getFirstInTabbingOrder("multiDigitTabIndex").name, "first"); |
|
doh.is("eleven", a11y.getLastInTabbingOrder("multiDigitTabIndex").name, "last"); |
|
} |
|
]); |
|
|
|
doh.run(); |
|
}); |
|
|
|
</script> |
|
</head> |
|
<body> |
|
<h1>Dijit TabIndex Related Functions Unit Test</h1> |
|
|
|
<div id="empty"></div> |
|
|
|
<div id="div-container"> |
|
<div id="div"></div> |
|
</div> |
|
<div id="a-without-href-container"> |
|
<a id="a-without-href"></a> |
|
</div> |
|
<div id="a-with-href-container"> |
|
<a id="a-with-href" href="#a-without-href"></a> |
|
</div> |
|
|
|
<div><img src="images/flatScreen.gif" alt="picture of a flat-screen monitor" usemap="#area-map"/></div> |
|
<map id="area-map" name="area-map"> |
|
<area id="area" href="#" alt="example area" shape="rect" coords="0,0,8,8"/> |
|
</map> |
|
|
|
<div id="button-container"> |
|
<button id="button"></button> |
|
</div> |
|
<div id="input-container"> |
|
<input id="input"/> |
|
</div> |
|
<div id="object-container"> |
|
<object id="object" type="text/javascript"></object> |
|
</div> |
|
<div id="select-container"> |
|
<select id="select"></select> |
|
</div> |
|
<div id="textarea-container"> |
|
<textarea id="textarea"></textarea> |
|
</div> |
|
|
|
<div id="skip-disabled"> |
|
<input id="disabled-input1" disabled="disabled"/> |
|
<input id="not-disabled-input"/> |
|
<input id="disabled-input2" disabled="disabled"/> |
|
</div> |
|
|
|
<div id="zero-tabindex-div-container"> |
|
<div id="zero-tabindex-div" tabindex="0"></div> |
|
</div> |
|
|
|
<div id="no-tabindex-div-container"> |
|
<div id="no-tabindex-div"></div> |
|
</div> |
|
|
|
<div id="zero-tabindex-input-container"> |
|
<input id="zero-tabindex-input" tabindex="0"/> |
|
</div> |
|
|
|
<div id="iframe-container"> |
|
<div id="iframe"></div> |
|
</div> |
|
|
|
<div id="editor-container"> |
|
<div id="editor" data-dojo-type="dijit/Editor"></div> |
|
</div> |
|
|
|
<div id="positive-tabindex-mixed-with-no-tabindex"> |
|
<input id="no-tabindex-input1"/> |
|
<input id="no-tabindex-input2"/> |
|
<input id="positive-tabindex-input1a" tabindex="1"/> |
|
<input id="positive-tabindex-input1b" tabindex="1"/> |
|
<input id="positive-tabindex-input2a" tabindex="2"/> |
|
<input id="positive-tabindex-input2b" tabindex="2"/> |
|
</div> |
|
|
|
<div id="positive-tabindex"> |
|
<input id="positive-tabindex-input3a" tabindex="3"/> |
|
<input id="positive-tabindex-input3b" tabindex="3"/> |
|
<input id="positive-tabindex-input4a" tabindex="4"/> |
|
<input id="positive-tabindex-input4b" tabindex="4"/> |
|
</div> |
|
|
|
<div id="skip-minus-one"> |
|
<input id="minus-one-input1" tabindex="-1"/> |
|
<input id="not-minus-one-input"/> |
|
<input id="minus-one-input2" tabindex="-1"/> |
|
</div> |
|
|
|
<div id="descend"> |
|
<input disabled="disabled"/> |
|
<div> |
|
<input disabled="disabled"/> |
|
<div> |
|
<input disabled="disabled"/> |
|
</div> |
|
</div> |
|
<div> |
|
<input disabled="disabled"/> |
|
<div> |
|
<input disabled="disabled"/> |
|
</div> |
|
<div> |
|
<input id="child-input1"/> |
|
</div> |
|
<div> |
|
<input id="child-input2"/> |
|
</div> |
|
</div> |
|
<div> |
|
<div> |
|
<input disabled="disabled"/> |
|
</div> |
|
<input disabled="disabled"/> |
|
</div> |
|
<input disabled="disabled"/> |
|
</div> |
|
|
|
<div id="outer-inner-container"> |
|
<div id="outer1" tabindex="0"> |
|
<div id="inner1" tabindex="0"></div> |
|
</div> |
|
<div id="outer2" tabindex="0"> |
|
<div id="inner2" tabindex="0"></div> |
|
</div> |
|
</div> |
|
|
|
<div id="hidden-element-container"> |
|
<div id="hidden-element" tabindex="0" style="visibility: hidden;"> |
|
</div> |
|
</div> |
|
|
|
<div id="container-with-hidden-containers"> |
|
<div id="hidden-container-tabindex-zero" tabindex="0" style="visibility: hidden;"> |
|
<div id="inside-hidden-container-tabindex-zero" tabindex="0"> |
|
</div> |
|
</div> |
|
|
|
<div id="hidden-container-no-tabindex" style="visibility: hidden;"> |
|
<div id="inside-hidden-container-no-tabindex" tabindex="0"> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div id="display-none-element-container"> |
|
<div id="display-none-element" tabindex="0" style="display: none;"> |
|
</div> |
|
</div> |
|
|
|
<div id="container-with-display-none-containers"> |
|
<div id="display-none-container-tabindex-zero" tabindex="0" style="display: none;"> |
|
<div id="inside-display-none-container-tabindex-zero" tabindex="0"> |
|
</div> |
|
</div> |
|
|
|
<div id="display-none-container-no-tabindex" style="display: none;"> |
|
<div id="inside-display-none-container-no-tabindex" tabindex="0"> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div id="multiDigitTabIndex"> |
|
<input name="one" tabindex=1> |
|
<input name="two" tabindex=2> |
|
<input name="three" tabindex=3> |
|
<input name="four" tabindex=4> |
|
<input name="five" tabindex=5> |
|
<input name="six" tabindex=6> |
|
<input name="seven" tabindex=7> |
|
<input name="eight" tabindex=8> |
|
<input name="nine" tabindex=9> |
|
<input name="ten" tabindex=10> |
|
<input name="eleven" tabindex=11> |
|
</div> |
|
</body> |
|
</html>
|
|
|