diff options
| author | Scott González <scott.gonzalez@gmail.com> | 2008-09-06 03:44:32 +0000 |
|---|---|---|
| committer | Scott González <scott.gonzalez@gmail.com> | 2008-09-06 03:44:32 +0000 |
| commit | 0b771b43c6aa28a9ccbcb23c826351ea10da5383 (patch) | |
| tree | 3c3283e819f044730d9f766603b2c3590702d555 | |
| parent | 54eccb6b04303cfaa27fbe3a3ddd1147e5220359 (diff) | |
| download | jquery-ui-0b771b43c6aa28a9ccbcb23c826351ea10da5383.tar.gz jquery-ui-0b771b43c6aa28a9ccbcb23c826351ea10da5383.zip | |
Core: Improved :tabbable selector
- check tabindex >= 0 instead of != -1
- check anchor tags for href
- check for hidden input types
- check styles (display and visibility; self and ancestors)
Added tests for :tabbable selector
| -rw-r--r-- | tests/core.html | 71 | ||||
| -rw-r--r-- | tests/core.js | 56 | ||||
| -rw-r--r-- | ui/ui.core.js | 30 |
3 files changed, 152 insertions, 5 deletions
diff --git a/tests/core.html b/tests/core.html new file mode 100644 index 000000000..58226598f --- /dev/null +++ b/tests/core.html @@ -0,0 +1,71 @@ +<!DOCTYPE html>
+<html lang="en">
+<head>
+ <title>jQuery UI Core Test Suite</title>
+
+ <link rel="stylesheet" href="qunit/testsuite.css" type="text/css" media="screen">
+ <!--link rel="stylesheet" href="../themes/flora/flora.dialog.css" type="text/css" media="screen"-->
+
+ <script type="text/javascript" src="../jquery-1.2.6.js"></script>
+ <script type="text/javascript" src="../ui/ui.core.js"></script>
+
+ <script type="text/javascript" src="qunit/testrunner.js"></script>
+ <script type="text/javascript" src="core.js"></script>
+
+ <style type="text/css">
+ html { border: 0; }
+ </style>
+</head>
+<body class="flora">
+
+<h1 id="header">jQuery UI Core Test Suite</h1>
+<h2 id="banner"></h2>
+<h2 id="userAgent"></h2>
+
+<ol id="tests"></ol>
+
+<div id="main" style="position: absolute; top: -10000px; border: 1px solid black; padding: 10px; margin: 10px;">
+ <div id="wrap1"> + <input id="input1-1" /> + <input type="text" id="input1-2" /> + <input type="checkbox" id="input1-3" /> + <input type="radio" id="input1-4" /> + <input type="button" id="input1-5" /> + <input type="hidden" id="input1-6" /> + <select id="input1-7"></select> + <textarea id="input1-8"></textarea> + <a href="#" id="anchor1-1">anchor</a> + <a id="anchor1-2">anchor</a> + </div> + <div id="wrap2"> + <input id="input2-1" disabled="disabled" /> + <input type="text" id="input2-2" disabled="disabled" /> + <input type="checkbox" id="input2-3" disabled="disabled" /> + <input type="radio" id="input2-4" disabled="disabled" /> + <input type="button" id="input2-5" disabled="disabled" /> + <input type="hidden" id="input2-6" disabled="disabled" /> + <select id="input2-7" disabled="disabled"></select> + <textarea id="input2-8" disabled="disabled"></textarea> + </div> + <div id="wrap3"> + <div id="wrap3-1" style="display: none;"> + <input id="input3-1" /> + <a href="#" id="anchor3-1">anchor</a> + </div> + <div id="wrap3-2" style="visibility: hidden;"> + <input id="input3-2" /> + <a href="#" id="anchor3-2">anchor</a> + </div> + <input id="input3-3" style="display: none;"> + <input id="input3-4" style="visibility: hidden;"> + </div> + <div id="wrap4"> + <input id="input4-1" tabindex="0" /> + <input id="input4-2" tabindex="10" /> + <input id="input4-3" tabindex="-1" /> + <input id="input4-4" tabindex="-50" /> + </div> +</div>
+
+</body>
+</html>
diff --git a/tests/core.js b/tests/core.js new file mode 100644 index 000000000..507b3e7cb --- /dev/null +++ b/tests/core.js @@ -0,0 +1,56 @@ +/*
+ * core unit tests
+ */
+(function($) {
+
+module("selectors");
+
+test("tabbable - enabled elements", function() {
+ expect(10);
+
+ ok( $('#input1-1').is(':tabbable'), 'input, no type');
+ ok( $('#input1-2').is(':tabbable'), 'input, type text');
+ ok( $('#input1-3').is(':tabbable'), 'input, type checkbox');
+ ok( $('#input1-4').is(':tabbable'), 'input, type radio');
+ ok( $('#input1-5').is(':tabbable'), 'input, type button');
+ ok(!$('#input1-6').is(':tabbable'), 'input, type hidden');
+ ok( $('#input1-7').is(':tabbable'), 'select');
+ ok( $('#input1-8').is(':tabbable'), 'textarea');
+ ok( $('#anchor1-1').is(':tabbable'), 'anchor with href');
+ ok(!$('#anchor1-2').is(':tabbable'), 'anchor without href');
+});
+
+test("tabbable - disabled elements", function() {
+ expect(8);
+
+ ok(!$('#input2-1').is(':tabbable'), 'input, no type');
+ ok(!$('#input2-2').is(':tabbable'), 'input, type text');
+ ok(!$('#input2-3').is(':tabbable'), 'input, type checkbox');
+ ok(!$('#input2-4').is(':tabbable'), 'input, type radio');
+ ok(!$('#input2-5').is(':tabbable'), 'input, type button');
+ ok(!$('#input2-6').is(':tabbable'), 'input, type hidden');
+ ok(!$('#input2-7').is(':tabbable'), 'select');
+ ok(!$('#input2-8').is(':tabbable'), 'textarea');
+});
+
+test("tabbable - hidden styles", function() {
+ expect(6);
+
+ ok(!$('#input3-1').is(':tabbable'), 'input, hidden wrapper - display: none');
+ ok(!$('#anchor3-1').is(':tabbable'), 'anchor, hidden wrapper - display: none');
+ ok(!$('#input3-2').is(':tabbable'), 'input, hidden wrapper - visibility: hidden');
+ ok(!$('#anchor3-2').is(':tabbable'), 'anchor, hidden wrapper - visibility: hidden');
+ ok(!$('#input3-3').is(':tabbable'), 'input, display: none');
+ ok(!$('#input3-4').is(':tabbable'), 'input, visibility: hidden');
+});
+
+test("tabbable - tabindex", function() {
+ expect(4);
+
+ ok( $('#input4-1').is(':tabbable'), 'input, tabindex 0');
+ ok( $('#input4-2').is(':tabbable'), 'input, tabindex 10');
+ ok(!$('#input4-3').is(':tabbable'), 'input, tabindex -1');
+ ok(!$('#input4-4').is(':tabbable'), 'input, tabindex -50');
+});
+
+})(jQuery);
diff --git a/ui/ui.core.js b/ui/ui.core.js index f4ffb74cb..8507bb193 100644 --- a/ui/ui.core.js +++ b/ui/ui.core.js @@ -17,6 +17,21 @@ $.fn.remove = function() { return _remove.apply(this, arguments ); }; +function isVisible(element) { + function checkStyles(element) { + var style = element.style; + return (style.display != 'none' && style.visibility != 'hidden'); + } + + var visible = checkStyles(element); + + (visible && $.each($.dir(element, 'parentNode'), function() { + return (visible = checkStyles(this)); + })); + + return visible; +} + $.extend($.expr[':'], { data: function(a, i, m) { return $.data(a, m[3]); @@ -28,15 +43,20 @@ $.extend($.expr[':'], { return ( // in tab order - a.tabIndex != -1 && + a.tabIndex >= 0 && - ( // node type participates in tab order + ( // filter node types that participate in the tab order + // anchor tag - ('a' == nodeName) || + ('a' == nodeName && a.href) || // enabled form element - (/input|select|textarea|button/.test(nodeName) && !a.disabled) - ) + (/input|select|textarea|button/.test(nodeName) && + 'hidden' != a.type && !a.disabled) + ) && + + // visible on page + isVisible(a) ); } }); |