accessible/tests/mochitest/events/test_selection_aria.html

Wed, 31 Dec 2014 06:09:35 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Wed, 31 Dec 2014 06:09:35 +0100
changeset 0
6474c204b198
permissions
-rw-r--r--

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

michael@0 1 <html>
michael@0 2
michael@0 3 <head>
michael@0 4 <title>ARIA selection event testing</title>
michael@0 5
michael@0 6 <link rel="stylesheet" type="text/css"
michael@0 7 href="chrome://mochikit/content/tests/SimpleTest/test.css" />
michael@0 8
michael@0 9 <script type="application/javascript"
michael@0 10 src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
michael@0 11 <script type="application/javascript"
michael@0 12 src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
michael@0 13
michael@0 14 <script type="application/javascript"
michael@0 15 src="../common.js"></script>
michael@0 16 <script type="application/javascript"
michael@0 17 src="../events.js"></script>
michael@0 18 <script type="application/javascript"
michael@0 19 src="../role.js"></script>
michael@0 20 <script type="application/javascript"
michael@0 21 src="../states.js"></script>
michael@0 22
michael@0 23 <script type="application/javascript">
michael@0 24 ////////////////////////////////////////////////////////////////////////////
michael@0 25 // Invokers
michael@0 26
michael@0 27 function selectItem(aSelectID, aItemID)
michael@0 28 {
michael@0 29 this.selectNode = getNode(aSelectID);
michael@0 30 this.itemNode = getNode(aItemID);
michael@0 31
michael@0 32 this.eventSeq = [
michael@0 33 new invokerChecker(EVENT_SELECTION, aItemID)
michael@0 34 ];
michael@0 35
michael@0 36 this.invoke = function selectItem_invoke() {
michael@0 37 var itemNode = this.selectNode.querySelector("*[aria-selected='true']");
michael@0 38 if (itemNode)
michael@0 39 itemNode.removeAttribute("aria-selected");
michael@0 40
michael@0 41 this.itemNode.setAttribute("aria-selected", "true");
michael@0 42 }
michael@0 43
michael@0 44 this.getID = function selectItem_getID()
michael@0 45 {
michael@0 46 return "select item " + prettyName(aItemID);
michael@0 47 }
michael@0 48 }
michael@0 49
michael@0 50 ////////////////////////////////////////////////////////////////////////////
michael@0 51 // Do tests
michael@0 52
michael@0 53 var gQueue = null;
michael@0 54
michael@0 55 //gA11yEventDumpToConsole = true; // debug stuff
michael@0 56
michael@0 57 function doTests()
michael@0 58 {
michael@0 59 gQueue = new eventQueue();
michael@0 60
michael@0 61 gQueue.push(new selectItem("tablist", "tab1"));
michael@0 62 gQueue.push(new selectItem("tablist", "tab2"));
michael@0 63
michael@0 64 gQueue.push(new selectItem("tree", "treeitem1"));
michael@0 65 gQueue.push(new selectItem("tree", "treeitem1a"));
michael@0 66 gQueue.push(new selectItem("tree", "treeitem1a1"));
michael@0 67
michael@0 68 gQueue.push(new selectItem("tree2", "tree2item1"));
michael@0 69 gQueue.push(new selectItem("tree2", "tree2item1a"));
michael@0 70 gQueue.push(new selectItem("tree2", "tree2item1a1"));
michael@0 71
michael@0 72 gQueue.invoke(); // Will call SimpleTest.finish();
michael@0 73 }
michael@0 74
michael@0 75 SimpleTest.waitForExplicitFinish();
michael@0 76 addA11yLoadEvent(doTests);
michael@0 77 </script>
michael@0 78 </head>
michael@0 79
michael@0 80 <body>
michael@0 81
michael@0 82 <a target="_blank"
michael@0 83 href="https://bugzilla.mozilla.org/show_bug.cgi?id=569653"
michael@0 84 title="Make selection events async">
michael@0 85 Mozilla Bug 569653
michael@0 86 </a>
michael@0 87 <a target="_blank"
michael@0 88 href="https://bugzilla.mozilla.org/show_bug.cgi?id=804040"
michael@0 89 title="Selection event not fired when selection of ARIA tab changes">
michael@0 90 Mozilla Bug 804040
michael@0 91 </a>
michael@0 92
michael@0 93 <p id="display"></p>
michael@0 94 <div id="content" style="display: none"></div>
michael@0 95 <pre id="test">
michael@0 96 </pre>
michael@0 97
michael@0 98 <div role="tablist" id="tablist">
michael@0 99 <div role="tab" id="tab1">tab1</div>
michael@0 100 <div role="tab" id="tab2">tab2</div>
michael@0 101 </div>
michael@0 102
michael@0 103 <div id="tree" role="tree">
michael@0 104 <div id="treeitem1" role="treeitem">Canada
michael@0 105 <div id="treeitem1a" role="treeitem">- Ontario
michael@0 106 <div id="treeitem1a1" role="treeitem">-- Toronto</div>
michael@0 107 </div>
michael@0 108 <div id="treeitem1b" role="treeitem">- Manitoba</div>
michael@0 109 </div>
michael@0 110 <div id="treeitem2" role="treeitem">Germany</div>
michael@0 111 <div id="treeitem3" role="treeitem">Russia</div>
michael@0 112 </div>
michael@0 113
michael@0 114 <div id="tree2" role="tree" aria-multiselectable="true">
michael@0 115 <div id="tree2item1" role="treeitem">Canada
michael@0 116 <div id="tree2item1a" role="treeitem">- Ontario
michael@0 117 <div id="tree2item1a1" role="treeitem">-- Toronto</div>
michael@0 118 </div>
michael@0 119 <div id="tree2item1b" role="treeitem">- Manitoba</div>
michael@0 120 </div>
michael@0 121 <div id="tree2item2" role="treeitem">Germany</div>
michael@0 122 <div id="tree2item3" role="treeitem">Russia</div>
michael@0 123 </div>
michael@0 124
michael@0 125 <div id="eventdump"></div>
michael@0 126 </body>
michael@0 127 </html>

mercurial