Focusable: Fix handling of `visibility: collapse`

"collapse" is similar to "hidden", with a slight difference in the case of tr/tbody/td/colgroup elements. See https://www.w3.org/TR/CSS22/visufx.html#visibility See https://www.w3.org/TR/CSS22/tables.html#dynamic-effects See https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#Table_example "visibility: collapse" elements are always not focusable, though. Commit d302596 introduced a regression by testing with `!== "hidden"` instead of `=== "visible"`. Closes gh-1843
jquery · Oct 14, 2020 · f5d38e2e05bd54073c2bf8e8210b78b2cf2637d8 · f5d38e2
1 parent bfffac3
commit f5d38e2e05bd54073c2bf8e8210b78b2cf2637d8
Unified Split

Showing with 14 additions and 2 deletions.

+8 −0 tests/unit/core/core.html

+5 −1 tests/unit/core/selector.js

+1 −1 ui/focusable.js
diff --git a/tests/unit/core/core.html b/tests/unit/core/core.html
@@ -108,9 +108,17 @@
 
 	<span tabindex="1" id="displayNone-span" style="display: none;">.</span>
 	<span tabindex="1" id="visibilityHidden-span" style="visibility: hidden;">.</span>
+	<span tabindex="1" id="visibilityCollapse-span" style="visibility: collapse;">.</span>
 
 	<input id="displayNone-input" style="display: none;">
 	<input id="visibilityHidden-input" style="visibility: hidden;">
+	<input id="visibilityCollapse-input" style="visibility: collapse;">
+
+	<table>
+		<tr>
+			<td tabindex="1" id="visibilityCollapse-td" style="visibility: collapse;">.</td>
+		</tr>
+	</table>
 </div>
 
 <div>

diff --git a/tests/unit/core/selector.js b/tests/unit/core/selector.js
@@ -133,7 +133,7 @@ QUnit.test( "focusable - disabled elements", function( assert ) {
 } );
 
 QUnit.test( "focusable - hidden styles", function( assert ) {
-	assert.expect( 12 );
+	assert.expect( 15 );
 
 	assert.isNotFocusable( "#displayNoneAncestor-input", "input, display: none parent" );
 	assert.isNotFocusable( "#displayNoneAncestor-span", "span with tabindex, display: none parent" );
@@ -149,9 +149,13 @@ QUnit.test( "focusable - hidden styles", function( assert ) {
 
 	assert.isNotFocusable( "#displayNone-input", "input, display: none" );
 	assert.isNotFocusable( "#visibilityHidden-input", "input, visibility: hidden" );
+	assert.isNotFocusable( "#visibilityCollapse-input", "input, visibility: collapse" );
 
 	assert.isNotFocusable( "#displayNone-span", "span with tabindex, display: none" );
 	assert.isNotFocusable( "#visibilityHidden-span", "span with tabindex, visibility: hidden" );
+	assert.isNotFocusable( "#visibilityCollapse-span", "span with tabindex, visibility: collapse" );
+
+	assert.isNotFocusable( "#visibilityCollapse-td", "td with tabindex, visibility: collapse" );
 } );
 
 QUnit.test( "focusable - natively focusable with various tabindex", function( assert ) {

diff --git a/ui/focusable.js b/ui/focusable.js
@@ -70,7 +70,7 @@ function visible( element ) {
 		element = element.parent();
 		visibility = element.css( "visibility" );
 	}
-	return visibility !== "hidden";
+	return visibility === "visible";
 }
 
 $.extend( $.expr.pseudos, {