diff --git a/tests/unit/core/core.html b/tests/unit/core/core.html index 93f0156fd79..31a5bb579d5 100644 --- a/tests/unit/core/core.html +++ b/tests/unit/core/core.html @@ -38,6 +38,15 @@ +
+
+ +
+
+ +
+
+
diff --git a/tests/unit/core/selector.js b/tests/unit/core/selector.js index d452e43c9f5..29b8b129680 100644 --- a/tests/unit/core/selector.js +++ b/tests/unit/core/selector.js @@ -89,10 +89,12 @@ QUnit.test( "data", function( assert ) { } ); QUnit.test( "focusable - visible, enabled elements", function( assert ) { - assert.expect( 20 ); + assert.expect( 22 ); assert.isNotFocusable( "#formNoTabindex", "form" ); assert.isFocusable( "#formTabindex", "form with tabindex" ); + assert.isFocusable( "#enabledFieldset input", "input in enabled fieldset" ); + assert.isNotFocusable( "#disabledFieldset input", "input in disabled fieldset" ); assert.isFocusable( "#visibleAncestor-inputTypeNone", "input, no type" ); assert.isFocusable( "#visibleAncestor-inputTypeText", "input, type text" ); assert.isFocusable( "#visibleAncestor-inputTypeCheckbox", "input, type checkbox" ); @@ -184,10 +186,12 @@ QUnit.test( "focusable - dimensionless parent with overflow", function( assert ) } ); QUnit.test( "tabbable - visible, enabled elements", function( assert ) { - assert.expect( 18 ); + assert.expect( 20 ); assert.isNotTabbable( "#formNoTabindex", "form" ); assert.isTabbable( "#formTabindex", "form with tabindex" ); + assert.isTabbable( "#enabledFieldset input", "input in enabled fieldset" ); + assert.isNotTabbable( "#disabledFieldset input", "input in disabled fieldset" ); assert.isTabbable( "#visibleAncestor-inputTypeNone", "input, no type" ); assert.isTabbable( "#visibleAncestor-inputTypeText", "input, type text" ); assert.isTabbable( "#visibleAncestor-inputTypeCheckbox", "input, type checkbox" ); diff --git a/ui/focusable.js b/ui/focusable.js index b8355b96c98..cf4f728b8ab 100644 --- a/ui/focusable.js +++ b/ui/focusable.js @@ -26,8 +26,9 @@ // Selectors $.ui.focusable = function( element, hasTabindex ) { - var map, mapName, img, + var map, mapName, img, focusableIfVisible, fieldset, nodeName = element.nodeName.toLowerCase(); + if ( "area" === nodeName ) { map = element.parentNode; mapName = map.name; @@ -37,12 +38,28 @@ $.ui.focusable = function( element, hasTabindex ) { img = $( "img[usemap='#" + mapName + "']" ); return img.length > 0 && img.is( ":visible" ); } - return ( /^(input|select|textarea|button|object)$/.test( nodeName ) ? - !element.disabled : - "a" === nodeName ? - element.href || hasTabindex : - hasTabindex ) && - $( element ).is( ":visible" ) && visible( $( element ) ); + + if ( /^(input|select|textarea|button|object)$/.test( nodeName ) ) { + focusableIfVisible = !element.disabled; + + if ( focusableIfVisible ) { + + // Form controls within a disabled fieldset are disabled. + // However, controls within the fieldset's legend do not get disabled. + // Since controls generally aren't placed inside legends, we skip + // this portion of the check. + fieldset = $( element ).closest( "fieldset" )[ 0 ]; + if ( fieldset ) { + focusableIfVisible = !fieldset.disabled; + } + } + } else if ( "a" === nodeName ) { + focusableIfVisible = element.href || hasTabindex; + } else { + focusableIfVisible = hasTabindex; + } + + return focusableIfVisible && $( element ).is( ":visible" ) && visible( $( element ) ); }; // Support: IE 8 only