mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
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
This commit is contained in:
Scott González
parent
54eccb6b04
commit
0b771b43c6
71
tests/core.html
Normal file
71
tests/core.html
Normal file
@ -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>
|
||||
56
tests/core.js
Normal file
56
tests/core.js
Normal file
@ -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);
|
||||
@ -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 &&
|
||||
|
||||
( // filter node types that participate in the tab order
|
||||
|
||||
( // node type participates in 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)
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user