Skip to content

Commit 10baa9b

Browse files
russmaxdesignrussmaxdesign
authored
Add dialog files
1 parent d4132bc commit 10baa9b

10 files changed

Lines changed: 1371 additions & 0 deletions

‎dialog-aria01.html‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8">
4+
<title>ARIA Dialog - Test 1: initial focus on heading</title>
5+
<link rel="stylesheet" href="https://russmaxdesign.github.io/accessible-forms/assets/css/examples.css">
6+
<style>
7+
/* Custom dialog */
8+
[role=dialog] {
9+
position: fixed;
10+
top: 50%;
11+
left: 50%;
12+
transform: translate(-50%, -50%);
13+
background: #fff;
14+
padding: 1em;
15+
border: 3px solid #000;
16+
}
17+
18+
[role=dialog][open] {
19+
display: block;
20+
}
21+
22+
[role=dialog] h2 {
23+
margin-top: 0;
24+
}
25+
26+
[role=dialog] h2:focus {
27+
outline: 1px solid transparent;
28+
box-shadow: 0 0 0 1px #fff, 0 0 0 4px #000;
29+
}
30+
31+
.dialog-backdrop {
32+
background: rgba(0, 0, 0, 0.75);
33+
opacity: 1;
34+
position: absolute;
35+
top: 0;
36+
left: 0;
37+
align-items: center;
38+
justify-content: center;
39+
box-sizing: border-box;
40+
width: 100%;
41+
height: 100%;
42+
}
43+
44+
.dialog-backdrop[hidden] {
45+
display: none;
46+
}
47+
48+
dialog::-webkit-backdrop {
49+
background: rgba(0, 0, 0, 0.75);
50+
}
51+
52+
dialog::backdrop {
53+
background: rgba(0, 0, 0, 0.75);
54+
}
55+
56+
@media (min-width: 42em) {
57+
[role=dialog] {
58+
width: 50%;
59+
}
60+
}
61+
62+
/* Inert */
63+
[inert] {
64+
pointer-events: none;
65+
cursor: default;
66+
}
67+
68+
[inert], [inert] * {
69+
-webkit-user-select: none;
70+
-moz-user-select: none;
71+
-ms-user-select: none;
72+
user-select: none;
73+
}
74+
</style>
75+
<script>
76+
window.console = window.console || function(t) {};
77+
</script>
78+
<script>
79+
if (document.location.search.match(/type=embed/gi)) {
80+
window.parent.postMessage("resize", "*");
81+
}
82+
</script>
83+
</head>
84+
<body translate="no">
85+
<div class="wrapper">
86+
<h1>ARIA Dialog - Test 1: initial focus on heading</h1>
87+
<p><a href="https://cdpn.io/pen/debug/abqdxvv" target="_blank">Debug version</a></p>
88+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam voluptatibus, animi ratione et voluptate assumenda harum, ipsa dignissimos aliquam perspiciatis suscipit ipsam, similique labore voluptates itaque temporibus provident qui laboriosam.</p>
89+
<button id="open-btn" class="button">Open Dialog</button>
90+
<p><a href="https://cdpn.io/pen/debug/abqdxvv" target="_blank">Debug version</a></p>
91+
</div>
92+
93+
<div class="dialog-backdrop" hidden=""></div>
94+
<div role="dialog" aria-labelledby="dialog-heading" aria-describedby="dialog-description" aria-modal="true" hidden="">
95+
<h2 id="dialog-heading" tabindex="-1">Wombats</h2>
96+
<p id="dialog-description">Short-legged, Australian marsupials.</p>
97+
<p>Wombats are <a href="https://en.wikipedia.org/wiki/Marsupial" target="_blank">marsupials</a> with brown, tan or grey fur and from head to tail. They are expert diggers with short, muscular legs and sharp claws.</p>
98+
<button id="close-btn" class="button">Close</button>
99+
</div>
100+
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
101+
<script src="https://assets.codepen.io/15309/inert-polyfill-3.1.1.js"></script>
102+
<script id="rendered-js">
103+
let openBtn = document.getElementById('open-btn'),
104+
closeBtn = document.getElementById('close-btn'),
105+
wrapper = document.querySelectorAll('.wrapper')[0],
106+
dialog = document.querySelector('[role="dialog"]'),
107+
dialogBackgrop = document.querySelector('.dialog-backdrop'),
108+
focusableElements = dialog.querySelectorAll('h2[tabindex="-1"],a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])'),
109+
firstFocusableElement = focusableElements[0];
110+
111+
// event listeners for open/close buttons & backdrop click
112+
openBtn.addEventListener('click', openDialog);
113+
closeBtn.addEventListener('click', closeDialog);
114+
dialogBackgrop.addEventListener('click', closeDialog);
115+
116+
// open dialog
117+
function openDialog() {
118+
// toggle backdrop
119+
dialogBackgrop.hidden = false;
120+
// show dialog
121+
dialog.hidden = false;
122+
// handle inert
123+
wrapper.setAttribute('inert', '');
124+
// move focus to heading
125+
setTimeout(function () {
126+
firstFocusableElement.focus();
127+
}, 200);
128+
}
129+
130+
// close dialog
131+
function closeDialog() {
132+
// toggle backdrop
133+
dialogBackgrop.hidden = true;
134+
// show dialog
135+
dialog.hidden = true;
136+
// handle inert
137+
wrapper.removeAttribute('inert');
138+
// move focus back to trigger button
139+
setTimeout(function () {
140+
openBtn.focus();
141+
});
142+
}
143+
144+
// handle escape key close
145+
document.addEventListener('keydown', e => {
146+
if ((e.keyCode || e.which) === 27) {
147+
closeDialog();
148+
}
149+
});
150+
151+
// listen for click outside dialog to close
152+
dialog.addEventListener("click", e => {
153+
var rect = e.target.getBoundingClientRect();
154+
var minX = rect.left + e.target.clientLeft;
155+
var minY = rect.top + e.target.clientTop;
156+
if (e.clientX < minX || e.clientX >= minX + e.target.clientWidth ||
157+
e.clientY < minY || e.clientY >= minY + e.target.clientHeight) {
158+
closeDialog();
159+
}
160+
});
161+
//# sourceURL=pen.js
162+
</script>
163+
</body>
164+
</html>

‎dialog-aria02.html‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8">
4+
<title>ARIA Dialog - Test 2: initial focus on first focusable element</title>
5+
<link rel="stylesheet" href="https://russmaxdesign.github.io/accessible-forms/assets/css/examples.css">
6+
<style>
7+
/* Custom dialog */
8+
[role=dialog] {
9+
position: fixed;
10+
top: 50%;
11+
left: 50%;
12+
transform: translate(-50%, -50%);
13+
background: #fff;
14+
padding: 1em;
15+
border: 3px solid #000;
16+
}
17+
18+
[role=dialog][open] {
19+
display: block;
20+
}
21+
22+
[role=dialog] h2 {
23+
margin-top: 0;
24+
}
25+
26+
[role=dialog] h2:focus {
27+
outline: 0;
28+
box-shadow: 0 0 0 1px #fff, 0 0 0 4px #000;
29+
}
30+
31+
.dialog-backdrop {
32+
background: rgba(0, 0, 0, 0.75);
33+
opacity: 1;
34+
position: absolute;
35+
top: 0;
36+
left: 0;
37+
align-items: center;
38+
justify-content: center;
39+
box-sizing: border-box;
40+
width: 100%;
41+
height: 100%;
42+
}
43+
44+
.dialog-backdrop[hidden] {
45+
display: none;
46+
}
47+
48+
dialog::-webkit-backdrop {
49+
background: rgba(0, 0, 0, 0.75);
50+
}
51+
52+
dialog::backdrop {
53+
background: rgba(0, 0, 0, 0.75);
54+
}
55+
56+
@media (min-width: 42em) {
57+
[role=dialog] {
58+
width: 50%;
59+
}
60+
}
61+
62+
/* Inert */
63+
[inert] {
64+
pointer-events: none;
65+
cursor: default;
66+
}
67+
68+
[inert], [inert] * {
69+
-webkit-user-select: none;
70+
-moz-user-select: none;
71+
-ms-user-select: none;
72+
user-select: none;
73+
}
74+
</style>
75+
<script>
76+
window.console = window.console || function(t) {};
77+
</script>
78+
<script>
79+
if (document.location.search.match(/type=embed/gi)) {
80+
window.parent.postMessage("resize", "*");
81+
}
82+
</script>
83+
</head>
84+
<body translate="no">
85+
<div class="wrapper">
86+
<h1>ARIA Dialog - Test 2: initial focus on first focusable element</h1>
87+
<p><a href="https://cdpn.io/pen/debug/xxYZewZ" target="_blank">Debug version</a></p>
88+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam voluptatibus, animi ratione et voluptate assumenda harum, ipsa dignissimos aliquam perspiciatis suscipit ipsam, similique labore voluptates itaque temporibus provident qui laboriosam.</p>
89+
<button id="open-btn" class="button">Open Dialog</button>
90+
<p><a href="https://cdpn.io/pen/debug/xxYZewZ" target="_blank">Debug version</a></p>
91+
</div>
92+
93+
<div class="dialog-backdrop" hidden=""></div>
94+
<div role="dialog" aria-labelledby="dialog-heading" aria-describedby="dialog-description" aria-modal="true" hidden="">
95+
<h2 id="dialog-heading">Wombats</h2>
96+
<p id="dialog-description">Short-legged, Australian marsupials.</p>
97+
<p>Wombats are <a href="https://en.wikipedia.org/wiki/Marsupial" target="_blank">marsupials</a> with brown, tan or grey fur and from head to tail. They are expert diggers with short, muscular legs and sharp claws.</p>
98+
<button id="close-btn" class="button">Close</button>
99+
</div>
100+
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
101+
<script src="https://assets.codepen.io/15309/inert-polyfill-3.1.1.js"></script>
102+
<script id="rendered-js">
103+
let openBtn = document.getElementById('open-btn'),
104+
closeBtn = document.getElementById('close-btn'),
105+
wrapper = document.querySelectorAll('.wrapper')[0],
106+
dialog = document.querySelector('[role="dialog"]'),
107+
dialogBackgrop = document.querySelector('.dialog-backdrop'),
108+
focusableElements = dialog.querySelectorAll('h2[tabindex="-1"],a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])'),
109+
firstFocusableElement = focusableElements[0];
110+
111+
// event listeners for open/close buttons & backdrop click
112+
openBtn.addEventListener('click', openDialog);
113+
closeBtn.addEventListener('click', closeDialog);
114+
dialogBackgrop.addEventListener('click', closeDialog);
115+
116+
// open dialog
117+
function openDialog() {
118+
// toggle backdrop
119+
dialogBackgrop.hidden = false;
120+
// show dialog
121+
dialog.hidden = false;
122+
// handle inert
123+
wrapper.setAttribute('inert', '');
124+
// move focus to heading
125+
setTimeout(function () {
126+
firstFocusableElement.focus();
127+
}, 200);
128+
}
129+
130+
// close dialog
131+
function closeDialog() {
132+
// toggle backdrop
133+
dialogBackgrop.hidden = true;
134+
// show dialog
135+
dialog.hidden = true;
136+
// handle inert
137+
wrapper.removeAttribute('inert');
138+
// move focus back to trigger button
139+
setTimeout(function () {
140+
openBtn.focus();
141+
});
142+
}
143+
144+
// handle escape key close
145+
document.addEventListener('keydown', e => {
146+
if ((e.keyCode || e.which) === 27) {
147+
closeDialog();
148+
}
149+
});
150+
151+
// listen for click outside dialog to close
152+
dialog.addEventListener("click", e => {
153+
var rect = e.target.getBoundingClientRect();
154+
var minX = rect.left + e.target.clientLeft;
155+
var minY = rect.top + e.target.clientTop;
156+
if (e.clientX < minX || e.clientX >= minX + e.target.clientWidth ||
157+
e.clientY < minY || e.clientY >= minY + e.target.clientHeight) {
158+
closeDialog();
159+
}
160+
});
161+
//# sourceURL=pen.js
162+
</script>
163+
</body>
164+
</html>

0 commit comments

Comments
 (0)