wcag/working-examples/aria-alertdialog-identify-errors/index.html at e338c8fd80cbe11f354c2adc3a7648e1827b439c · w3c/wcag · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Using aria-alertdialog to Identify Errors: WCAG 2</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
	document.getElementById('trigger-alertdialog').addEventListener('click', function(e) {
		e.preventDefault();
		const main = document.querySelector('main');
		main.setAttribute('aria-hidden', 'true');
		const lastFocus = document.activeElement;

		const modalOverlay = document.createElement('div');
		modalOverlay.id = 'modalOverlay';
		modalOverlay.setAttribute('tabindex', '0');
		document.body.appendChild(modalOverlay);

		const ariaDialog = document.createElement('div');
		ariaDialog.setAttribute('role', 'alertdialog');
		ariaDialog.setAttribute('aria-labelledby', 'alertHeading');
		ariaDialog.setAttribute('tabindex', '0');
		ariaDialog.innerHTML = '<div id="firstElement" tabindex="0"></div><h1 id="alertHeading">Error</h1><p>Employee\'s Birth Date is after their hire date. Please verify the birth date and hire date.</p><button id="firstButton">Save and Continue</button><button id="lastButton">Return to page and correct error</button><div id="lastElement" tabindex="0"></div>';
		document.body.appendChild(ariaDialog);

		document.getElementById('firstButton').focus();

		document.getElementById('lastElement').addEventListener('focusin', function() {
			document.getElementById('firstButton').focus();
		});
		document.getElementById('firstElement').addEventListener('focusin', function() {
			document.getElementById('lastButton').focus();
		});

		ariaDialog.querySelectorAll('button').forEach(function(button) {
			button.addEventListener('click', function() {
				main.setAttribute('aria-hidden', 'false');
				modalOverlay.remove();
				ariaDialog.remove();
				lastFocus.focus();
			});
		});
	});
});
</script>
<style>
body{
	background:#fff;
	color:#000;
	font:100% / 1.5 sans-serif;
}
#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=alertdialog] {
	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%;
}
</style>
</head>

<body>
<main>
<h1>Using aria-alertdialog to Identify Errors</h1>
<p>This example shows how role=&quot;alertdialog&quot; can be used to notify someone they have entered invalid information.</p>
<button id="trigger-alertdialog" type="button">Trigger Alertdialog</button>
</main>
</body>
</html>