Skip to content
This repository has been archived by the owner on Oct 8, 2021. It is now read-only.

Commit

Permalink
Popup: Escape ID when looking to update aria-attributes
Browse files Browse the repository at this point in the history
  • Loading branch information
Gabriel Schulhof committed Jan 9, 2015
1 parent 0f36bb9 commit 841db13
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 2 deletions.
6 changes: 4 additions & 2 deletions js/widgets/popup.js
Expand Up @@ -655,7 +655,8 @@ $.widget( "mobile.popup", {
}
this._ignoreResizeEvents();
if ( id ) {
this.document.find( "[aria-haspopup='true'][aria-owns='" + id + "']" ).attr( "aria-expanded", true );
this.document.find( "[aria-haspopup='true'][aria-owns='" +
$.mobile.path.hashToSelector( id ) + "']" ).attr( "aria-expanded", true );
}
this._trigger( "afteropen" );
},
Expand Down Expand Up @@ -744,7 +745,8 @@ $.widget( "mobile.popup", {
$( ":focus", container[ 0 ] ).add( container[ 0 ] ).blur();

if ( id ) {
this.document.find( "[aria-haspopup='true'][aria-owns='" + id + "']" ).attr( "aria-expanded", false );
this.document.find( "[aria-haspopup='true'][aria-owns='" +
$.mobile.path.hashToSelector( id ) + "']" ).attr( "aria-expanded", false );
}

// alert users that the popup is closed
Expand Down
60 changes: 60 additions & 0 deletions tests/integration/popup/weird-characters-in-id-tests.html
@@ -0,0 +1,60 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Popup Test Suite</title>

<script src="../../../external/requirejs/require.js"></script>
<script src="../../../js/requirejs.config.js"></script>
<script src="../../../js/jquery.tag.inserter.js"></script>
<script src="../../jquery.setNameSpace.js"></script>
<script src="../../../tests/jquery.testHelper.js"></script>

<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
<link rel="stylesheet" href="../../../external/qunit/qunit.css"/>
<link rel="stylesheet" href="../../jqm-tests.css"/>
<script src="../../../external/qunit/qunit.js"></script>
<script>

// The next call to $.fn.enhanceWithin() will have no effect
$( document ).one( "pagebeforecreate", function() {
var overrideOnce = true;

$.fn.enhanceWithin = ( function( original ) {
return function() {
if ( overrideOnce ) {
overrideOnce = false;
} else {
return original.apply( this, arguments );
}
};
})( $.fn.enhanceWithin );
});
</script>
<script>
$.testHelper.asyncLoad([
[
"widgets/popup",
"links"
],
[ "init" ],
[ "weird_characters_in_id_core.js" ]
]);
</script>

<script src="../../swarminject.js"></script>
</head>
<body>
<div id="qunit"></div>

<div data-nstest-role="page" id="start-page">
<div class="ui-content" id="page-content">
<div data-nstest-role="popup" id="the-['x']-popup">
<p>Popup with weird characters in its ID</p>
</div>
<a href="#the-['x']-popup" id="openPopup" data-nstest-rel="popup">Open Popup</a>
</div>
</div>
</body>
</html>
49 changes: 49 additions & 0 deletions tests/integration/popup/weird_characters_in_id_core.js
@@ -0,0 +1,49 @@
asyncTest( "Popup with weird characters in its ID", function() {
var popup = $( "div#the-\\[\\'x\\'\\]-popup" ),
openPopup = $( "#openPopup" );
eventNs = ".popupWithWeirdCharactersInItsId";

// It is part of the test that the following line not cause an exception
$( ".ui-page" ).enhanceWithin();

deepEqual( $( "div#the-\\[\\'x\\'\\]-popup-placeholder" ).length, 1,
"Popup placeholder has correct ID" );

deepEqual( $( "#the-\\[\\'x\\'\\]-popup-screen.ui-popup-screen" ).length, 1,
"Popup screen has correct ID" );

deepEqual( $( "#the-\\[\\'x\\'\\]-popup-popup.ui-popup-container" ).length, 1,
"Popup container has correct ID" );

$.testHelper.detailedEventCascade([
function() {
openPopup.click();
},
{
popupafteropen: { src: popup, event: "popupafteropen" + eventNs + "1" }
},
function( result ) {
deepEqual( result.popupafteropen.timedOut, false, "Popup did open" );
deepEqual( openPopup.attr( "aria-haspopup" ), "true",
"Link's 'aria-haspopup' attribute is true" );
deepEqual( openPopup.attr( "aria-owns" ), "the-['x']-popup",
"Link's 'aria-owns' attribute has the correct value" );
deepEqual( openPopup.attr( "aria-expanded" ), "true",
"Link's 'aria-expanded' attribute is true" );
$.mobile.back();
},
{
popupafterclose: { src: popup, event: "popupafterclose" + eventNs + "2" }
},
function( result ) {
deepEqual( result.popupafterclose.timedOut, false, "Popup did close" );
deepEqual( openPopup.attr( "aria-haspopup" ), "true",
"Link's 'aria-haspopup' attribute is true" );
deepEqual( openPopup.attr( "aria-owns" ), "the-['x']-popup",
"Link's 'aria-owns' attribute has the correct value" );
deepEqual( openPopup.attr( "aria-expanded" ), "false",
"Link's 'aria-expanded' attribute is false" );
start();
}
]);
});

0 comments on commit 841db13

Please sign in to comment.