Focusable: Fix handling of `visibility: inherit`

Ref #14596
Ref gh-1583
Closes gh-1605

diff --git a/tests/unit/core/core.html b/tests/unit/core/core.html
index 5a089aa7b3444c924c67392b5731c2c5cf1c279c..93f0156fd791a6c4842697434123e3bcf2b8f77d 100644 (file)
--- a/tests/unit/core/core.html
+++ b/tests/unit/core/core.html
@@ -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>

diff --git a/tests/unit/core/selector.js b/tests/unit/core/selector.js
index ffae7e024c4a83c32081d1c85920af95536dd1aa..52d1902ff4754d89788421886d2886a76d517b56 100644 (file)
--- a/tests/unit/core/selector.js
+++ b/tests/unit/core/selector.js
@@ -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" );
 

diff --git a/ui/focusable.js b/ui/focusable.js
index 942f0fed3620de7d2311cf56bf9bb03e52543965..6b7a0b1f163e34ad5ea96811f158e6bd8f42d4ac 100644 (file)
--- a/ui/focusable.js
+++ b/ui/focusable.js
@@ -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 );