Core: Remove ancestor visibility requirement from `:focusable` selector

* Check computed visibility in addition to :visible
* Add tests for nested visibility override

Fixes #14596
Closes gh-1583

diff --git a/tests/unit/core/core.html b/tests/unit/core/core.html
index 366eecebe78d06a5e4a154d28aad42b0095a3c90..5a089aa7b3444c924c67392b5731c2c5cf1c279c 100644 (file)
--- a/tests/unit/core/core.html
+++ b/tests/unit/core/core.html
@@ -80,6 +80,11 @@
        <div id="visibilityHiddenAncestor" style="visibility: hidden;">
                <input id="visibilityHiddenAncestor-input">
                <span tabindex="1" id="visibilityHiddenAncestor-span">.</span>
+
+               <span id="nestedVisibilityOverrideAncestor" style="visibility: visible">
+                       <input id="nestedVisibilityOverrideAncestor-input">
+                       <span tabindex="1" id="nestedVisibilityOverrideAncestor-span">.</span>
+               </span>
        </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 c0a0f48880dc07ecf7fe73da5e5b166b24f85390..ffae7e024c4a83c32081d1c85920af95536dd1aa 100644 (file)
--- a/tests/unit/core/selector.js
+++ b/tests/unit/core/selector.js
@@ -125,7 +125,7 @@ test( "focusable - disabled elements", function() {
 } );
 
 test( "focusable - hidden styles", function() {
-       expect( 8 );
+       expect( 10 );
 
        isNotFocusable( "#displayNoneAncestor-input", "input, display: none parent" );
        isNotFocusable( "#displayNoneAncestor-span", "span with tabindex, display: none parent" );
@@ -133,6 +133,9 @@ test( "focusable - hidden styles", function() {
        isNotFocusable( "#visibilityHiddenAncestor-input", "input, visibility: hidden parent" );
        isNotFocusable( "#visibilityHiddenAncestor-span", "span with tabindex, visibility: hidden parent" );
 
+       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( "#displayNone-input", "input, display: none" );
        isNotFocusable( "#visibilityHidden-input", "input, visibility: hidden" );
 
@@ -210,7 +213,7 @@ test( "tabbable - disabled elements", function() {
 } );
 
 test( "tabbable - hidden styles", function() {
-       expect( 8 );
+       expect( 10 );
 
        isNotTabbable( "#displayNoneAncestor-input", "input, display: none parent" );
        isNotTabbable( "#displayNoneAncestor-span", "span with tabindex, display: none parent" );
@@ -218,6 +221,9 @@ test( "tabbable - hidden styles", function() {
        isNotTabbable( "#visibilityHiddenAncestor-input", "input, visibility: hidden parent" );
        isNotTabbable( "#visibilityHiddenAncestor-span", "span with tabindex, visibility: hidden parent" );
 
+       isTabbable( "#nestedVisibilityOverrideAncestor-input", "input, visibility: visible parent but visibility: hidden grandparent" );
+       isTabbable( "#nestedVisibilityOverrideAncestor-span", "span with tabindex, visibility: visible parent but visibility: hidden grandparent " );
+
        isNotTabbable( "#displayNone-input", "input, display: none" );
        isNotTabbable( "#visibilityHidden-input", "input, visibility: hidden" );
 

diff --git a/ui/focusable.js b/ui/focusable.js
index a50598cd4eaa1539a4d109b2c53f853cf1e2a61e..942f0fed3620de7d2311cf56bf9bb03e52543965 100644 (file)
--- a/ui/focusable.js
+++ b/ui/focusable.js
@@ -34,26 +34,17 @@ $.ui.focusable = function( element, hasTabindex ) {
                if ( !element.href || !mapName || map.nodeName.toLowerCase() !== "map" ) {
                        return false;
                }
-               img = $( "img[usemap='#" + mapName + "']" )[ 0 ];
-               return !!img && visible( img );
+               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 ) &&
-
-               // The element and all of its ancestors must be visible
-               visible( element );
+               $( element ).is( ":visible" ) && $( element ).css( "visibility" ) === "visible";
 };
 
-function visible( element ) {
-       return $.expr.filters.visible( element ) &&
-               !$( element ).parents().addBack().filter( function() {
-                       return $.css( this, "visibility" ) === "hidden";
-               } ).length;
-}
-
 $.extend( $.expr[ ":" ], {
        focusable: function( element ) {
                return $.ui.focusable( element, $.attr( element, "tabindex" ) != null );