library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Focusable: Fix handling of visibility: inherit

Browse Source 
Ref #14596
Ref gh-1583
Closes gh-1605
This commit is contained in:
Scott González 2015-09-25 10:33:58 -04:00
parent 0bfbd21d4f
commit d3025968f3
3 changed files with 32 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
tests/unit/core/core.html
View File

@ -81,10 +81,20 @@
<input id="visibilityHiddenAncestor-input"> <input id="visibilityHiddenAncestor-input">
<span tabindex="1" id="visibilityHiddenAncestor-span">.</span> <span tabindex="1" id="visibilityHiddenAncestor-span">.</span>
<span id="nestedVisibilityOverrideAncestor" style="visibility: visible"> <span id="nestedVisibilityOverrideAncestor" style="visibility: visible;">
<input id="nestedVisibilityOverrideAncestor-input"> <input id="nestedVisibilityOverrideAncestor-input">
<span tabindex="1" id="nestedVisibilityOverrideAncestor-span">.</span> <span tabindex="1" id="nestedVisibilityOverrideAncestor-span">.</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> </div>
<span tabindex="1" id="displayNone-span" style="display: none;">.</span> <span tabindex="1" id="displayNone-span" style="display: none;">.</span>

11
tests/unit/core/selector.js
View File

@ -88,7 +88,7 @@ test( "data", function() {
} ); } );
test( "focusable - visible, enabled elements", function() { test( "focusable - visible, enabled elements", function() {
expect( 18 ); expect( 20 );
isNotFocusable( "#formNoTabindex", "form" ); isNotFocusable( "#formNoTabindex", "form" );
isFocusable( "#formTabindex", "form with tabindex" ); isFocusable( "#formTabindex", "form with tabindex" );
@ -108,6 +108,10 @@ test( "focusable - visible, enabled elements", function() {
isNotFocusable( "#visibleAncestor-div", "div" ); isNotFocusable( "#visibleAncestor-div", "div" );
isFocusable( "#visibleAncestor-spanWithTabindex", "span with tabindex" ); isFocusable( "#visibleAncestor-spanWithTabindex", "span with tabindex" );
isFocusable( "#visibleAncestor-divWithNegativeTabindex", "div 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() { test( "focusable - disabled elements", function() {
@ -125,7 +129,7 @@ test( "focusable - disabled elements", function() {
} ); } );
test( "focusable - hidden styles", function() { test( "focusable - hidden styles", function() {
expect( 10 ); expect( 12 );
isNotFocusable( "#displayNoneAncestor-input", "input, display: none parent" ); isNotFocusable( "#displayNoneAncestor-input", "input, display: none parent" );
isNotFocusable( "#displayNoneAncestor-span", "span with tabindex, 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-input", "input, visibility: visible parent but visibility: hidden grandparent" );
isFocusable( "#nestedVisibilityOverrideAncestor-span", "span with tabindex, 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( "#displayNone-input", "input, display: none" );
isNotFocusable( "#visibilityHidden-input", "input, visibility: hidden" ); isNotFocusable( "#visibilityHidden-input", "input, visibility: hidden" );

13
ui/focusable.js
View File

@ -42,9 +42,20 @@ $.ui.focusable = function( element, hasTabindex ) {
"a" === nodeName ? "a" === nodeName ?
element.href || hasTabindex : element.href || hasTabindex :
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[ ":" ], { $.extend( $.expr[ ":" ], {
focusable: function( element ) { focusable: function( element ) {
return $.ui.focusable( element, $.attr( element, "tabindex" ) != null ); return $.ui.focusable( element, $.attr( element, "tabindex" ) != null );