Permalink
Browse files

Focusable: Fix handling of `visibility: inherit`

Ref #14596
Ref gh-1583
Closes gh-1605
  • Loading branch information...
1 parent 0bfbd21 commit d3025968f349c37a8ca41bfc63ee1b37d9d7354f @scottgonzalez scottgonzalez committed Sep 25, 2015
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" );
View
@@ -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.