Focusable: Detect disabled fieldsets

Fixes #14970
Closes gh-1705
This commit is contained in:
Scott González 2016-05-25 08:37:28 -04:00
parent fbc79e1bda
commit 50d910b848
3 changed files with 39 additions and 9 deletions

View File

@ -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">

View File

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

View File

@ -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