1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/accessible/tests/mochitest/states/test_aria_widgetitems.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,162 @@
1.4 +<!DOCTYPE html>
1.5 +<html>
1.6 +
1.7 +<head>
1.8 + <title>Test ARIA tab accessible selected state</title>
1.9 +
1.10 + <link rel="stylesheet" type="text/css"
1.11 + href="chrome://mochikit/content/tests/SimpleTest/test.css" />
1.12 +
1.13 + <script type="application/javascript"
1.14 + src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
1.15 +
1.16 + <script type="application/javascript"
1.17 + src="../common.js"></script>
1.18 + <script type="application/javascript"
1.19 + src="../role.js"></script>
1.20 + <script type="application/javascript"
1.21 + src="../states.js"></script>
1.22 + <script type="application/javascript"
1.23 + src="../events.js"></script>
1.24 +
1.25 + <script type="application/javascript">
1.26 + function focusARIAItem(aID, aIsSelected)
1.27 + {
1.28 + this.DOMNode = getNode(aID);
1.29 +
1.30 + this.invoke = function focusARIAItem_invoke()
1.31 + {
1.32 + this.DOMNode.focus();
1.33 + }
1.34 +
1.35 + this.check = function focusARIAItem_check(aEvent)
1.36 + {
1.37 + testStates(this.DOMNode, aIsSelected ? STATE_SELECTED : 0, 0,
1.38 + aIsSelected ? 0 : STATE_SELECTED);
1.39 + }
1.40 +
1.41 + this.getID = function focusARIAItem_getID()
1.42 + {
1.43 + return "Focused ARIA widget item with aria-selected='" +
1.44 + (aIsSelected ? "true', should" : "false', shouldn't") +
1.45 + " have selected state on " + prettyName(aID);
1.46 + }
1.47 + }
1.48 +
1.49 + function focusActiveDescendantItem(aItemID, aWidgetID, aIsSelected)
1.50 + {
1.51 + this.DOMNode = getNode(aItemID);
1.52 + this.widgetDOMNode = getNode(aWidgetID);
1.53 +
1.54 + this.invoke = function focusActiveDescendantItem_invoke()
1.55 + {
1.56 + this.widgetDOMNode.setAttribute("aria-activedescendant", aItemID);
1.57 + this.widgetDOMNode.focus();
1.58 + }
1.59 +
1.60 + this.check = function focusActiveDescendantItem_check(aEvent)
1.61 + {
1.62 + testStates(this.DOMNode, aIsSelected ? STATE_SELECTED : 0, 0,
1.63 + aIsSelected ? 0 : STATE_SELECTED);
1.64 + }
1.65 +
1.66 + this.getID = function tabActiveDescendant_getID()
1.67 + {
1.68 + return "ARIA widget item managed by activedescendant " +
1.69 + (aIsSelected ? "should" : "shouldn't") +
1.70 + " have the selected state on " + prettyName(aItemID);
1.71 + }
1.72 + }
1.73 +
1.74 + ////////////////////////////////////////////////////////////////////////////
1.75 + // Test
1.76 +
1.77 + //gA11yEventDumpID = "eventdump"; // debug stuff
1.78 + //gA11yEventDumpToConsole = true;
1.79 +
1.80 + var gQueue = null;
1.81 +
1.82 + function doTest()
1.83 + {
1.84 + // aria-selected
1.85 + testStates("aria_tab1", 0, 0, STATE_SELECTED);
1.86 + testStates("aria_tab2", STATE_SELECTED);
1.87 + testStates("aria_tab3", 0, 0, STATE_SELECTED);
1.88 + testStates("aria_option1", 0, 0, STATE_SELECTED);
1.89 + testStates("aria_option2", STATE_SELECTED);
1.90 + testStates("aria_option3", 0, 0, STATE_SELECTED);
1.91 + testStates("aria_treeitem1", 0, 0, STATE_SELECTED);
1.92 + testStates("aria_treeitem2", STATE_SELECTED);
1.93 + testStates("aria_treeitem3", 0, 0, STATE_SELECTED);
1.94 +
1.95 + // selected state when widget item is focused
1.96 + gQueue = new eventQueue(EVENT_FOCUS);
1.97 +
1.98 + gQueue.push(new focusARIAItem("aria_tab1", true));
1.99 + gQueue.push(new focusARIAItem("aria_tab2", true));
1.100 + gQueue.push(new focusARIAItem("aria_tab3", false));
1.101 + gQueue.push(new focusARIAItem("aria_option1", true));
1.102 + gQueue.push(new focusARIAItem("aria_option2", true));
1.103 + gQueue.push(new focusARIAItem("aria_option3", false));
1.104 + gQueue.push(new focusARIAItem("aria_treeitem1", true));
1.105 + gQueue.push(new focusARIAItem("aria_treeitem2", true));
1.106 + gQueue.push(new focusARIAItem("aria_treeitem3", false));
1.107 +
1.108 + // selected state when widget item is focused (by aria-activedescendant)
1.109 + gQueue.push(new focusActiveDescendantItem("aria_tab5", "aria_tablist2", true));
1.110 + gQueue.push(new focusActiveDescendantItem("aria_tab6", "aria_tablist2", true));
1.111 + gQueue.push(new focusActiveDescendantItem("aria_tab4", "aria_tablist2", false));
1.112 +
1.113 + gQueue.invoke(); // SimpleTest.finish() will be called in the end
1.114 + }
1.115 +
1.116 + SimpleTest.waitForExplicitFinish();
1.117 + addA11yLoadEvent(doTest);
1.118 + </script>
1.119 +</head>
1.120 +<body>
1.121 +
1.122 + <a target="_blank"
1.123 + href="https://bugzilla.mozilla.org/show_bug.cgi?id=653601"
1.124 + title="aria-selected ignored for ARIA tabs">
1.125 + Mozilla Bug 653601
1.126 + </a>
1.127 + <a target="_blank"
1.128 + href="https://bugzilla.mozilla.org/show_bug.cgi?id=526703"
1.129 + title="Focused widget item should expose selected state by default">
1.130 + Mozilla Bug 526703
1.131 + </a>
1.132 + <p id="display"></p>
1.133 + <div id="content" style="display: none"></div>
1.134 + <pre id="test">
1.135 + </pre>
1.136 +
1.137 + <!-- tab -->
1.138 + <div id="aria_tablist" role="tablist">
1.139 + <div id="aria_tab1" role="tab" tabindex="0">unselected tab</div>
1.140 + <div id="aria_tab2" role="tab" tabindex="0" aria-selected="true">selected tab</div>
1.141 + <div id="aria_tab3" role="tab" tabindex="0" aria-selected="false">focused explicitly unselected tab</div>
1.142 + </div>
1.143 +
1.144 + <!-- listbox -->
1.145 + <div id="aria_listbox" role="listbox">
1.146 + <div id="aria_option1" role="option" tabindex="0">unselected option</div>
1.147 + <div id="aria_option2" role="option" tabindex="0" aria-selected="true">selected option</div>
1.148 + <div id="aria_option3" role="option" tabindex="0" aria-selected="false">focused explicitly unselected option</div>
1.149 + </div>
1.150 +
1.151 + <!-- tree -->
1.152 + <div id="aria_tree" role="tree">
1.153 + <div id="aria_treeitem1" role="treeitem" tabindex="0">unselected treeitem</div>
1.154 + <div id="aria_treeitem2" role="treeitem" tabindex="0" aria-selected="true">selected treeitem</div>
1.155 + <div id="aria_treeitem3" role="treeitem" tabindex="0" aria-selected="false">focused explicitly unselected treeitem</div>
1.156 + </div>
1.157 +
1.158 + <!-- tab managed by active-descendant -->
1.159 + <div id="aria_tablist2" role="tablist" tabindex="0">
1.160 + <div id="aria_tab4" role="tab" aria-selected="false">focused explicitly unselected tab</div>
1.161 + <div id="aria_tab5" role="tab">initially selected tab</div>
1.162 + <div id="aria_tab6" role="tab">later selected tab</div>
1.163 + </div>
1.164 +</body>
1.165 +</html>
