Focusable: Fix handling of `visibility: inherit`

Ref #14596
Ref gh-1583
Closes gh-1605

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>

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" );

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 );