mirror of
https://github.com/classilla/tenfourfox.git
synced 2024-10-22 02:25:05 +00:00
473 lines
14 KiB
HTML
473 lines
14 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<title>AccessFu tests for live regions support</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="./jsatcommon.js"></script>
|
|
<script type="application/javascript">
|
|
|
|
function startAccessFu() {
|
|
SpecialPowers.setIntPref("accessibility.accessfu.activate", 1);
|
|
AccessFuTest.once_log("EventManager.start", AccessFuTest.nextTest);
|
|
}
|
|
|
|
function stopAccessFu() {
|
|
SpecialPowers.setIntPref("accessibility.accessfu.activate", 0);
|
|
AccessFuTest.once_log("EventManager.stop", AccessFuTest.finish);
|
|
}
|
|
|
|
function hide(id) {
|
|
var element = document.getElementById(id);
|
|
element.style.display = "none";
|
|
}
|
|
|
|
function show(id) {
|
|
var element = document.getElementById(id);
|
|
element.style.display = "block";
|
|
}
|
|
|
|
function ariaHide(id) {
|
|
var element = document.getElementById(id);
|
|
element.setAttribute('aria-hidden', true);
|
|
}
|
|
|
|
function ariaShow(id) {
|
|
var element = document.getElementById(id);
|
|
element.setAttribute('aria-hidden', false);
|
|
}
|
|
|
|
function udpate(id, text, property) {
|
|
var element = document.getElementById(id);
|
|
element[property] = text;
|
|
}
|
|
|
|
function updateText(id, text) {
|
|
udpate(id, text, "textContent");
|
|
}
|
|
|
|
function updateHTML(id, text) {
|
|
udpate(id, text, "innerHTML");
|
|
}
|
|
|
|
var tests = [{
|
|
expected: {
|
|
"eventType": "liveregion-change",
|
|
"data": [{"string": "hidden"}, "I will be hidden"],
|
|
"options": {
|
|
"enqueue": true
|
|
}
|
|
},
|
|
action: function action() {
|
|
["to_hide1", "to_hide2", "to_hide3", "to_hide4"].forEach(id => hide(id));
|
|
}
|
|
}, {
|
|
expected: {
|
|
"eventType": "liveregion-change",
|
|
"data": [{"string": "hidden"}, "I will be hidden"],
|
|
"options": {
|
|
"enqueue": true
|
|
}
|
|
},
|
|
action: function action() {
|
|
["to_hide_descendant1", "to_hide_descendant2",
|
|
"to_hide_descendant3", "to_hide_descendant4"].forEach(id => hide(id));
|
|
}
|
|
}, {
|
|
expected: {
|
|
"eventType": "liveregion-change",
|
|
"data": ["I will be shown"],
|
|
"options": {
|
|
"enqueue": true
|
|
}
|
|
},
|
|
action: function action() {
|
|
["to_show1", "to_show2", "to_show3", "to_show4"].forEach(id => show(id));
|
|
}
|
|
}, {
|
|
expected: {
|
|
"eventType": "liveregion-change",
|
|
"data": ["I will be shown"],
|
|
"options": {
|
|
"enqueue": true
|
|
}
|
|
},
|
|
action: function action() {
|
|
["to_show_descendant1", "to_show_descendant2",
|
|
"to_show_descendant3", "to_show_descendant4"].forEach(id => show(id));
|
|
}
|
|
}, {
|
|
expected: {
|
|
"eventType": "liveregion-change",
|
|
"data": [{"string": "hidden"}, "I will be hidden"],
|
|
"options": {
|
|
"enqueue": true
|
|
}
|
|
},
|
|
action: function action() {
|
|
["to_hide5", "to_hide6", "to_hide7", "to_hide8", "to_hide9"].forEach(id => ariaHide(id));
|
|
}
|
|
}, {
|
|
expected: {
|
|
"eventType": "liveregion-change",
|
|
"data": [{"string": "hidden"}, "I will be hidden"],
|
|
"options": {
|
|
"enqueue": true
|
|
}
|
|
},
|
|
action: function action() {
|
|
["to_hide_descendant5", "to_hide_descendant6",
|
|
"to_hide_descendant7", "to_hide_descendant8"].forEach(id => ariaHide(id));
|
|
}
|
|
}, {
|
|
expected: {
|
|
"eventType": "liveregion-change",
|
|
"data": ["I will be shown"],
|
|
"options": {
|
|
"enqueue": true
|
|
}
|
|
},
|
|
action: function action() {
|
|
["to_show5", "to_show6", "to_show7", "to_show8", "to_show9"].forEach(id => ariaShow(id));
|
|
}
|
|
}, {
|
|
expected: {
|
|
"eventType": "liveregion-change",
|
|
"data": ["I will be shown"],
|
|
"options": {
|
|
"enqueue": true
|
|
}
|
|
},
|
|
action: function action() {
|
|
["to_show_descendant5", "to_show_descendant6",
|
|
"to_show_descendant7", "to_show_descendant8"].forEach(id => ariaShow(id));
|
|
}
|
|
}, {
|
|
expected: {
|
|
"eventType": "liveregion-change",
|
|
"data": [{"string": "hidden"}, "I will be hidden"],
|
|
"options": {
|
|
"enqueue": false
|
|
}
|
|
},
|
|
action: function action() {
|
|
hide("to_hide_live_assertive");
|
|
}
|
|
}, {
|
|
expected: {
|
|
"eventType": "liveregion-change",
|
|
"data": [{"string": "hidden"}, "I will be hidden"],
|
|
"options": {
|
|
"enqueue": false
|
|
}
|
|
},
|
|
action: function action() {
|
|
ariaHide("to_hide_live_assertive2");
|
|
}
|
|
}, {
|
|
expected: {
|
|
"eventType": "liveregion-change",
|
|
"data": ["I will be shown"],
|
|
"options": {
|
|
"enqueue": false
|
|
}
|
|
},
|
|
action: function action() {
|
|
["to_show_live_off", "to_show_live_assertive"].forEach(id => show(id));
|
|
}
|
|
}, {
|
|
expected: {
|
|
"eventType": "liveregion-change",
|
|
"data": ["I will be shown"],
|
|
"options": {
|
|
"enqueue": false
|
|
}
|
|
},
|
|
action: function action() {
|
|
["to_show_live_off2", "to_show_live_assertive2"].forEach(id => ariaShow(id));
|
|
}
|
|
}, {
|
|
expected: {
|
|
"eventType": "liveregion-change",
|
|
"data": ["Text Added"],
|
|
"options": {
|
|
"enqueue": false
|
|
}
|
|
},
|
|
action: function action() {
|
|
updateText("text_add", "Text Added");
|
|
}
|
|
}, {
|
|
expected: {
|
|
"eventType": "liveregion-change",
|
|
"data": ["Text Added"],
|
|
"options": {
|
|
"enqueue": false
|
|
}
|
|
},
|
|
action: function action() {
|
|
updateHTML("text_add", "Text Added");
|
|
}
|
|
}, {
|
|
expected: {
|
|
"eventType": "liveregion-change",
|
|
"data": [{"string": "hidden"}, "Text Removed"],
|
|
"options": {
|
|
"enqueue": true
|
|
}
|
|
},
|
|
action: function action() {
|
|
updateText("text_remove", "");
|
|
}
|
|
}, {
|
|
expected: {
|
|
"eventType": "liveregion-change",
|
|
"data": ["Descendant Text Added"],
|
|
"options": {
|
|
"enqueue": false
|
|
}
|
|
},
|
|
action: function action() {
|
|
updateText("text_add_descendant", "Descendant Text Added");
|
|
}
|
|
}, {
|
|
expected: {
|
|
"eventType": "liveregion-change",
|
|
"data": ["Descendant Text Added"],
|
|
"options": {
|
|
"enqueue": false
|
|
}
|
|
},
|
|
action: function action() {
|
|
updateHTML("text_add_descendant", "Descendant Text Added");
|
|
}
|
|
}, {
|
|
expected: {
|
|
"eventType": "liveregion-change",
|
|
"data": [{"string": "hidden"}, "Descendant Text Removed"],
|
|
"options": {
|
|
"enqueue": true
|
|
}
|
|
},
|
|
action: function action() {
|
|
updateText("text_remove_descendant", "");
|
|
}
|
|
}, {
|
|
expected: {
|
|
"eventType": "liveregion-change",
|
|
"data": ["Descendant Text Added"],
|
|
"options": {
|
|
"enqueue": false
|
|
}
|
|
},
|
|
action: function action() {
|
|
updateText("text_add_descendant2", "Descendant Text Added");
|
|
}
|
|
}, {
|
|
expected: {
|
|
"eventType": "liveregion-change",
|
|
"data": ["Descendant Text Added"],
|
|
"options": {
|
|
"enqueue": false
|
|
}
|
|
},
|
|
action: function action() {
|
|
updateHTML("text_add_descendant2", "Descendant Text Added");
|
|
}
|
|
}, {
|
|
expected: {
|
|
"eventType": "liveregion-change",
|
|
"data": [{"string": "hidden"}, "Descendant Text Removed"],
|
|
"options": {
|
|
"enqueue": true
|
|
}
|
|
},
|
|
action: function action() {
|
|
updateText("text_remove_descendant2", "");
|
|
}
|
|
}, {
|
|
expected: {
|
|
"eventType": "liveregion-change",
|
|
"data": ["I am replaced", {"string": "main"}],
|
|
"options": {
|
|
"enqueue": true
|
|
}
|
|
},
|
|
action: function action() {
|
|
var region = document.getElementById("to_replace_region");
|
|
var child = document.getElementById("to_replace");
|
|
child.setAttribute("role", "main");
|
|
}
|
|
}, {
|
|
expected: {
|
|
"eventType": "liveregion-change",
|
|
"data": ["I am a replaced text"],
|
|
"options": {
|
|
"enqueue": false
|
|
}
|
|
},
|
|
action: function action() {
|
|
updateText("to_replace_text", "I am a replaced text");
|
|
}
|
|
}, {
|
|
expected: {
|
|
"eventType": "liveregion-change",
|
|
"data": ["I am a replaced text"],
|
|
"options": {
|
|
"enqueue": false
|
|
}
|
|
},
|
|
action: function action() {
|
|
updateHTML("to_replace_text", "I am a replaced text");
|
|
}
|
|
}];
|
|
|
|
function doTest() {
|
|
AccessFuTest.addFunc(startAccessFu);
|
|
tests.forEach(function addTest(test) {
|
|
AccessFuTest.addFunc(function () {
|
|
AccessFuTest.once(test.expected, AccessFuTest.nextTest);
|
|
test.action();
|
|
});
|
|
});
|
|
AccessFuTest.addFunc(stopAccessFu);
|
|
AccessFuTest.waitForExplicitFinish();
|
|
AccessFuTest.runTests();
|
|
}
|
|
|
|
SimpleTest.waitForExplicitFinish();
|
|
addA11yLoadEvent(doTest);
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
<a target="_blank"
|
|
href="https://bugzilla.mozilla.org/show_bug.cgi?id=795957"
|
|
title="[AccessFu] Support live regions">
|
|
Mozilla Bug 795957
|
|
</a>
|
|
<div id="root">
|
|
<p id="display"></p>
|
|
<div id="content" style="display: none"></div>
|
|
<pre id="test"></pre>
|
|
|
|
<p id="to_hide1">I should not be announced 1</p>
|
|
<p id="to_hide2" aria-live="polite">I should not be announced 2</p>
|
|
<p id="to_hide3" aria-live="assertive" aria-relevant="text">I should not be announced 3</p>
|
|
<p id="to_hide4" aria-live="polite" aria-relevant="all">I will be hidden</p>
|
|
|
|
<p id="to_hide5" aria-hidden="true">I should not be announced 5</p>
|
|
<p id="to_hide6">I should not be announced 6</p>
|
|
<p id="to_hide7" aria-live="polite">I should not be announced 7</p>
|
|
<p id="to_hide8" aria-live="assertive" aria-relevant="text">I should not be announced 8</p>
|
|
<p id="to_hide9" aria-live="polite" aria-relevant="all">I will be hidden</p>
|
|
|
|
<div>
|
|
<p id="to_hide_descendant1">I should not be announced 1</p>
|
|
</div>
|
|
<div aria-live="polite">
|
|
<p id="to_hide_descendant2">I should not be announced 2</p>
|
|
</div>
|
|
<div aria-live="assertive" aria-relevant="text">
|
|
<p id="to_hide_descendant3">I should not be announced 3</p>
|
|
</div>
|
|
<div aria-live="polite" aria-relevant="all">
|
|
<p id="to_hide_descendant4">I will be hidden</p>
|
|
</div>
|
|
|
|
<div>
|
|
<p id="to_hide_descendant5">I should not be announced 4</p>
|
|
</div>
|
|
<div aria-live="polite">
|
|
<p id="to_hide_descendant6">I should not be announced 5</p>
|
|
</div>
|
|
<div aria-live="assertive" aria-relevant="text">
|
|
<p id="to_hide_descendant7">I should not be announced 6</p>
|
|
</div>
|
|
<div aria-live="polite" aria-relevant="all">
|
|
<p id="to_hide_descendant8">I will be hidden</p>
|
|
</div>
|
|
|
|
<p id="to_show1" style="display: none">I should not be announced 1</p>
|
|
<p id="to_show2" aria-live="assertive" aria-relevant="text" style="display: none">I should not be announced 2</p>
|
|
<p id="to_show3" aria-live="polite" aria-relevant="removals" style="display: none">I should not be announced 3</p>
|
|
<p id="to_show4" aria-live="polite" aria-relevant="all" style="display: none">I will be shown</p>
|
|
|
|
<p id="to_show5" aria-hidden="false">I should not be announced 5</p>
|
|
<p id="to_show6" aria-hidden="true">I should not be announced 6</p>
|
|
<p id="to_show7" aria-hidden="true" aria-live="assertive" aria-relevant="text">I should not be announced 7</p>
|
|
<p id="to_show8" aria-hidden="true" aria-live="polite" aria-relevant="removals">I should not be announced 8</p>
|
|
<p id="to_show9" aria-hidden="true" aria-live="polite" aria-relevant="all">I will be shown</p>
|
|
|
|
<div>
|
|
<p id="to_show_descendant1" style="display: none">I should not be announced 1</p>
|
|
</div>
|
|
<div aria-live="polite" aria-relevant="removals">
|
|
<p id="to_show_descendant2" style="display: none">I should not be announced 2</p>
|
|
</div>
|
|
<div aria-live="assertive" aria-relevant="text">
|
|
<p id="to_show_descendant3" style="display: none">I should not be announced 3</p>
|
|
</div>
|
|
<div aria-live="polite" aria-relevant="all">
|
|
<p id="to_show_descendant4" style="display: none">I will be shown</p>
|
|
</div>
|
|
|
|
<div>
|
|
<p id="to_show_descendant5" aria-hidden="true">I should not be announced 5</p>
|
|
</div>
|
|
<div aria-live="polite" aria-relevant="removals">
|
|
<p id="to_show_descendant6" aria-hidden="true">I should not be announced 6</p>
|
|
</div>
|
|
<div aria-live="assertive" aria-relevant="text">
|
|
<p id="to_show_descendant7" aria-hidden="true">I should not be announced 7</p>
|
|
</div>
|
|
<div aria-live="polite" aria-relevant="all">
|
|
<p id="to_show_descendant8" aria-hidden="true">I will be shown</p>
|
|
</div>
|
|
|
|
<div aria-live="assertive" aria-relevant="all">
|
|
<p id="to_hide_live_assertive">I will be hidden</p>
|
|
</div>
|
|
|
|
<div aria-live="assertive" aria-relevant="all">
|
|
<p id="to_hide_live_assertive2">I will be hidden</p>
|
|
</div>
|
|
<p id="to_show_live_assertive" aria-live="assertive" style="display: none">I will be shown</p>
|
|
|
|
<p id="to_show_live_off" aria-live="off" style="display: none">I will not be shown</p>
|
|
|
|
<p id="to_show_live_assertive2" aria-live="assertive" aria-hidden="true">I will be shown</p>
|
|
|
|
<p id="to_show_live_off2" aria-live="off" aria-hidden="true">I will not be shown</p>
|
|
|
|
<div id="to_replace_region" aria-live="polite" aria-relevant="all">
|
|
<p id="to_replace">I am replaced</p>
|
|
</div>
|
|
|
|
<p id="to_replace_text" aria-live="assertive" aria-relevant="text">I am going to be replaced</p>
|
|
|
|
<p id="text_add" aria-live="assertive" aria-relevant="text"></p>
|
|
<p id="text_remove" aria-live="polite" aria-relevant="all">Text Removed</p>
|
|
|
|
<div aria-live="assertive" aria-relevant="all">
|
|
<p id="text_add_descendant"></p>
|
|
</div>
|
|
<div aria-live="polite" aria-relevant="text">
|
|
<p id="text_remove_descendant">Descendant Text Removed</p>
|
|
</div>
|
|
<div aria-live="assertive" aria-relevant="text">
|
|
<p id="text_add_descendant2"></p>
|
|
</div>
|
|
<div aria-live="polite" aria-relevant="all">
|
|
<p id="text_remove_descendant2">Descendant Text Removed</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|