Skip to content

Commit 841db13

Browse files
author
Gabriel Schulhof
committed
Popup: Escape ID when looking to update aria-attributes
Re jquery-archivegh-7401
1 parent 0f36bb9 commit 841db13

File tree

3 files changed

+113
-2
lines changed

3 files changed

+113
-2
lines changed

‎js/widgets/popup.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -655,7 +655,8 @@ $.widget( "mobile.popup", {
655655
}
656656
this._ignoreResizeEvents();
657657
if ( id ) {
658-
this.document.find( "[aria-haspopup='true'][aria-owns='" + id + "']" ).attr( "aria-expanded", true );
658+
this.document.find( "[aria-haspopup='true'][aria-owns='" +
659+
$.mobile.path.hashToSelector( id ) + "']" ).attr( "aria-expanded", true );
659660
}
660661
this._trigger( "afteropen" );
661662
},
@@ -744,7 +745,8 @@ $.widget( "mobile.popup", {
744745
$( ":focus", container[ 0 ] ).add( container[ 0 ] ).blur();
745746

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

750752
// alert users that the popup is closed

‎tests/integration/popup/weird-characters-in-id-tests.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>jQuery Mobile Popup Test Suite</title>
7+
8+
<script src="../../../external/requirejs/require.js"></script>
9+
<script src="../../../js/requirejs.config.js"></script>
10+
<script src="../../../js/jquery.tag.inserter.js"></script>
11+
<script src="../../jquery.setNameSpace.js"></script>
12+
<script src="../../../tests/jquery.testHelper.js"></script>
13+
14+
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile.css"/>
15+
<link rel="stylesheet" href="../../../external/qunit/qunit.css"/>
16+
<link rel="stylesheet" href="../../jqm-tests.css"/>
17+
<script src="../../../external/qunit/qunit.js"></script>
18+
<script>
19+
20+
// The next call to $.fn.enhanceWithin() will have no effect
21+
$( document ).one( "pagebeforecreate", function() {
22+
var overrideOnce = true;
23+
24+
$.fn.enhanceWithin = ( function( original ) {
25+
return function() {
26+
if ( overrideOnce ) {
27+
overrideOnce = false;
28+
} else {
29+
return original.apply( this, arguments );
30+
}
31+
};
32+
})( $.fn.enhanceWithin );
33+
});
34+
</script>
35+
<script>
36+
$.testHelper.asyncLoad([
37+
[
38+
"widgets/popup",
39+
"links"
40+
],
41+
[ "init" ],
42+
[ "weird_characters_in_id_core.js" ]
43+
]);
44+
</script>
45+
46+
<script src="../../swarminject.js"></script>
47+
</head>
48+
<body>
49+
<div id="qunit"></div>
50+
51+
<div data-nstest-role="page" id="start-page">
52+
<div class="ui-content" id="page-content">
53+
<div data-nstest-role="popup" id="the-['x']-popup">
54+
<p>Popup with weird characters in its ID</p>
55+
</div>
56+
<a href="#the-['x']-popup" id="openPopup" data-nstest-rel="popup">Open Popup</a>
57+
</div>
58+
</div>
59+
</body>
60+
</html>

‎tests/integration/popup/weird_characters_in_id_core.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
asyncTest( "Popup with weird characters in its ID", function() {
2+
var popup = $( "div#the-\\[\\'x\\'\\]-popup" ),
3+
openPopup = $( "#openPopup" );
4+
eventNs = ".popupWithWeirdCharactersInItsId";
5+
6+
// It is part of the test that the following line not cause an exception
7+
$( ".ui-page" ).enhanceWithin();
8+
9+
deepEqual( $( "div#the-\\[\\'x\\'\\]-popup-placeholder" ).length, 1,
10+
"Popup placeholder has correct ID" );
11+
12+
deepEqual( $( "#the-\\[\\'x\\'\\]-popup-screen.ui-popup-screen" ).length, 1,
13+
"Popup screen has correct ID" );
14+
15+
deepEqual( $( "#the-\\[\\'x\\'\\]-popup-popup.ui-popup-container" ).length, 1,
16+
"Popup container has correct ID" );
17+
18+
$.testHelper.detailedEventCascade([
19+
function() {
20+
openPopup.click();
21+
},
22+
{
23+
popupafteropen: { src: popup, event: "popupafteropen" + eventNs + "1" }
24+
},
25+
function( result ) {
26+
deepEqual( result.popupafteropen.timedOut, false, "Popup did open" );
27+
deepEqual( openPopup.attr( "aria-haspopup" ), "true",
28+
"Link's 'aria-haspopup' attribute is true" );
29+
deepEqual( openPopup.attr( "aria-owns" ), "the-['x']-popup",
30+
"Link's 'aria-owns' attribute has the correct value" );
31+
deepEqual( openPopup.attr( "aria-expanded" ), "true",
32+
"Link's 'aria-expanded' attribute is true" );
33+
$.mobile.back();
34+
},
35+
{
36+
popupafterclose: { src: popup, event: "popupafterclose" + eventNs + "2" }
37+
},
38+
function( result ) {
39+
deepEqual( result.popupafterclose.timedOut, false, "Popup did close" );
40+
deepEqual( openPopup.attr( "aria-haspopup" ), "true",
41+
"Link's 'aria-haspopup' attribute is true" );
42+
deepEqual( openPopup.attr( "aria-owns" ), "the-['x']-popup",
43+
"Link's 'aria-owns' attribute has the correct value" );
44+
deepEqual( openPopup.attr( "aria-expanded" ), "false",
45+
"Link's 'aria-expanded' attribute is false" );
46+
start();
47+
}
48+
]);
49+
});

0 commit comments

Comments
 (0)