diff options
| -rw-r--r-- | tests/unit/core/core.html | 12 | ||||
| -rw-r--r-- | tests/unit/core/selector.js | 11 | ||||
| -rw-r--r-- | ui/focusable.js | 13 |
3 files changed, 32 insertions, 4 deletions
diff --git a/tests/unit/core/core.html b/tests/unit/core/core.html index 5a089aa7b..93f0156fd 100644 --- a/tests/unit/core/core.html +++ b/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> diff --git a/tests/unit/core/selector.js b/tests/unit/core/selector.js index ffae7e024..52d1902ff 100644 --- a/tests/unit/core/selector.js +++ b/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" ); diff --git a/ui/focusable.js b/ui/focusable.js index 942f0fed3..6b7a0b1f1 100644 --- a/ui/focusable.js +++ b/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 ); |