Attachment 339346 Details for Bug 185219 – dialog demo page

dialog demo page

dialog.html (text/html), 2.75 KB, created by Paul J. Adam on 2018-05-02 14:49:05 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Paul J. Adam

Created: 2018-05-02 14:49:05 PDT

Size: 2.75 KB

patch

obsolete

><!doctype html>
><html lang="en-US">
><head>
><meta charset="UTF-8">
><title>Accessible Modal Dialog</title>
><meta name="viewport" content="width=device-width, initial-scale=1">
><script src="http://code.jquery.com/jquery.js"></script>
><link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
><script>
>$(document).ready(function(e) {
>	$('#trigger-modal').click(function() {
>		$('main').attr('aria-hidden','true');
>		//var lastFocus = document.activeElement; wont' work on iOS
>		var modalOverlay = $('<div>').attr({id:"modalOverlay", id:"modalOverlay"});
>		$(modalOverlay).appendTo('body');		
>		$("#trigger-modal").attr('disabled','true');
>		var dialog = $('<div role="dialog">').attr({"aria-labelledby":"dialog-heading", "aria-describedby":"dialog-description", "aria-modal":"true"});
>		$(dialog).html('<div id="firstElement" tabindex="0"></div><h1 id="dialog-heading">Modal Dialog Title</h1><div id="dialog-description"><p>The quick brown fox jumps over the lazy dog.</p></div><button id="firstButton">Option Dog</button><button>Option Fox</button><button id="lastButton" aria-label="Close Dialog">X</button><div id="lastElement" tabindex="0"></div>').appendTo('body');
>		$('#firstButton').focus();
>
>$('#lastElement').focusin(function(e) {
>	   $('#firstButton').focus();
>});
>$('#firstElement').focusin(function(e) {
>	   $('#lastButton').focus();
>});
>
>	$('body').on('keyup', function(e) {
>		if(e.keyCode == '27'){
>    		$('main').attr('aria-hidden','false');		
>			$(modalOverlay).remove();
>			$(dialog).remove();
>	    	$("#trigger-modal").removeAttr('disabled').focus();//works on iOS
>		}
>	});
>
>$('[role=dialog] button').click(function(e) {
>    	$('main').attr('aria-hidden','false');		
>		$(modalOverlay).remove();
>		$(dialog).remove();
>        //lastFocus.focus(); not working on iOS
>	    $("#trigger-modal").removeAttr('disabled').focus();//works on iOS
>
>});
>		return false;
>	});
>	
>});
></script>
><style type="text/css">
>#modalOverlay {
>	width:100%;
>	height:100%;
>	z-index:2; 
>	background-color:#000;
>	opacity:0.5;
>	position:fixed;
>	top:0;
>	left:0;
>	margin:0;
>	padding:0;
>}
>[role=dialog] {
>	width:50%;
>	margin-left:auto;
>	margin-right:auto;
>	padding: 5px;
>	border: thin #000 solid;
>	background-color:#fff;
>	z-index:3;
>	position:fixed;
>	top:25%;
>	left:25%;
>}
>.scroll-frame {
>    overflow: auto;
>    overflow-x: hidden;
>    -webkit-overflow-scrolling:touch;
>	height:400px;
>	width:100%;
>}
>button[aria-label="Close Dialog"] { 
> position:absolute;
>top: 0px;
>right: 0px;
>}
></style>
></head>
>
><body>
><main>
><h1>Accessible Modal Dialog</h1>
><p>Coding instructions: <a href="http://w3c.github.io/aria-practices/#dialog_modal">http://w3c.github.io/aria-practices/#dialog_modal</a></p>
><h2>WAI-ARIA role=dialog</h2>
><button id="trigger-modal">Trigger modal dialog</button>
></main>
></body>
></html>

<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Accessible Modal Dialog</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script>
$(document).ready(function(e) {
	$('#trigger-modal').click(function() {
		$('main').attr('aria-hidden','true');
		//var lastFocus = document.activeElement; wont' work on iOS
		var modalOverlay = $('<div>').attr({id:"modalOverlay", id:"modalOverlay"});
		$(modalOverlay).appendTo('body');		
		$("#trigger-modal").attr('disabled','true');
		var dialog = $('<div role="dialog">').attr({"aria-labelledby":"dialog-heading", "aria-describedby":"dialog-description", "aria-modal":"true"});
		$(dialog).html('<div id="firstElement" tabindex="0"></div><h1 id="dialog-heading">Modal Dialog Title</h1><div id="dialog-description"><p>The quick brown fox jumps over the lazy dog.</p></div><button id="firstButton">Option Dog</button><button>Option Fox</button><button id="lastButton" aria-label="Close Dialog">X</button><div id="lastElement" tabindex="0"></div>').appendTo('body');
		$('#firstButton').focus();

$('#lastElement').focusin(function(e) {
	   $('#firstButton').focus();
});
$('#firstElement').focusin(function(e) {
	   $('#lastButton').focus();
});

	$('body').on('keyup', function(e) {
		if(e.keyCode == '27'){
    		$('main').attr('aria-hidden','false');		
			$(modalOverlay).remove();
			$(dialog).remove();
	    	$("#trigger-modal").removeAttr('disabled').focus();//works on iOS
		}
	});

$('[role=dialog] button').click(function(e) {
    	$('main').attr('aria-hidden','false');		
		$(modalOverlay).remove();
		$(dialog).remove();
        //lastFocus.focus(); not working on iOS
	    $("#trigger-modal").removeAttr('disabled').focus();//works on iOS

});
		return false;
	});
	
});
</script>
<style type="text/css">
#modalOverlay {
	width:100%;
	height:100%;
	z-index:2; 
	background-color:#000;
	opacity:0.5;
	position:fixed;
	top:0;
	left:0;
	margin:0;
	padding:0;
}
[role=dialog] {
	width:50%;
	margin-left:auto;
	margin-right:auto;
	padding: 5px;
	border: thin #000 solid;
	background-color:#fff;
	z-index:3;
	position:fixed;
	top:25%;
	left:25%;
}
.scroll-frame {
    overflow: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling:touch;
	height:400px;
	width:100%;
}
button[aria-label="Close Dialog"] { 
 position:absolute;
top: 0px;
right: 0px;
}
</style>
</head>

<body>
<main>
<h1>Accessible Modal Dialog</h1>
<p>Coding instructions: <a href="http://w3c.github.io/aria-practices/#dialog_modal">http://w3c.github.io/aria-practices/#dialog_modal</a></p>
<h2>WAI-ARIA role=dialog</h2>
<button id="trigger-modal">Trigger modal dialog</button>
</main>
</body>
</html>

Actions: View

Attachments on bug 185219: 339346 | 340202 | 340203