Permalink
Browse files

Popup: Add tabindex after open, and remove it after close

Fixes gh-7856
Closes gh-7956
  • Loading branch information...
gabrielschulhof committed Jan 13, 2015
1 parent 9b6b405 commit 120cae61ae69f94416345665a2eabb451a6f4f86
Showing with 35 additions and 19 deletions.
  1. +0 −4 demos/_assets/js/view-source.js
  2. +3 −0 js/widgets/popup.js
  3. +32 −15 tests/integration/popup/popup_core.js
@@ -32,10 +32,6 @@ function attachPopupHandler( popup, sources ) {
}
});
SyntaxHighlighter.highlight( {}, pre[ 0 ] );
// Give the syntax highlighter top-level div a tabindex so one can select and copy the
// code snippet
collapsible.children().last().attr( "tabindex", 0 );
});
collapsibleSet.find( "[data-role='collapsible']" ).first().attr( "data-collapsed", "false" );
View
@@ -658,6 +658,7 @@ $.widget( "mobile.popup", {
this.document.find( "[aria-haspopup='true'][aria-owns='" +
$.mobile.path.hashToSelector( id ) + "']" ).attr( "aria-expanded", true );
}
this._ui.container.attr( "tabindex", 0 );
this._trigger( "afteropen" );
},
@@ -749,6 +750,8 @@ $.widget( "mobile.popup", {
$.mobile.path.hashToSelector( id ) + "']" ).attr( "aria-expanded", false );
}
this._ui.container.removeAttr( "tabindex" );
// alert users that the popup is closed
this._trigger( "afterclose" );
},
@@ -8,49 +8,66 @@
originalAnimationComplete = $.fn.animationComplete,
animationCompleteCallCount = 0,
opensAndCloses = function( eventNs, popupId, linkSelector, contentSelector ) {
var $popup = $( document.getElementById( popupId ) ),
var popup = $( "#" + popupId ),
link = $( linkSelector )[ 0 ];
expect( 14 );
expect( 17 );
$.testHelper.detailedEventCascade([
function() {
deepEqual( popup.parent()[ 0 ].hasAttribute( "tabindex" ), false,
"Popup container does not have attribute tabindex" );
deepEqual( link.getAttribute( "aria-haspopup" ), "true", popupId + ": 'aria-haspopup' attribute is set to true on link that opens the popup" );
deepEqual( link.getAttribute( "aria-owns" ), popupId, popupId + ": 'aria-owns' attribute is set to the ID of the owned popup ('test-popup')" );
deepEqual( link.getAttribute( "aria-expanded" ), "false", popupId + ": 'aria-expanded' attribute is set to false when the popup is not open" );
$popup.popup( "open" );
popup.popup( "open" );
},
{
opened: { src: $popup, event: "popupafteropen" + eventNs },
opened: { src: popup, event: "popupafteropen" + eventNs },
navigate: { src: $(window), event: $.event.special.navigate.originalEventName + eventNs }
},
function( result ) {
deepEqual( link.getAttribute( "aria-expanded" ), "true", popupId + ": 'aria-expanded' attribute is set to true when the popup is open" );
ok( !$popup.parent().prev().hasClass( "ui-screen-hidden" ), popupId + ": Open popup screen is not hidden" );
ok( $popup.attr( "class" ).match( /( |^)ui-body-([a-z]|inherit)( |$)/ ), popupId + ": Open popup has a valid theme" );
$popup.popup( "option", "overlayTheme", "a" );
ok( $popup.parent().prev().hasClass( "ui-overlay-a" ), popupId + ": Setting an overlay theme while the popup is open causes the theme to be applied and the screen to be faded in" );
ok( $popup.parent().prev().hasClass( "in" ), popupId + ": Setting an overlay theme while the popup is open causes the theme to be applied and the screen to be faded in" );
ok( $popup.parent().hasClass( "ui-popup-active" ), popupId + ": Open popup has the 'ui-popup-active' class" );
ok( !popup.parent().prev().hasClass( "ui-screen-hidden" ),
popupId + ": Open popup screen is not hidden" );
ok( popup.attr( "class" ).match( /( |^)ui-body-([a-z]|inherit)( |$)/ ),
popupId + ": Open popup has a valid theme" );
popup.popup( "option", "overlayTheme", "a" );
ok( popup.parent().prev().hasClass( "ui-overlay-a" ),
popupId + ": Setting an overlay theme while the popup is open causes " +
"the theme to be applied and the screen to be faded in" );
ok( popup.parent().prev().hasClass( "in" ),
popupId + ": Setting an overlay theme while the popup is open causes " +
"the theme to be applied and the screen to be faded in" );
ok( popup.parent().hasClass( "ui-popup-active" ),
popupId + ": Open popup has the 'ui-popup-active' class" );
deepEqual( popup.parent().attr( "tabindex" ), "0",
"Popup container has attribute tabindex" );
animationCompleteCallCount = 0;
$.mobile.back();
},
{
closed: { src: $popup, event: "popupafterclose" + eventNs + "2" },
closed: { src: popup, event: "popupafterclose" + eventNs + "2" },
navigate: { src: $(window), event: $.event.special.navigate.originalEventName + eventNs + "2" }
},
function( result) {
deepEqual( animationCompleteCallCount, 1, "animationComplete called only once" );
deepEqual( link.getAttribute( "aria-expanded" ), "false", "'aria-expanded' attribute is set to false when the popup is not open" );
ok( !$popup.parent().hasClass( "in" ), "Closed popup container does not have class 'in'" );
ok( $popup.parent().prev().hasClass( "ui-screen-hidden" ), "Closed popup screen is hidden" );
ok( !$popup.parent().hasClass( "ui-popup-active" ), "Open popup dos not have the 'ui-popup-active' class" );
ok( !popup.parent().hasClass( "in" ),
"Closed popup container does not have class 'in'" );
ok( popup.parent().prev().hasClass( "ui-screen-hidden" ),
"Closed popup screen is hidden" );
ok( !popup.parent().hasClass( "ui-popup-active" ),
"Open popup dos not have the 'ui-popup-active' class" );
deepEqual( popup.parent()[ 0 ].hasAttribute( "tabindex" ), false,
"Popup container does not have attribute tabindex" );
},
{ timeout: { length: 500 } },

0 comments on commit 120cae6

Please sign in to comment.