Focusable: Detect disabled fieldsets

Fixes #14970
Closes gh-1705

Author: scottgonzalez

tests/unit/core/core.html

@@ -38,6 +38,15 @@
 	<input>
 </form>
 
+<form>
+	<fieldset id="enabledFieldset">
+		<input>
+	</fieldset>
+	<fieldset id="disabledFieldset" disabled="disabled">
+		<input>
+	</fieldset>
+</form>
+
 <div>
 	<input id="visibleAncestor-inputTypeNone">
 	<input type="text" id="visibleAncestor-inputTypeText">

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" );

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