Skip to content
Permalink
Browse files

Focusable: Fix handling of `visibility: inherit`

Ref #14596
Ref gh-1583
Closes gh-1605
  • Loading branch information...
scottgonzalez committed Sep 25, 2015
1 parent 0bfbd21 commit d3025968f349c37a8ca41bfc63ee1b37d9d7354f
Showing with 32 additions and 4 deletions.
  1. +11 −1 tests/unit/core/core.html
  2. +9 −2 tests/unit/core/selector.js
  3. +12 −1 ui/focusable.js
@@ -81,10 +81,20 @@
<input id="visibilityHiddenAncestor-input">
<span tabindex="1" id="visibilityHiddenAncestor-span">.</span>

<span id="nestedVisibilityOverrideAncestor" style="visibility: visible">
<span id="nestedVisibilityOverrideAncestor" style="visibility: visible;">
<input id="nestedVisibilityOverrideAncestor-input">
<span tabindex="1" id="nestedVisibilityOverrideAncestor-span">.</span>
</span>

<span tabIndex="1" id="nestedVisibilityInheritWithHiddenAncestor"
style="visibility: inherit;">.</span>
<input id="nestedVisibilityInheritWithHiddenAncestor-input" style="visibility: inherit;">
</div>

<div id="visibilityVisibleAncestor" style="visibility: visible;">
<span tabIndex="1" id="nestedVisibilityInheritWithVisibleAncestor"
style="visibility: inherit;">.</span>
<input id="nestedVisibilityInheritWithVisibleAncestor-input" style="visibility: inherit;">
</div>

<span tabindex="1" id="displayNone-span" style="display: none;">.</span>
@@ -88,7 +88,7 @@ test( "data", function() {
} );

test( "focusable - visible, enabled elements", function() {
expect( 18 );
expect( 20 );

isNotFocusable( "#formNoTabindex", "form" );
isFocusable( "#formTabindex", "form with tabindex" );
@@ -108,6 +108,10 @@ test( "focusable - visible, enabled elements", function() {
isNotFocusable( "#visibleAncestor-div", "div" );
isFocusable( "#visibleAncestor-spanWithTabindex", "span with tabindex" );
isFocusable( "#visibleAncestor-divWithNegativeTabindex", "div with tabindex" );
isFocusable( "#nestedVisibilityInheritWithVisibleAncestor",
"span, visibility: inherit inside visibility: visible parent" );
isFocusable( "#nestedVisibilityInheritWithVisibleAncestor-input",
"input, visibility: inherit inside visibility: visible parent" );
} );

test( "focusable - disabled elements", function() {
@@ -125,7 +129,7 @@ test( "focusable - disabled elements", function() {
} );

test( "focusable - hidden styles", function() {
expect( 10 );
expect( 12 );

isNotFocusable( "#displayNoneAncestor-input", "input, display: none parent" );
isNotFocusable( "#displayNoneAncestor-span", "span with tabindex, display: none parent" );
@@ -136,6 +140,9 @@ test( "focusable - hidden styles", function() {
isFocusable( "#nestedVisibilityOverrideAncestor-input", "input, visibility: visible parent but visibility: hidden grandparent" );
isFocusable( "#nestedVisibilityOverrideAncestor-span", "span with tabindex, visibility: visible parent but visibility: hidden grandparent " );

isNotFocusable( "#nestedVisibilityInheritWithHiddenAncestor", "span, visibility: inherit inside visibility: hidden parent" );
isNotFocusable( "#nestedVisibilityInheritWithHiddenAncestor-input", "input, visibility: inherit inside visibility: hidden parent" );

isNotFocusable( "#displayNone-input", "input, display: none" );
isNotFocusable( "#visibilityHidden-input", "input, visibility: hidden" );

@@ -42,9 +42,20 @@ $.ui.focusable = function( element, hasTabindex ) {
"a" === nodeName ?
element.href || hasTabindex :
hasTabindex ) &&
$( element ).is( ":visible" ) && $( element ).css( "visibility" ) === "visible";
$( element ).is( ":visible" ) && visible( $( element ) );
};

// Support: IE 8 only
// IE 8 doesn't resolve inherit to visible/hidden for computed values
function visible( element ) {
var visibility = element.css( "visibility" );
while ( visibility === "inherit" ) {
element = element.parent();
visibility = element.css( "visibility" );
}
return visibility !== "hidden";
}

$.extend( $.expr[ ":" ], {
focusable: function( element ) {
return $.ui.focusable( element, $.attr( element, "tabindex" ) != null );

0 comments on commit d302596

Please sign in to comment.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.