cthulhu/test/html/aria-modal-dialog.html

84 lines
2.0 KiB
HTML

<html>
<head>
<style>
.box-hidden {
display: none;
position: absolute;
top: 19em; left:15em; width:20em; height:5em;
border: 2px solid black;
padding:0 1em 1em 1em;
background-color: #eee;
z-index:1002;
overflow: auto;
}
</style>
<script>
var dialogOpen = false, lastFocus, dialog, okbutton, pagebackground;
function showDialog(el) {
lastFocus = el || document.activeElement;
toggleDialog('show');
}
function hideDialog(el) {
toggleDialog('hide');
}
function toggleDialog(sh) {
dialog = document.getElementById("box");
okbutton = document.getElementById("ok");
pagebackground = document.getElementById("bg");
if (sh == "show") {
dialogOpen = true;
// show the dialog
dialog.style.display = 'block';
// after displaying the dialog, focus an element inside it
okbutton.focus();
// only hide the background *after* you've moved focus out of the content that will be "hidden"
pagebackground.setAttribute("aria-hidden","true");
} else {
dialogOpen = false;
dialog.style.display = 'none';
pagebackground.setAttribute("aria-hidden","false");
lastFocus.focus();
}
}
document.addEventListener("focus", function(event) {
var d = document.getElementById("box");
if (dialogOpen && !d.contains(event.target)) {
event.stopPropagation();
d.focus();
}
}, true);
document.addEventListener("keydown", function(event) {
if (dialogOpen && event.keyCode == 27) {
toggleDialog('hide');
}
}, true);
</script>
</head>
<body>
<p>This was taken from <a href="http://www.w3.org/WAI/GL/wiki/Using_ARIA_role%3Ddialog_to_implement_a_modal_dialog_box">The WCAG Wiki</a>.</p>
<p><a onclick="toggleDialog('show');" href="#">Display a dialog</a></p>
<div tabindex="-1" style="display: none;" role="dialog" aria-labelledby="myDialog" id="box" class="box-hidden">
<h3 id="myDialog">Just an example.</h3>
<button onclick="toggleDialog('hide');" class="close-button">OK</button>
<button onclick="toggleDialog('hide');" class="close-button">Cancel</button>
</div>
<p>Another <a href="foo">link</a></p>
</body>
</html>