jquery / jquery-ui

Source
Commits
Network (212)
Graphs
Tree: fe13fba

The official jQuery user interface library. — Read more

This URL has Read+Write access

Core: Better support for areas in :focusable and :tabbable selectors. Partial fix for #4488 - :focusable and :tabbable are broken with jQuery 1.3.2.

scottgonzalez (author)

Thu Jul 22 07:33:42 -0700 2010

commit fe13fbadd45b59fb67ce
tree aad597bb9672e623bd7f
parent 4deb824699b025d74d68

M	tests/unit/core/core.html	15 ••••
M	tests/unit/core/selector.js	38 ••••
M	ui/jquery.ui.core.js	25 ••••

tests/unit/core/core.html

View file @ fe13fba

@@ -42,6 +42,17 @@
 
 <div id="main" style="position: absolute; top: -10000px; left: -10000px;">
 
+  <img src="images/jqueryui_32x32.png" usemap="#mymap" width="10", height="10">
+  <map name="mymap">
+    <area shape="rect" coords="0,0,1,1" id="areaCoordsNoHref">
+    <area shape="rect" coords="1,1,2,2" href="foo.html" id="areaCoordsHref">
+    <area shape="rect" coords="0,0,0,0" href="foo.html" id="areaCoordsNoSizeHref">
+    <area href="foo.html" id="areaNoCoordsHref">
+  </map>
+  <map name="mymap2">
+    <area shape="rect" coords="1,1,2,2" href="foo.html" id="areaNoImg">
+  </map>
+  
   <div>
     <input id="visibleAncestor-inputTypeNone" />
     <input type="text" id="visibleAncestor-inputTypeText" />
@@ -57,10 +68,6 @@
     <object id="visibleAncestor-object">xxx</object>
     <a href="#" id="visibleAncestor-anchorWithHref">anchor</a>
     <a id="visibleAncestor-anchorWithoutHref">anchor</a>
-    <map>
-      <area href="#" id="visibleAncestor-areaWithHref" alt="" />
-      <area id="visibleAncestor-areaWithoutHref" alt="" />
-    </map>
     <span id="visibleAncestor-span">x</span>
     <div id="visibleAncestor-div">x</div>
     <span id="visibleAncestor-spanWithTabindex" tabindex="1">x</span>

tests/unit/core/selector.js

View file @ fe13fba

          
@@ -79,7 +79,7 @@ test("data", function() {

 });

 test("focusable - visible, enabled elements", function() {

-  expect(18);

+  expect(16);

   isFocusable('#visibleAncestor-inputTypeNone', 'input, no type');

   isFocusable('#visibleAncestor-inputTypeText', 'input, type text');

@@ -93,9 +93,6 @@ test("focusable - visible, enabled elements", function() {

   isFocusable('#visibleAncestor-object', 'object');

   isFocusable('#visibleAncestor-anchorWithHref', 'anchor with href');

   isNotFocusable('#visibleAncestor-anchorWithoutHref', 'anchor without href');

-  // fails: $("map").is(":visible") and $("map").is(":hidden") both return true

-  isFocusable('#visibleAncestor-areaWithHref', 'area with href');

-  isNotFocusable('#visibleAncestor-areaWithoutHref', 'area without href');

   isNotFocusable('#visibleAncestor-span', 'span');

   isNotFocusable('#visibleAncestor-div', 'div');

   isFocusable("#visibleAncestor-spanWithTabindex", 'span with tabindex');

@@ -159,8 +156,16 @@ test("focusable - invalid tabindex", function() {

   isNotFocusable('#spanTabindex3foo', 'span, tabindex 3foo');

 });

+test("focusable - area elements", function() {

+  isNotFocusable('#areaCoordsNoHref', 'coords but no href');

+  isFocusable('#areaCoordsHref', 'coords and href');

+  isFocusable('#areaCoordsNoSizeHref', 'coords of zero px and href');

+  isFocusable('#areaNoCoordsHref', 'href but no coords');

+  isNotFocusable('#areaNoImg', 'not associated with an image');

+});

+

 test("tabbable - visible, enabled elements", function() {

-  expect(18);

+  expect(16);

   isTabbable('#visibleAncestor-inputTypeNone', 'input, no type');

   isTabbable('#visibleAncestor-inputTypeText', 'input, type text');

@@ -174,16 +179,13 @@ test("tabbable - visible, enabled elements", function() {

   isTabbable('#visibleAncestor-object', 'object');

   isTabbable('#visibleAncestor-anchorWithHref', 'anchor with href');

   isNotTabbable('#visibleAncestor-anchorWithoutHref', 'anchor without href');

-  // fails: $("map").is(":visible") and $("map").is(":hidden") both return true

-  isTabbable('#visibleAncestor-areaWithHref', 'area with href');

-  isNotTabbable('#visibleAncestor-areaWithoutHref', 'area without href');

   isNotTabbable('#visibleAncestor-span', 'span');

   isNotTabbable('#visibleAncestor-div', 'div');

   isTabbable("#visibleAncestor-spanWithTabindex", 'span with tabindex');

   isNotTabbable("#visibleAncestor-divWithNegativeTabindex", 'div with tabindex');

 });

-test("Tabbable - disabled elements", function() {

+test("tabbable - disabled elements", function() {

   expect(9);

   isNotTabbable('#disabledElement-inputTypeNone', 'input, no type');

@@ -197,25 +199,23 @@ test("Tabbable - disabled elements", function() {

   isNotTabbable('#disabledElement-textarea', 'textarea');

 });

-test("Tabbable - hidden styles", function() {

+test("tabbable - hidden styles", function() {

   expect(8);

   isNotTabbable('#displayNoneAncestor-input', 'input, display: none parent');

   isNotTabbable('#displayNoneAncestor-span', 'span with tabindex, display: none parent');

-  // fails: element hidden by parent-visibility-hidden is still visible according to :visible

   isNotTabbable('#visibilityHiddenAncestor-input', 'input, visibility: hidden parent');

   isNotTabbable('#visibilityHiddenAncestor-span', 'span with tabindex, visibility: hidden parent');

   isNotTabbable('#displayNone-input', 'input, display: none');

-  // fails: element hidden by parent-visibility-hidden is still visible according to :visible

   isNotTabbable('#visibilityHidden-input', 'input, visibility: hidden');

   isNotTabbable('#displayNone-span', 'span with tabindex, display: none');

   isNotTabbable('#visibilityHidden-span', 'span with tabindex, visibility: hidden');

 });

-test("Tabbable -  natively tabbable with various tabindex", function() {

+test("tabbable -  natively tabbable with various tabindex", function() {

   expect(4);

   isTabbable('#inputTabindex0', 'input, tabindex 0');

@@ -224,7 +224,7 @@ test("Tabbable -  natively tabbable with various tabindex", function() {

   isNotTabbable('#inputTabindex-50', 'input, tabindex -50');

 });

-test("Tabbable -  not natively tabbable with various tabindex", function() {

+test("tabbable -  not natively tabbable with various tabindex", function() {

   expect(4);

   isTabbable('#spanTabindex0', 'span, tabindex 0');

@@ -233,7 +233,7 @@ test("Tabbable -  not natively tabbable with various tabindex", function() {

   isNotTabbable('#spanTabindex-50', 'span, tabindex -50');

 });

-test("Tabbable - invalid tabindex", function() {

+test("tabbable - invalid tabindex", function() {

   expect(4);

   isTabbable('#inputTabindexfoo', 'input, tabindex foo');

@@ -242,4 +242,12 @@ test("Tabbable - invalid tabindex", function() {

   isNotTabbable('#spanTabindex3foo', 'span, tabindex 3foo');

 });

+test("tabbable - area elements", function() {

+  isNotTabbable('#areaCoordsNoHref', 'coords but no href');

+  isTabbable('#areaCoordsHref', 'coords and href');

+  isTabbable('#areaCoordsNoSizeHref', 'coords of zero px and href');

+  isTabbable('#areaNoCoordsHref', 'href but no coords');

+  isNotTabbable('#areaNoImg', 'not associated with an image');

+});

+

 })(jQuery);

ui/jquery.ui.core.js

View file @ fe13fba

@@ -231,6 +231,13 @@ $.each( [ "Width", "Height" ], function( i, name ) {
 });
 
 //Additional selectors
+function visible( element ) {
+  return !$(element).parents().andSelf().filter(function() {
+    return $.curCSS( this, "visibility" ) === "hidden" ||
+      $.expr.filters.hidden( this );
+  }).length;
+}
+
 $.extend($.expr[':'], {
   data: function(elem, i, match) {
     return !!$.data(elem, match[3]);
@@ -239,17 +246,23 @@ $.extend($.expr[':'], {
   focusable: function(element) {
     var nodeName = element.nodeName.toLowerCase(),
       tabIndex = $.attr(element, 'tabindex');
+    if ( "area" === nodeName ) {
+      var map = element.parentNode,
+        mapName = map.name,
+        img;
+      if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) {
+        return false;
+      }
+      img = $( "img[usemap=#" + mapName + "]" )[0];
+      return !!img && visible( img );
+    }
     return (/input|select|textarea|button|object/.test(nodeName)
       ? !element.disabled
-      : 'a' == nodeName || 'area' == nodeName
+      : 'a' == nodeName
         ? element.href || !isNaN(tabIndex)
         : !isNaN(tabIndex))
       // the element and all of its ancestors must be visible
-      // the browser may report that the area is hidden
-      && !$(element).parents().andSelf().filter(function() {
-        return $.curCSS( this, "visibility" ) === "hidden" ||
-          $.expr.filters.hidden( this );
-      }).length;
+      && visible( element );
   },
 
   tabbable: function(element) {

0 notes on commit `fe13fba` Show line notes below

Please log in to comment.

...	...	@@ -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);

...	...	@@ -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) {

...	...	@@ -42,6 +42,17 @@
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 @@
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>

jquery / jquery-ui

0 notes on commit fe13fba Show line notes below

Your current locale selection: English. Choose another?

0 notes on commit `fe13fba` Show line notes below