Dactyloidae/accessible/tests/mochitest/jsat/test_landmarks.html

183 lines
7.7 KiB
HTML

<html>
<head>
<title> [AccessFu] Speak landmarks</title>
<link rel="stylesheet" type="text/css"
href="chrome://mochikit/content/tests/SimpleTest/test.css" />
<script type="application/javascript"
src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<script type="application/javascript"
src="../common.js"></script>
<script type="application/javascript"
src="output.js"></script>
<script type="application/javascript"
src="jsatcommon.js"></script>
<script type="application/javascript">
function doTest() {
// Test the following accOrElmOrID.
var tests = [{
accOrElmOrID: "nav",
expectedUtterance: [[{"string": "navigation"}, "a nav"],
["a nav", {"string": "navigation"}]],
expectedBraille: [[{"string": "navigation"}, "a nav"],
["a nav", {"string": "navigation"}]]
}, {
accOrElmOrID: "main",
expectedUtterance: [[{"string": "main"}, "a main area"],
["a main area", {"string": "main"}]],
expectedBraille: [[{"string": "main"}, "a main area"],
["a main area", {"string": "main"}]]
}, {
accOrElmOrID: "header",
expectedUtterance: [
[{"string": "banner"}, {"string": "header"}, "a header"],
["a header", {"string": "header"}, {"string": "banner"}]],
expectedBraille: [
[{"string": "banner"}, {"string": "headerAbbr"}, "a header"],
["a header", {"string": "headerAbbr"}, {"string": "banner"}]]
}, {
accOrElmOrID: "footer",
expectedUtterance: [
[{"string": "contentinfo"}, {"string": "footer"}, "a footer"],
["a footer", {"string": "footer"}, {"string": "contentinfo"}]],
expectedBraille: [
[{"string": "contentinfo"}, {"string": "footerAbbr"}, "a footer"],
["a footer", {"string": "footerAbbr"}, {"string": "contentinfo"}]]
}, {
accOrElmOrID: "article_header",
expectedUtterance: [
[{"string": "header"}, "a header within an article"],
["a header within an article", {"string": "header"}]],
expectedBraille: [
[{"string": "headerAbbr"}, "a header within an article"],
["a header within an article", {"string": "headerAbbr"}]],
}, {
accOrElmOrID: "article_footer",
expectedUtterance: [
[{"string": "footer"}, "a footer within an article"],
["a footer within an article", {"string": "footer"}]],
expectedBraille: [
[{"string": "footerAbbr"}, "a footer within an article"],
["a footer within an article", {"string": "footerAbbr"}]]
}, {
accOrElmOrID: "section_header",
expectedUtterance: [[{"string":"header"}, "a header within a section"],
["a header within a section", {"string":"header"}]],
expectedBraille: [
[{"string":"headerAbbr"}, "a header within a section"],
["a header within a section", {"string":"headerAbbr"}]]
}, {
accOrElmOrID: "section_footer",
expectedUtterance: [
[{"string": "footer"}, "a footer within a section"],
["a footer within a section", {"string": "footer"}]],
expectedBraille: [
[{"string": "footerAbbr"}, "a footer within a section"],
["a footer within a section", {"string": "footerAbbr"}]]
}, {
accOrElmOrID: "aside",
expectedUtterance: [
[{"string": "complementary"}, "by the way I am an aside"],
["by the way I am an aside", {"string": "complementary"}]],
expectedBraille: [
[{"string": "complementary"}, "by the way I am an aside"],
["by the way I am an aside", {"string": "complementary"}]]
}, {
accOrElmOrID: "main_element",
expectedUtterance: [[{"string": "main"}, "another main area"],
["another main area", {"string": "main"}]],
expectedBraille: [[{"string": "main"}, "another main area"],
["another main area", {"string": "main"}]]
}, {
accOrElmOrID: "complementary",
expectedUtterance: [[{"string": "list"},
{"string": "listItemsCount", "count": 1}, {"string": "complementary"},
{"string": "listStart"}, "A complementary"], ["A complementary",
{"string": "listStart"}, {"string": "complementary"},
{"string": "list"}, {"string": "listItemsCount", "count": 1}]],
expectedBraille: [["*", {"string": "complementary"}, "A complementary"],
["*", "A complementary", {"string": "complementary"}]]
}, {
accOrElmOrID: "parent_main",
expectedUtterance: [[{"string": "main"}, "a parent main",
{"string": "complementary"}, "a child complementary"],
["a parent main", "a child complementary",
{"string": "complementary"}, {"string": "main"}]],
expectedBraille: [[{"string": "main"}, "a parent main",
{"string": "complementary"}, "a child complementary"],
["a parent main", "a child complementary",
{"string": "complementary"}, {"string": "main"}]]
}, {
accOrElmOrID: "child_complementary",
expectedUtterance: [[{"string": "main"}, {"string": "complementary"},
"a child complementary"], ["a child complementary",
{"string": "complementary"}, {"string": "main"}]],
expectedBraille: [[{"string": "complementary"},
"a child complementary"], ["a child complementary",
{"string": "complementary"}]]
}];
// Test outputs (utterance and braille) for landmarks.
function testOutputOrder(aOutputOrder) {
return function() {
SpecialPowers.pushPrefEnv({
"set": [[PREF_UTTERANCE_ORDER, aOutputOrder]]
}, function() {
tests.forEach(function run(test) {
testOutput(test.expectedUtterance[aOutputOrder], test.accOrElmOrID,
test.oldAccOrElmOrID, 1);
testOutput(test.expectedBraille[aOutputOrder], test.accOrElmOrID,
test.oldAccOrElmOrID, 0);
});
AccessFuTest.nextTest();
});
};
}
AccessFuTest.addFunc(testOutputOrder(0));
AccessFuTest.addFunc(testOutputOrder(1));
AccessFuTest.waitForExplicitFinish();
AccessFuTest.runTests();
}
SimpleTest.waitForExplicitFinish();
addA11yLoadEvent(doTest);
</script>
</head>
<body>
<div id="root">
<a target="_blank"
href="https://bugzilla.mozilla.org/show_bug.cgi?id=888256"
title="[AccessFu] Speak landmarks">
Mozilla Bug 888256
</a>
<p id="display"></p>
<div id="content" style="display: none"></div>
<pre id="test"></pre>
<nav id="nav">a nav</nav>
<header id="header">a header</header>
<footer id="footer">a footer</footer>
<article id="article_with_header_and_footer">
<header id="article_header">a header within an article</header>
<footer id="article_footer">a footer within an article</footer>
</article>
<section id="section_with_header_and_footer">
<header id="section_header">a header within a section</header>
<footer id="section_footer">a footer within a section</footer>
</section>
<aside id="aside">by the way I am an aside</aside>
<article id="main" role="main">a main area</article>
<main id="main_element">another main area</main>
<ul style="list-style-type: none;">
<li role="complementary" id="complementary">
A complementary
</li>
</ul>
<main id="parent_main">
a parent main
<p id="child_complementary" role="complementary">a child complementary</article>
</main>
</div>
</body>
</html>