- - - - - - - - - anchor - anchor +

+ + + + + + + + + +

+ anchor + anchor + + + + + +

+ +

- - - - - - - - + +

+ + + + + + + + +

- - anchor + +

+ -

- - anchor + +

+ +

- - + + + + + +

- - - - + +

+ + + + + + + + +

+ +

+ + + + + +

diff --git a/tests/unit/core/core.js b/tests/unit/core/core.js index 4be475486..53f392370 100644 --- a/tests/unit/core/core.js +++ b/tests/unit/core/core.js @@ -3,56 +3,6 @@ */ (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'); -}); - module('jQuery extensions'); test("attr - aria", function() { diff --git a/tests/unit/core/selector.js b/tests/unit/core/selector.js new file mode 100644 index 000000000..73df0c3fc --- /dev/null +++ b/tests/unit/core/selector.js @@ -0,0 +1,184 @@ +/* + * core unit tests + */ +(function($) { + +module("selectors"); + +function isFocusable(selector, msg) { + ok($(selector).is(':focusable'), msg); +} + +function isNotFocusable(selector, msg) { + 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); + + isFocusable('#visibleAncestor-inputTypeNone', 'input, no type'); + isFocusable('#visibleAncestor-inputTypeText', 'input, type text'); + isFocusable('#visibleAncestor-inputTypeCheckbox', 'input, type checkbox'); + isFocusable('#visibleAncestor-inputTypeRadio', 'input, type radio'); + isFocusable('#visibleAncestor-inputTypeButton', 'input, type button'); + isNotFocusable('#visibleAncestor-inputTypeHidden', 'input, type hidden'); + isFocusable('#visibleAncestor-button', 'button'); + isFocusable('#visibleAncestor-select', 'select'); + isFocusable('#visibleAncestor-textarea', 'textarea'); + isFocusable('#visibleAncestor-object', 'object'); + isFocusable('#visibleAncestor-anchorWithHref', 'anchor with href'); + isNotFocusable('#visibleAncestor-anchorWithoutHref', 'anchor without href'); + 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'); + isFocusable("#visibleAncestor-divWithNegativeTabindex", 'div with tabindex'); +}); + +test("focusable - disabled elements", function() { + expect(9); + + isNotFocusable('#disabledElement-inputTypeNone', 'input, no type'); + isNotFocusable('#disabledElement-inputTypeText', 'input, type text'); + isNotFocusable('#disabledElement-inputTypeCheckbox', 'input, type checkbox'); + isNotFocusable('#disabledElement-inputTypeRadio', 'input, type radio'); + isNotFocusable('#disabledElement-inputTypeButton', 'input, type button'); + isNotFocusable('#disabledElement-inputTypeHidden', 'input, type hidden'); + isNotFocusable('#disabledElement-button', 'button'); + isNotFocusable('#disabledElement-select', 'select'); + isNotFocusable('#disabledElement-textarea', 'textarea'); +}); + +test("focusable - hidden styles", function() { + expect(8); + + isNotFocusable('#displayNoneAncestor-input', 'input, display: none parent'); + isNotFocusable('#displayNoneAncestor-span', 'span with tabindex, display: none parent'); + + isNotFocusable('#visibilityHiddenAncestor-input', 'input, visibility: hidden parent'); + isNotFocusable('#visibilityHiddenAncestor-span', 'span with tabindex, visibility: hidden parent'); + + isNotFocusable('#displayNone-input', 'input, display: none'); + isNotFocusable('#visibilityHidden-input', 'input, visibility: hidden'); + + isNotFocusable('#displayNone-span', 'span with tabindex, display: none'); + isNotFocusable('#visibilityHidden-span', 'span with tabindex, visibility: hidden'); +}); + +test("focusable - natively tabbable with various tabindex", function() { + expect(4); + + isFocusable('#inputTabindex0', 'input, tabindex 0'); + isFocusable('#inputTabindex10', 'input, tabindex 10'); + isFocusable('#inputTabindex-1', 'input, tabindex -1'); + isFocusable('#inputTabindex-50', 'input, tabindex -50'); +}); + +test("focusable - not natively tabbable with various tabindex", function() { + expect(4); + + isFocusable('#spanTabindex0', 'span, tabindex 0'); + isFocusable('#spanTabindex10', 'span, tabindex 10'); + isFocusable('#spanTabindex-1', 'span, tabindex -1'); + isFocusable('#spanTabindex-50', 'span, tabindex -50'); +}); + +test("focusable - invalid tabindex", function() { + expect(4); + + isFocusable('#inputTabindexfoo', 'input, tabindex foo'); + isFocusable('#inputTabindex3foo', 'input, tabindex 3foo'); + isNotFocusable('#spanTabindexfoo', 'span tabindex foo'); + isNotFocusable('#spanTabindex3foo', 'span, tabindex 3foo'); +}); + +test("tabbable - visible, enabled elements", function() { + expect(18); + + 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'); + 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() { + expect(9); + + 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(8); + + isNotTabbable('#displayNoneAncestor-input', 'input, display: none parent'); + isNotTabbable('#displayNoneAncestor-span', 'span with tabindex, display: none parent'); + + 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 - natively tabbable with various tabindex", function() { + expect(4); + + isTabbable('#inputTabindex0', 'input, tabindex 0'); + isTabbable('#inputTabindex10', 'input, tabindex 10'); + isNotTabbable('#inputTabindex-1', 'input, tabindex -1'); + isNotTabbable('#inputTabindex-50', 'input, tabindex -50'); +}); + +test("Tabbable - not natively tabbable with various tabindex", function() { + expect(4); + + isTabbable('#spanTabindex0', 'span, tabindex 0'); + isTabbable('#spanTabindex10', 'span, tabindex 10'); + isNotTabbable('#spanTabindex-1', 'span, tabindex -1'); + isNotTabbable('#spanTabindex-50', 'span, tabindex -50'); +}); + +test("Tabbable - invalid tabindex", function() { + expect(4); + + isTabbable('#inputTabindexfoo', 'input, tabindex foo'); + isTabbable('#inputTabindex3foo', 'input, tabindex 3foo'); + isNotTabbable('#spanTabindexfoo', 'span tabindex foo'); + isNotTabbable('#spanTabindex3foo', 'span, tabindex 3foo'); +}); + +})(jQuery); diff --git a/ui/ui.core.js b/ui/ui.core.js index 7185ee38e..ce93ee778 100644 --- a/ui/ui.core.js +++ b/ui/ui.core.js @@ -199,30 +199,22 @@ $.extend($.expr[':'], { return !!$.data(elem, match[3]); }, - // TODO: add support for object, area - tabbable: function(elem) { - var nodeName = elem.nodeName.toLowerCase(); - function isVisible(element) { - return !($(element).is(':hidden') || $(element).parents(':hidden').length); - } - - return ( - // in tab order - elem.tabIndex >= 0 && - - ( // filter node types that participate in the tab order - - // anchor tag - ('a' == nodeName && elem.href) || - - // enabled form element - (/input|select|textarea|button/.test(nodeName) && - 'hidden' != elem.type && !elem.disabled) - ) && + focusable: function(element) { + var nodeName = element.nodeName.toLowerCase(), + tabIndex = $.attr(element, 'tabindex'); + return (/input|select|textarea|button|object/.test(nodeName) + ? !element.disabled + : 'a' == nodeName || 'area' == 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)['area' == nodeName ? 'parents' : 'closest'](':hidden').length; + }, - // visible on page - isVisible(elem) - ); + tabbable: function(element) { + var tabIndex = $.attr(element, 'tabindex'); + return (isNaN(tabIndex) || tabIndex >= 0) && $(element).is(':focusable'); } }); -- 2.39.5