Core: Check computed visibility in addition to :visible

* Correct assertions according to fixed condition
* Core: Add tests for nested visibility override

Author: westonruter

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>

tests/unit/core/selector.js

@@ -125,19 +125,22 @@ 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" );
 
-	isFocusable( "#visibilityHiddenAncestor-input", "input, visibility: hidden parent" );
-	isFocusable( "#visibilityHiddenAncestor-span", "span with tabindex, visibility: hidden parent" );
+	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" );
-	isFocusable( "#visibilityHidden-input", "input, visibility: hidden" );
+	isNotFocusable( "#visibilityHidden-input", "input, visibility: hidden" );
 
 	isNotFocusable( "#displayNone-span", "span with tabindex, display: none" );
-	isFocusable( "#visibilityHidden-span", "span with tabindex, visibility: hidden" );
+	isNotFocusable( "#visibilityHidden-span", "span with tabindex, visibility: hidden" );
 });
 
 test( "focusable - natively focusable with various tabindex", function() {
@@ -210,19 +213,22 @@ 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" );
 
-	isTabbable( "#visibilityHiddenAncestor-input", "input, visibility: hidden parent" );
-	isTabbable( "#visibilityHiddenAncestor-span", "span with tabindex, visibility: hidden parent" );
+	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" );
-	isTabbable( "#visibilityHidden-input", "input, visibility: hidden" );
+	isNotTabbable( "#visibilityHidden-input", "input, visibility: hidden" );
 
 	isNotTabbable( "#displayNone-span", "span with tabindex, display: none" );
-	isTabbable( "#visibilityHidden-span", "span with tabindex, visibility: hidden" );
+	isNotTabbable( "#visibilityHidden-span", "span with tabindex, visibility: hidden" );
 });
 
 test( "tabbable -  natively tabbable with various tabindex", function() {

ui/focusable.js

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