Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Core: Better support for areas in :focusable and :tabbable selectors.…

… Partial fix for #4488 - :focusable and :tabbable are broken with jQuery 1.3.2.
  • Loading branch information...
commit fe13fbadd45b59fb67ce6b47c5aea6231596a7c7 1 parent 4deb824
Scott González authored July 22, 2010
15  tests/unit/core/core.html
@@ -42,6 +42,17 @@ <h2 id="qunit-userAgent"></h2>
42 42
 
43 43
 <div id="main" style="position: absolute; top: -10000px; left: -10000px;">
44 44
 
  45
+	<img src="images/jqueryui_32x32.png" usemap="#mymap" width="10", height="10">
  46
+	<map name="mymap">
  47
+		<area shape="rect" coords="0,0,1,1" id="areaCoordsNoHref">
  48
+		<area shape="rect" coords="1,1,2,2" href="foo.html" id="areaCoordsHref">
  49
+		<area shape="rect" coords="0,0,0,0" href="foo.html" id="areaCoordsNoSizeHref">
  50
+		<area href="foo.html" id="areaNoCoordsHref">
  51
+	</map>
  52
+	<map name="mymap2">
  53
+		<area shape="rect" coords="1,1,2,2" href="foo.html" id="areaNoImg">
  54
+	</map>
  55
+	
45 56
 	<div>
46 57
 		<input id="visibleAncestor-inputTypeNone" />
47 58
 		<input type="text" id="visibleAncestor-inputTypeText" />
@@ -57,10 +68,6 @@ <h2 id="qunit-userAgent"></h2>
57 68
 		<object id="visibleAncestor-object">xxx</object>
58 69
 		<a href="#" id="visibleAncestor-anchorWithHref">anchor</a>
59 70
 		<a id="visibleAncestor-anchorWithoutHref">anchor</a>
60  
-		<map>
61  
-			<area href="#" id="visibleAncestor-areaWithHref" alt="" />
62  
-			<area id="visibleAncestor-areaWithoutHref" alt="" />
63  
-		</map>
64 71
 		<span id="visibleAncestor-span">x</span>
65 72
 		<div id="visibleAncestor-div">x</div>
66 73
 		<span id="visibleAncestor-spanWithTabindex" tabindex="1">x</span>
38  tests/unit/core/selector.js
@@ -79,7 +79,7 @@ test("data", function() {
79 79
 });
80 80
 
81 81
 test("focusable - visible, enabled elements", function() {
82  
-	expect(18);
  82
+	expect(16);
83 83
 	
84 84
 	isFocusable('#visibleAncestor-inputTypeNone', 'input, no type');
85 85
 	isFocusable('#visibleAncestor-inputTypeText', 'input, type text');
@@ -93,9 +93,6 @@ test("focusable - visible, enabled elements", function() {
93 93
 	isFocusable('#visibleAncestor-object', 'object');
94 94
 	isFocusable('#visibleAncestor-anchorWithHref', 'anchor with href');
95 95
 	isNotFocusable('#visibleAncestor-anchorWithoutHref', 'anchor without href');
96  
-	// fails: $("map").is(":visible") and $("map").is(":hidden") both return true
97  
-	isFocusable('#visibleAncestor-areaWithHref', 'area with href');
98  
-	isNotFocusable('#visibleAncestor-areaWithoutHref', 'area without href');
99 96
 	isNotFocusable('#visibleAncestor-span', 'span');
100 97
 	isNotFocusable('#visibleAncestor-div', 'div');
101 98
 	isFocusable("#visibleAncestor-spanWithTabindex", 'span with tabindex');
@@ -159,8 +156,16 @@ test("focusable - invalid tabindex", function() {
159 156
 	isNotFocusable('#spanTabindex3foo', 'span, tabindex 3foo');
160 157
 });
161 158
 
  159
+test("focusable - area elements", function() {
  160
+	isNotFocusable('#areaCoordsNoHref', 'coords but no href');
  161
+	isFocusable('#areaCoordsHref', 'coords and href');
  162
+	isFocusable('#areaCoordsNoSizeHref', 'coords of zero px and href');
  163
+	isFocusable('#areaNoCoordsHref', 'href but no coords');
  164
+	isNotFocusable('#areaNoImg', 'not associated with an image');
  165
+});
  166
+
162 167
 test("tabbable - visible, enabled elements", function() {
163  
-	expect(18);
  168
+	expect(16);
164 169
 	
165 170
 	isTabbable('#visibleAncestor-inputTypeNone', 'input, no type');
166 171
 	isTabbable('#visibleAncestor-inputTypeText', 'input, type text');
@@ -174,16 +179,13 @@ test("tabbable - visible, enabled elements", function() {
174 179
 	isTabbable('#visibleAncestor-object', 'object');
175 180
 	isTabbable('#visibleAncestor-anchorWithHref', 'anchor with href');
176 181
 	isNotTabbable('#visibleAncestor-anchorWithoutHref', 'anchor without href');
177  
-	// fails: $("map").is(":visible") and $("map").is(":hidden") both return true
178  
-	isTabbable('#visibleAncestor-areaWithHref', 'area with href');
179  
-	isNotTabbable('#visibleAncestor-areaWithoutHref', 'area without href');
180 182
 	isNotTabbable('#visibleAncestor-span', 'span');
181 183
 	isNotTabbable('#visibleAncestor-div', 'div');
182 184
 	isTabbable("#visibleAncestor-spanWithTabindex", 'span with tabindex');
183 185
 	isNotTabbable("#visibleAncestor-divWithNegativeTabindex", 'div with tabindex');
184 186
 });
185 187
 
186  
-test("Tabbable - disabled elements", function() {
  188
+test("tabbable - disabled elements", function() {
187 189
 	expect(9);
188 190
 	
189 191
 	isNotTabbable('#disabledElement-inputTypeNone', 'input, no type');
@@ -197,25 +199,23 @@ test("Tabbable - disabled elements", function() {
197 199
 	isNotTabbable('#disabledElement-textarea', 'textarea');
198 200
 });
199 201
 
200  
-test("Tabbable - hidden styles", function() {
  202
+test("tabbable - hidden styles", function() {
201 203
 	expect(8);
202 204
 	
203 205
 	isNotTabbable('#displayNoneAncestor-input', 'input, display: none parent');
204 206
 	isNotTabbable('#displayNoneAncestor-span', 'span with tabindex, display: none parent');
205 207
 	
206  
-	// fails: element hidden by parent-visibility-hidden is still visible according to :visible
207 208
 	isNotTabbable('#visibilityHiddenAncestor-input', 'input, visibility: hidden parent');
208 209
 	isNotTabbable('#visibilityHiddenAncestor-span', 'span with tabindex, visibility: hidden parent');
209 210
 	
210 211
 	isNotTabbable('#displayNone-input', 'input, display: none');
211  
-	// fails: element hidden by parent-visibility-hidden is still visible according to :visible
212 212
 	isNotTabbable('#visibilityHidden-input', 'input, visibility: hidden');
213 213
 	
214 214
 	isNotTabbable('#displayNone-span', 'span with tabindex, display: none');
215 215
 	isNotTabbable('#visibilityHidden-span', 'span with tabindex, visibility: hidden');
216 216
 });
217 217
 
218  
-test("Tabbable -  natively tabbable with various tabindex", function() {
  218
+test("tabbable -  natively tabbable with various tabindex", function() {
219 219
 	expect(4);
220 220
 	
221 221
 	isTabbable('#inputTabindex0', 'input, tabindex 0');
@@ -224,7 +224,7 @@ test("Tabbable -  natively tabbable with various tabindex", function() {
224 224
 	isNotTabbable('#inputTabindex-50', 'input, tabindex -50');
225 225
 });
226 226
 
227  
-test("Tabbable -  not natively tabbable with various tabindex", function() {
  227
+test("tabbable -  not natively tabbable with various tabindex", function() {
228 228
 	expect(4);
229 229
 	
230 230
 	isTabbable('#spanTabindex0', 'span, tabindex 0');
@@ -233,7 +233,7 @@ test("Tabbable -  not natively tabbable with various tabindex", function() {
233 233
 	isNotTabbable('#spanTabindex-50', 'span, tabindex -50');
234 234
 });
235 235
 
236  
-test("Tabbable - invalid tabindex", function() {
  236
+test("tabbable - invalid tabindex", function() {
237 237
 	expect(4);
238 238
 	
239 239
 	isTabbable('#inputTabindexfoo', 'input, tabindex foo');
@@ -242,4 +242,12 @@ test("Tabbable - invalid tabindex", function() {
242 242
 	isNotTabbable('#spanTabindex3foo', 'span, tabindex 3foo');
243 243
 });
244 244
 
  245
+test("tabbable - area elements", function() {
  246
+	isNotTabbable('#areaCoordsNoHref', 'coords but no href');
  247
+	isTabbable('#areaCoordsHref', 'coords and href');
  248
+	isTabbable('#areaCoordsNoSizeHref', 'coords of zero px and href');
  249
+	isTabbable('#areaNoCoordsHref', 'href but no coords');
  250
+	isNotTabbable('#areaNoImg', 'not associated with an image');
  251
+});
  252
+
245 253
 })(jQuery);
25  ui/jquery.ui.core.js
@@ -231,6 +231,13 @@ $.each( [ "Width", "Height" ], function( i, name ) {
231 231
 });
232 232
 
233 233
 //Additional selectors
  234
+function visible( element ) {
  235
+	return !$(element).parents().andSelf().filter(function() {
  236
+		return $.curCSS( this, "visibility" ) === "hidden" ||
  237
+			$.expr.filters.hidden( this );
  238
+	}).length;
  239
+}
  240
+
234 241
 $.extend($.expr[':'], {
235 242
 	data: function(elem, i, match) {
236 243
 		return !!$.data(elem, match[3]);
@@ -239,17 +246,23 @@ $.extend($.expr[':'], {
239 246
 	focusable: function(element) {
240 247
 		var nodeName = element.nodeName.toLowerCase(),
241 248
 			tabIndex = $.attr(element, 'tabindex');
  249
+		if ( "area" === nodeName ) {
  250
+			var map = element.parentNode,
  251
+				mapName = map.name,
  252
+				img;
  253
+			if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) {
  254
+				return false;
  255
+			}
  256
+			img = $( "img[usemap=#" + mapName + "]" )[0];
  257
+			return !!img && visible( img );
  258
+		}
242 259
 		return (/input|select|textarea|button|object/.test(nodeName)
243 260
 			? !element.disabled
244  
-			: 'a' == nodeName || 'area' == nodeName
  261
+			: 'a' == nodeName
245 262
 				? element.href || !isNaN(tabIndex)
246 263
 				: !isNaN(tabIndex))
247 264
 			// the element and all of its ancestors must be visible
248  
-			// the browser may report that the area is hidden
249  
-			&& !$(element).parents().andSelf().filter(function() {
250  
-				return $.curCSS( this, "visibility" ) === "hidden" ||
251  
-					$.expr.filters.hidden( this );
252  
-			}).length;
  265
+			&& visible( element );
253 266
 	},
254 267
 
255 268
 	tabbable: function(element) {

0 notes on commit fe13fba

Please sign in to comment.
Something went wrong with that request. Please try again.