Skip to content

Commit 303cbfe

Browse files
author
michael-n-cooper
committed
Merge remote-tracking branch 'refs/remotes/origin/master' into dec_2017_pub
2 parents fdd5269 + fdf51a2 commit 303cbfe

File tree

3 files changed

+111
-108
lines changed

3 files changed

+111
-108
lines changed

‎examples/dialog-modal/css/dialog.css‎

Lines changed: 88 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,164 +1,159 @@
11
html, body {
2-
height: 100%;
2+
height: 100%;
33
}
44

55
body {
6-
max-width: 100%;
7-
padding: 0;
8-
margin: 0;
9-
overflow: hidden;
6+
max-width: 100%;
7+
padding: 0;
8+
margin: 0;
9+
overflow: hidden;
1010
}
1111

1212
body:not(.toc-inline) {
1313
padding: 0;
1414
}
1515

1616
#base_window_layer {
17-
box-sizing: border-box;
18-
height: 100%;
19-
width: 100%;
20-
/* Use overflow scroll and webkit-overflow-scrolling to add momentum scroll*/
21-
overflow: scroll;
22-
-webkit-overflow-scrolling: touch;
23-
padding: 1.6em 0 2em;
17+
box-sizing: border-box;
18+
height: 100%;
19+
width: 100%;
20+
/* Use overflow scroll and webkit-overflow-scrolling to add momentum scroll*/
21+
overflow: scroll;
22+
-webkit-overflow-scrolling: touch;
23+
padding: 1.6em 0 2em;
2424
}
2525

2626
#base_window_layer main, #base_window_layer nav {
27-
max-width: 50em;
28-
margin: auto;
29-
padding-right: 1.5em;
30-
padding-left: 50px;
31-
padding-left: calc(26px + 1.5em);
27+
max-width: 50em;
28+
margin: auto;
29+
padding-right: 1.5em;
30+
padding-left: 50px;
31+
padding-left: calc(26px + 1.5em);
3232
}
3333

3434
@media screen and (min-width: 78em) {
35-
body:not(.toc-inline) #base_window_layer main, body:not(.toc-inline) #base_window_layer nav {
36-
padding-left: 29em;
37-
}
35+
body:not(.toc-inline) #base_window_layer main, body:not(.toc-inline) #base_window_layer nav {
36+
padding-left: 29em;
37+
}
3838

39-
body:not(.toc-inline) {
40-
padding: 0;
41-
}
39+
body:not(.toc-inline) {
40+
padding: 0;
41+
}
4242
}
4343

4444
body:not(.toc-inline) #main_content main, body:not(.toc-inline) #main_content nav {
45-
padding-left: 1.5em;
45+
padding-left: 1.5em;
4646
}
4747

4848

4949
.hidden {
50-
display: none
51-
}
52-
53-
#dialog_layer.showing {
54-
position: absolute;
55-
width: 100%;
56-
height: 100vh;
57-
top: 0;
58-
left: 0;
59-
overflow: scroll;
60-
-webkit-overflow-scrolling: touch;
61-
background: rgba(0, 0, 0, 0.3);
62-
}
63-
64-
div.default_dialog {
65-
display: block;
66-
width: 50%;
67-
margin-bottom: 100px;
68-
margin-left: auto;
69-
margin-right: auto;
70-
padding: 5px;
71-
border: thin #000 solid;
72-
background-color: #fff;
73-
position: absolute;
74-
top: 25%;
75-
left: 25%;
50+
display: none
51+
}
52+
53+
[role="dialog"] {
54+
width: 50%;
55+
margin: 10vh auto;
56+
padding: 5px;
57+
border: thin #000 solid;
58+
background-color: #fff;
7659
}
7760

7861
@media screen and (max-width: 640px) {
79-
div.default_dialog {
80-
box-sizing: border-box;
81-
top: 0px;
82-
left: 0px;
83-
margin-bottom: 0px;
84-
min-height: 100%;
85-
width: 100%;
86-
}
62+
[role="dialog"] {
63+
box-sizing: border-box;
64+
top: 0px;
65+
left: 0px;
66+
margin: 0 auto;
67+
min-height: 100%;
68+
width: 100%;
69+
}
8770
}
8871

89-
.default_dialog h2:first-of-type {
90-
text-align:center;
72+
[role="dialog"] h2:first-of-type {
73+
text-align:center;
9174
}
9275

9376
.dialog_form {
94-
margin: 15px;
77+
margin: 15px;
9578
}
9679

9780
.dialog_form .label_text {
98-
box-sizing: border-box;
99-
padding-right: 0.5em;
100-
display: inline-block;
101-
font-size: 16px;
102-
font-weight: bold;
103-
width: 30%;
104-
text-align: right;
81+
box-sizing: border-box;
82+
padding-right: 0.5em;
83+
display: inline-block;
84+
font-size: 16px;
85+
font-weight: bold;
86+
width: 30%;
87+
text-align: right;
10588
}
10689

10790
.dialog_form .label_info {
108-
box-sizing: border-box;
109-
padding-right: 0.5em;
110-
font-size: 12px;
91+
box-sizing: border-box;
92+
padding-right: 0.5em;
93+
font-size: 12px;
11194
width: 30%;
11295
text-align: right;
11396
display: inline-block;
11497
}
11598

11699
.dialog_form_item {
117-
margin: 10px 0;
118-
font-size: 0;
100+
margin: 10px 0;
101+
font-size: 0;
119102
}
120103

121104
.dialog_form_item .wide_input {
122-
box-sizing: border-box;
123-
max-width: 70%;
124-
width: 27em;
105+
box-sizing: border-box;
106+
max-width: 70%;
107+
width: 27em;
125108
}
126109

127110
.dialog_form_item .city_input {
128-
box-sizing: border-box;
129-
max-width: 70%;
130-
width: 17em;
111+
box-sizing: border-box;
112+
max-width: 70%;
113+
width: 17em;
131114
}
132115

133116
.dialog_form_item .state_input {
134-
box-sizing: border-box;
135-
max-width: 70%;
136-
width: 15em;
117+
box-sizing: border-box;
118+
max-width: 70%;
119+
width: 15em;
137120
}
138121

139122
.dialog_form_item .zip_input {
140-
box-sizing: border-box;
141-
max-width: 70%;
142-
width: 9em;
123+
box-sizing: border-box;
124+
max-width: 70%;
125+
width: 9em;
143126
}
144127

145128
.dialog_form_actions {
146-
text-align: right;
129+
text-align: right;
147130
padding: 0 20px 20px;
148131
}
149132

150133
.dialog_close_button {
151-
float:right;
152-
position:absolute;
153-
top:10px;
154-
left:92%;
155-
height:25px;
134+
float:right;
135+
position:absolute;
136+
top:10px;
137+
left:92%;
138+
height:25px;
156139
}
157140

158141
.dialog_close_button img {
159-
border:0;
142+
border:0;
160143
}
161144

162145
.dialog_desc {
163-
padding: 10px 20px;
146+
padding: 10px 20px;
147+
}
148+
149+
/* native <dialog> element uses the ::backdrop pseudo-element */
150+
/*dialog::backdrop,*/
151+
.dialog-backdrop.active {
152+
position: fixed;
153+
overflow-y: scroll;
154+
top: 0px;
155+
right: 0px;
156+
bottom: 0px;
157+
left: 0px;
158+
background: rgba(0, 0, 0, 0.3);
164159
}

‎examples/dialog-modal/dialog.html‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ <h3>Notes on <code>aria-modal</code>and <code>aria-hidden</code></h3>
193193
As a new property, screen reader users may experience varying degrees of support for it.
194194
</li>
195195
<li>
196-
Applying the <code>aria-modal</code> property to the <code>dialog</code> element
196+
Applying the <code>aria-modal</code> property to the <code>dialog</code> element
197197
replaces the technique of using <code>aria-hidden</code> on the background for informing assistive technologies that content outside a dialog is inert.
198198
</li>
199199
<li>
@@ -232,7 +232,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
232232
<a href="../../#dialog_modal">Modal Dialog Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
233233
</nav>
234234
</div>
235-
<div id="dialog_layer">
235+
<div class="dialogs">
236236
<div role="dialog" id="dialog1" aria-labelledby="dialog1_label" aria-modal="true" class="hidden">
237237
<h2 id="dialog1_label">Add Delivery Address</h2>
238238
<div class="dialog_form">
@@ -280,8 +280,7 @@ <h2 id="dialog1_label">Add Delivery Address</h2>
280280

281281
<!-- Second modal to open on top of the first modal -->
282282
<div id="dialog2" role="dialog" aria-labelledby="dialog2_label"
283-
aria-describedby="dialog2_desc" aria-modal="true" class="hidden"
284-
>
283+
aria-describedby="dialog2_desc" aria-modal="true" class="hidden">
285284
<h2 id="dialog2_label">Verification Result</h2>
286285
<div id="dialog2_desc" class="dialog_desc">
287286
<p tabindex="-1" id="dialog2_para1">This is just a demonstration. If it were a real application, it would
@@ -341,8 +340,7 @@ <h2 id="dialog2_label">Verification Result</h2>
341340

342341
<!-- Dialog that replaces dialog 1. -->
343342
<div id="dialog3" role="dialog" aria-labelledby="dialog3_label"
344-
aria-describedby="dialog3_desc" aria-modal="true" class="hidden"
345-
>
343+
aria-describedby="dialog3_desc" aria-modal="true" class="hidden">
346344
<h2 id="dialog3_label">Address Added</h2>
347345
<p id="dialog3_desc" class="dialog_desc">
348346
The address you provided has been added to your list of delivery addresses. It is ready
@@ -356,8 +354,7 @@ <h2 id="dialog3_label">Address Added</h2>
356354

357355
<div id="dialog4" role="dialog" aria-labelledby="dialog4_label"
358356
aria-describedby="dialog4_desc" class="hidden"
359-
aria-modal="true"
360-
>
357+
aria-modal="true">
361358
<h2 id="dialog4_label">End of the Road!</h2>
362359
<p id="dialog4_desc" class="dialog_desc">
363360
You activated a fake link or button that goes nowhere!

‎examples/dialog-modal/js/dialog.js‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,21 @@ aria.Utils = aria.Utils || {};
131131
'Dialog() requires a DOM element with ARIA role of dialog.');
132132
}
133133

134+
// Wrap in an individual backdrop element if one doesn't exist
135+
// Native <dialog> elements use the ::backdrop pseudo-element, which
136+
// works similarly.
137+
var backdropClass = 'dialog-backdrop';
138+
if (this.dialogNode.parentNode.classList.contains(backdropClass)) {
139+
this.backdropNode = this.dialogNode.parentNode;
140+
}
141+
else {
142+
this.backdropNode = document.createElement('div');
143+
this.backdropNode.className = backdropClass;
144+
this.dialogNode.parentNode.insertBefore(this.backdropNode, this.dialogNode);
145+
this.backdropNode.appendChild(this.dialogNode);
146+
}
147+
this.backdropNode.classList.add('active');
148+
134149
if (typeof focusAfterClosed === 'string') {
135150
this.focusAfterClosed = document.getElementById(focusAfterClosed);
136151
}
@@ -175,9 +190,6 @@ aria.Utils = aria.Utils || {};
175190
this.clearDialog();
176191
this.dialogNode.className = 'default_dialog'; // make visible
177192

178-
var layer = document.getElementById('dialog_layer');
179-
layer.className = 'showing';
180-
181193
if (this.focusFirst) {
182194
this.focusFirst.focus();
183195
}
@@ -210,16 +222,13 @@ aria.Utils = aria.Utils || {};
210222
aria.Utils.remove(this.preNode);
211223
aria.Utils.remove(this.postNode);
212224
this.dialogNode.className = 'hidden';
225+
this.backdropNode.classList.remove('active');
213226
this.focusAfterClosed.focus();
214227

215228
// If a dialog was open underneath this one, restore its listeners.
216229
if (aria.OpenDialogList.length > 0) {
217230
aria.getCurrentDialog().addListeners();
218231
}
219-
else {
220-
var layer = document.getElementById('dialog_layer');
221-
layer.className = 'hidden';
222-
}
223232
}; // end close
224233

225234
/**
@@ -243,6 +252,8 @@ aria.Utils = aria.Utils || {};
243252
aria.Utils.remove(this.preNode);
244253
aria.Utils.remove(this.postNode);
245254
this.dialogNode.className = 'hidden';
255+
this.backdropNode.classList.remove('active');
256+
246257
var focusAfterClosed = newFocusAfterClosed || this.focusAfterClosed;
247258
var dialog = new aria.Dialog(newDialogId, focusAfterClosed, newFocusFirst);
248259
}; // end replace

0 commit comments

Comments
 (0)