r1699 - in branches/experimental/tabbable: . tests
Author: scott.gonzalez
Date: Mon Jan 19 17:54:54 2009
New Revision: 1699
Modified:
branches/experimental/tabbable/tests/core.html
branches/experimental/tabbable/tests/core.js
branches/experimental/tabbable/ui.core.js
Log:
Tabbable: New :tabbable tests.
Modified: branches/experimental/tabbable/tests/core.html
==============================================================================
--- branches/experimental/tabbable/tests/core.html (original)
+++ branches/experimental/tabbable/tests/core.html Mon Jan 19 17:54:54 2009
@@ -46,7 +46,7 @@
<span id="visibleAncestor-span"></span>
<div id="visibleAncestor-div"></div>
<span id="visibleAncestor-spanWithTabindex" tabindex="1"></span>
- <div id="visibleAncestor-divWithTabindex" tabindex="-1"></div>
+ <div id="visibleAncestor-divWithNegativeTabindex" tabindex="-1"></div>
</div>
<div>
Modified: branches/experimental/tabbable/tests/core.js
==============================================================================
--- branches/experimental/tabbable/tests/core.js (original)
+++ branches/experimental/tabbable/tests/core.js Mon Jan 19 17:54:54 2009
@@ -13,6 +13,14 @@
ok($(selector).length && !$(selector).is(':focusable'), msg);
}
+function isTabbable(selector, msg) {
+ ok($(selector).is(':tabbable'), msg);
+}
+
+function isNotTabbable(selector, msg) {
+ ok($(selector).length && !$(selector).is(':tabbable'), msg);
+}
+
test("focusable - visible, enabled elements", function() {
expect(18);
@@ -33,7 +41,7 @@
isNotFocusable('#visibleAncestor-span', 'span');
isNotFocusable('#visibleAncestor-div', 'div');
isFocusable("#visibleAncestor-spanWithTabindex", 'span with tabindex');
- isFocusable("#visibleAncestor-divWithTabindex", 'div with tabindex');
+ isFocusable("#visibleAncestor-divWithNegativeTabindex", 'div with
tabindex');
});
test("focusable - disabled elements", function() {
@@ -93,79 +101,84 @@
isNotFocusable('#spanTabindex3foo', 'span, tabindex 3foo');
});
-
-test("tabbable - enabled elements", function() {
- expect(10);
+test("tabbable - visible, enabled elements", function() {
+ expect(18);
- 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');
+ isTabbable('#visibleAncestor-inputTypeNone', 'input, no type');
+ isTabbable('#visibleAncestor-inputTypeText', 'input, type text');
+ isTabbable('#visibleAncestor-inputTypeCheckbox', 'input, type checkbox');
+ isTabbable('#visibleAncestor-inputTypeRadio', 'input, type radio');
+ isTabbable('#visibleAncestor-inputTypeButton', 'input, type button');
+ isNotTabbable('#visibleAncestor-inputTypeHidden', 'input, type hidden');
+ isTabbable('#visibleAncestor-button', 'button');
+ isTabbable('#visibleAncestor-select', 'select');
+ isTabbable('#visibleAncestor-textarea', 'textarea');
+ isTabbable('#visibleAncestor-object', 'object');
+ isTabbable('#visibleAncestor-anchorWithHref', 'anchor with href');
+ isNotTabbable('#visibleAncestor-anchorWithoutHref', 'anchor without
href');
+ isNotTabbable('#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() {
- expect(8);
+test("Tabbable - disabled elements", function() {
+ expect(9);
- 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');
+ isNotTabbable('#disabledElement-inputTypeNone', 'input, no type');
+ isNotTabbable('#disabledElement-inputTypeText', 'input, type text');
+ isNotTabbable('#disabledElement-inputTypeCheckbox', 'input, type
checkbox');
+ isNotTabbable('#disabledElement-inputTypeRadio', 'input, type radio');
+ isNotTabbable('#disabledElement-inputTypeButton', 'input, type button');
+ isNotTabbable('#disabledElement-inputTypeHidden', 'input, type hidden');
+ isNotTabbable('#disabledElement-button', 'button');
+ isNotTabbable('#disabledElement-select', 'select');
+ isNotTabbable('#disabledElement-textarea', 'textarea');
});
-test("tabbable - hidden styles", function() {
- expect(6);
+test("Tabbable - hidden styles", function() {
+ expect(8);
+
+ isNotTabbable('#displayNoneAncestor-input', 'input, display: none
parent');
+ isNotTabbable('#displayNoneAncestor-span', 'span with tabindex, display:
none parent');
- 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');
+ isNotTabbable('#visibilityHiddenAncestor-input', 'input, visibility:
hidden parent');
+ isNotTabbable('#visibilityHiddenAncestor-span', 'span with tabindex,
visibility: hidden parent');
+
+ isNotTabbable('#displayNone-input', 'input, display: none');
+ isNotTabbable('#visibilityHidden-input', 'input, visibility: hidden');
+
+ isNotTabbable('#displayNone-span', 'span with tabindex, display: none');
+ isNotTabbable('#visibilityHidden-span', 'span with tabindex, visibility:
hidden');
});
-test("tabbable - tabindex", function() {
+test("Tabbable - natively tabbable with various 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');
+ isTabbable('#inputTabindex0', 'input, tabindex 0');
+ isTabbable('#inputTabindex10', 'input, tabindex 10');
+ isNotTabbable('#inputTabindex-1', 'input, tabindex -1');
+ isNotTabbable('#inputTabindex-50', 'input, tabindex -50');
});
-test("tabbable - natively tabbable with various tabindex", function() {
+test("Tabbable - not natively tabbable with various 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');
-});
-
-test("tabbable - not natively tabbable with tabindex", function() {
- expect(5);
- ok( $('#div5-1').is(':tabbable'), 'div, tabindex 0');
- ok( $('#div5-2').is(':tabbable'), 'div, tabindex 10');
- ok(!$('#div5-3').is(':tabbable'), 'div, tabindex -1');
- ok(!$('#div5-4').is(':tabbable'), 'div, tabindex -50');
- ok(!$('#div5-5').is(':tabbable'), 'div, - display: none tabindex 10');
+
+ isTabbable('#spanTabindex0', 'span, tabindex 0');
+ isTabbable('#spanTabindex10', 'span, tabindex 10');
+ isNotTabbable('#spanTabindex-1', 'span, tabindex -1');
+ isNotTabbable('#spanTabindex-50', 'span, tabindex -50');
});
-test("tabbable - wrong or without tabindex", function() {
+test("Tabbable - invalid tabindex", function() {
expect(4);
- ok(!$('#div6-1').is(':tabbable'), 'div, without tabindex');
- ok(!$('#div6-2').is(':tabbable'), 'div, tabindex foo');
- //do we have to mess with this?
- ok(!$('#div6-3').is(':tabbable'), 'div, tabindex 3foo');
- ok($('#anchor6-4').is(':tabbable'), 'a, tabindex foo');
+
+ isTabbable('#inputTabindexfoo', 'input, tabindex foo');
+ isTabbable('#inputTabindex3foo', 'input, tabindex 3foo');
+ isNotTabbable('#spanTabindexfoo', 'span tabindex foo');
+ isNotTabbable('#spanTabindex3foo', 'span, tabindex 3foo');
});
})(jQuery);
Modified: branches/experimental/tabbable/ui.core.js
==============================================================================
--- branches/experimental/tabbable/ui.core.js (original)
+++ branches/experimental/tabbable/ui.core.js Mon Jan 19 17:54:54 2009
@@ -16,7 +16,9 @@
tabbable: function(element) {
var tabIndex = $.attr(element, 'tabindex');
- return (isNaN(tabIndex) || tabIndex >= 0) && $(element).is(':focusable');
+ return (isNaN(tabIndex) || tabIndex >= 0)
+ && $(element).is(':focusable')
+ && element.nodeName.toLowerCase() != 'area';
}
});