From 0b771b43c6aa28a9ccbcb23c826351ea10da5383 Mon Sep 17 00:00:00 2001 From: Scott González Date: Sat, 6 Sep 2008 03:44:32 +0000 Subject: 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 --- tests/core.html | 71 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ tests/core.js | 56 +++++++++++++++++++++++++++++++++++++++++++++ ui/ui.core.js | 30 ++++++++++++++++++++---- 3 files changed, 152 insertions(+), 5 deletions(-) create mode 100644 tests/core.html create mode 100644 tests/core.js 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 @@ + + + + jQuery UI Core Test Suite + + + + + + + + + + + + + + +

jQuery UI Core Test Suite

+ +

+ +
    + +
    +
    + + + + + + + + + anchor + anchor +
    +
    + + + + + + + + +
    +
    + + + + +
    +
    + + + + +
    +
    + + + 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) ); } }); -- cgit v1.2.3