diff options
Diffstat (limited to 'accessible/tests/mochitest/jsat/test_live_regions.html')
| -rw-r--r-- | accessible/tests/mochitest/jsat/test_live_regions.html | 472 |
1 files changed, 472 insertions, 0 deletions
diff --git a/accessible/tests/mochitest/jsat/test_live_regions.html b/accessible/tests/mochitest/jsat/test_live_regions.html new file mode 100644 index 000000000..53828f1b1 --- /dev/null +++ b/accessible/tests/mochitest/jsat/test_live_regions.html @@ -0,0 +1,472 @@ +<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.pushPrefEnv({"set": [['accessibility.accessfu.activate', 1]]}); + AccessFuTest.once_log("EventManager.start", AccessFuTest.nextTest); + } + + function stopAccessFu() { + SpecialPowers.pushPrefEnv({"set": [['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> |