Skip to content

Commit d012c92

Browse files
spectranautspectranaut
authored
5 example pages: Add codepen button (#1601)
Added codepen buttons to the following examples: * dialog-modal/dialog.html * alert/alert.html * dialog-modal/alertdialog.html * radio/radio-activedescendant.html * radio/radio.html
1 parent 63a6bcc commit d012c92

File tree

5 files changed

+159
-150
lines changed

5 files changed

+159
-150
lines changed

‎examples/alert/alert.html

+6-4
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
<li><a href="https://github.com/w3c/aria-practices/projects/20">Related Issues</a></li>
2424
<li><a href="../../#alert">Design Pattern</a></li>
2525
</ul>
26-
</nav>
26+
</nav>
2727
<main>
2828
<h1>Alert Example</h1>
2929
<p>
@@ -35,7 +35,9 @@ <h1>Alert Example</h1>
3535
<li><a href="../dialog-modal/alertdialog.html">Alert Dialog Example</a>: A confirmation prompt that demonstrates an alert dialog.</li>
3636
</ul>
3737
<section>
38-
<h2 id="ex_label">Example</h2>
38+
<div class="example-header">
39+
<h2 id="ex_label">Example</h2>
40+
</div>
3941
<p>
4042
This is just a test.
4143
A typical alert is triggered by an event, such as an error, warning condition, or the arrival of information that is important in the context of the user's task.
@@ -113,7 +115,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
113115

114116
<section>
115117
<h2>Javascript and CSS Source Code</h2>
116-
<ul>
118+
<ul id="css_js_files">
117119
<li>
118120
CSS:
119121
<a href="css/alert.css" type="tex/css">alert.css</a>
@@ -131,7 +133,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
131133
<pre><code id="sc1"></code></pre>
132134
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
133135
<script>
134-
sourceCode.add('sc1', 'ex1');
136+
sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
135137
sourceCode.make();
136138
</script>
137139
</section>

‎examples/dialog-modal/alertdialog.html

+5-3
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,9 @@ <h1>Alert Dialog Example</h1>
6161
<li><a href="datepicker-dialog.html">Date Picker Dialog example</a>: Demonstrates a dialog containing a calendar grid for choosing a date.</li>
6262
</ul>
6363
<section>
64-
<h2 id="ex_label">Example</h2>
64+
<div class="example-header">
65+
<h2 id="ex_label">Example</h2>
66+
</div>
6567
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
6668
<div id="ex_alertdialog">
6769
<label for="notes">Notes</label>
@@ -213,7 +215,7 @@ <h3>Notes on <code>aria-modal</code> and <code>aria-hidden</code></h3>
213215
</section>
214216
<section>
215217
<h2 id="src_label">Javascript and CSS Source Code</h2>
216-
<ul>
218+
<ul id="css_js_files">
217219
<li> CSS: <a href="css/dialog.css" type="text/css">dialog.css</a></li>
218220
<li> Javascript: <a href="js/alertdialog.js" type="text/javascript">alertdialog.js</a>, <a href="js/dialog.js" type="text/javascript">dialog.js</a>, <a href="../js/utils.js">utils.js</a></li>
219221
</ul>
@@ -224,7 +226,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
224226
<pre><code id="sc1"></code></pre>
225227
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
226228
<script>
227-
sourceCode.add('sc1', 'ex_alertdialog');
229+
sourceCode.add('sc1', 'ex_alertdialog', 'ex_label', 'css_js_files');
228230
sourceCode.make();
229231
</script>
230232
</section>

‎examples/dialog-modal/dialog.html

+138-137
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,145 @@ <h1>Modal Dialog Example</h1>
4242
<li><a href="datepicker-dialog.html">Date Picker Dialog example</a>: Demonstrates a dialog containing a calendar grid for choosing a date.</li>
4343
</ul>
4444
<section>
45-
<h2 id="ex_label">Example</h2>
45+
<div class="example-header">
46+
<h2 id="ex_label">Example</h2>
47+
</div>
4648
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
4749
<div id="ex1">
4850
<button type="button" onclick="openDialog('dialog1', this)">Add Delivery Address</button>
51+
<div id="dialog_layer" class="dialogs">
52+
<div role="dialog" id="dialog1" aria-labelledby="dialog1_label" aria-modal="true" class="hidden">
53+
<h2 id="dialog1_label" class="dialog_label">Add Delivery Address</h2>
54+
<div class="dialog_form">
55+
<div class="dialog_form_item">
56+
<label>
57+
<span class="label_text">Street:</span>
58+
<input type="text" class="wide_input">
59+
</label>
60+
</div>
61+
<div class="dialog_form_item">
62+
<label>
63+
<span class="label_text">City:</span>
64+
<input type="text" class="city_input">
65+
</label>
66+
</div>
67+
<div class="dialog_form_item">
68+
<label>
69+
<span class="label_text">State:</span>
70+
<input type="text" class="state_input">
71+
</label>
72+
</div>
73+
<div class="dialog_form_item">
74+
<label>
75+
<span class="label_text">Zip:</span>
76+
<input type="text" class="zip_input">
77+
</label>
78+
</div>
79+
80+
<div class="dialog_form_item">
81+
<label for="special_instructions">
82+
<span class="label_text">Special instructions:</span>
83+
</label>
84+
<input id="special_instructions" type="text" aria-describedby="special_instructions_desc" class="wide_input">
85+
<div class="label_info" id="special_instructions_desc">
86+
For example, gate code or other information to help the driver find you
87+
</div>
88+
</div>
89+
</div>
90+
<div class="dialog_form_actions">
91+
<button type="button" onclick="openDialog('dialog2', this, 'dialog2_para1')">Verify Address</button>
92+
<button type="button" onclick="replaceDialog('dialog3', undefined, 'dialog3_close_btn')">Add</button>
93+
<button type="button" onclick="closeDialog(this)">Cancel</button>
94+
</div>
95+
</div>
96+
97+
<!-- Second modal to open on top of the first modal -->
98+
<div id="dialog2" role="dialog" aria-labelledby="dialog2_label"
99+
aria-describedby="dialog2_desc" aria-modal="true" class="hidden">
100+
<h2 id="dialog2_label" class="dialog_label">Verification Result</h2>
101+
<div id="dialog2_desc" class="dialog_desc">
102+
<p tabindex="-1" id="dialog2_para1">This is just a demonstration. If it were a real application, it would
103+
provide a message telling whether the entered address is valid.</p>
104+
<p>
105+
For demonstration purposes, this dialog has a lot of text. It demonstrates a
106+
scenario where:
107+
</p>
108+
<ul>
109+
<li>The first interactive element, the help link, is at the bottom of the dialog.</li>
110+
<li>If focus is placed on the first interactive element when the dialog opens, the
111+
validation message may not be visible.</li>
112+
<li>If the validation message is visible and the focus is on the help link, then
113+
the focus may not be visible.</li>
114+
<li>
115+
When the dialog opens, it is important that both:
116+
<ul>
117+
<li>The beginning of the text is visible so users do not have to scroll back to
118+
start reading.</li>
119+
<li>The keyboard focus always remains visible.</li>
120+
</ul>
121+
</li>
122+
</ul>
123+
<p>There are several ways to resolve this issue:</p>
124+
<ul>
125+
<li>Place an interactive element at the top of the dialog, e.g., a button or link.</li>
126+
<li>Make a static element focusable, e.g., the dialog title or the first block of
127+
text.</li>
128+
</ul>
129+
<p>
130+
Please <em>DO NOT </em> make the element with role dialog focusable!
131+
</p>
132+
<ul>
133+
<li>The larger a focusable element is, the more difficult it is to visually
134+
identify the location of focus, especially for users with a narrow field of view.</li>
135+
<li>The dialog has a visual border, so creating a clear visual indicator of focus
136+
when the entire dialog has focus is not very feasible.
137+
<li>Screen readers read the label and content of focusable elements. The dialog
138+
contains its label and a lot of content! If a dialog like this one has focus, the
139+
actual focus is difficult to comprehend.</li>
140+
</ul>
141+
<p>
142+
In this dialog, the first paragraph has <code>tabindex=<q>-1</q></code>. The first
143+
paragraph is also contained inside the element that provides the dialog description, i.e., the element that is referenced
144+
by <code>aria-describedby</code>. With some screen readers, this may have one negative
145+
but relatively insignificant side effect when the dialog opens -- the first paragraph
146+
may be announced twice. Nonetheless, making the first paragraph focusable and setting
147+
the initial focus on it is the most broadly accessible option.
148+
</p>
149+
</div>
150+
<div class="dialog_form_actions">
151+
<a href="#" onclick="openDialog('dialog4', this)">link to help</a>
152+
<button type="button" onclick="openDialog('dialog4', this)">accepting an alternative form</button>
153+
<button type="button" onclick="closeDialog(this)">Close</button>
154+
</div>
155+
</div>
156+
157+
<!-- Dialog that replaces dialog 1. -->
158+
<div id="dialog3" role="dialog" aria-labelledby="dialog3_label"
159+
aria-describedby="dialog3_desc" aria-modal="true" class="hidden">
160+
<h2 id="dialog3_label" class="dialog_label">Address Added</h2>
161+
<p id="dialog3_desc" class="dialog_desc">
162+
The address you provided has been added to your list of delivery addresses. It is ready
163+
for immediate use. If you wish to remove it, you can do so from
164+
<a href="#" onclick="openDialog('dialog4', this)">your profile.</a>
165+
</p>
166+
<div class="dialog_form_actions">
167+
<button type="button" id="dialog3_close_btn" onclick="closeDialog(this)">OK</button>
168+
</div>
169+
</div>
170+
171+
<div id="dialog4" role="dialog" aria-labelledby="dialog4_label"
172+
aria-describedby="dialog4_desc" class="hidden"
173+
aria-modal="true">
174+
<h2 id="dialog4_label" class="dialog_label">End of the Road!</h2>
175+
<p id="dialog4_desc" class="dialog_desc">
176+
You activated a fake link or button that goes nowhere!
177+
The link or button is present for demonstration purposes only.
178+
</p>
179+
<div class="dialog_form_actions">
180+
<button type="button" id="dialog4_close_btn" onclick="closeDialog(this)">Close</button>
181+
</div>
182+
</div>
183+
</div>
49184
</div>
50185
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
51186
</section>
@@ -212,7 +347,7 @@ <h3>Notes on <code>aria-modal</code> and <code>aria-hidden</code></h3>
212347

213348
<section>
214349
<h2>Javascript and CSS Source Code</h2>
215-
<ul>
350+
<ul id="css_js_files">
216351
<li>
217352
CSS:
218353
<a href="css/dialog.css" type="tex/css">dialog.css</a>
@@ -235,143 +370,9 @@ <h2 id="sc1_label">HTML Source Code</h2>
235370
<nav>
236371
<a href="../../#dialog_modal">Modal Dialog Design Pattern in WAI-ARIA Authoring Practices 1.2</a>
237372
</nav>
238-
<div id="dialog_layer" class="dialogs">
239-
<div role="dialog" id="dialog1" aria-labelledby="dialog1_label" aria-modal="true" class="hidden">
240-
<h2 id="dialog1_label" class="dialog_label">Add Delivery Address</h2>
241-
<div class="dialog_form">
242-
<div class="dialog_form_item">
243-
<label>
244-
<span class="label_text">Street:</span>
245-
<input type="text" class="wide_input">
246-
</label>
247-
</div>
248-
<div class="dialog_form_item">
249-
<label>
250-
<span class="label_text">City:</span>
251-
<input type="text" class="city_input">
252-
</label>
253-
</div>
254-
<div class="dialog_form_item">
255-
<label>
256-
<span class="label_text">State:</span>
257-
<input type="text" class="state_input">
258-
</label>
259-
</div>
260-
<div class="dialog_form_item">
261-
<label>
262-
<span class="label_text">Zip:</span>
263-
<input type="text" class="zip_input">
264-
</label>
265-
</div>
266-
267-
<div class="dialog_form_item">
268-
<label for="special_instructions">
269-
<span class="label_text">Special instructions:</span>
270-
</label>
271-
<input id="special_instructions" type="text" aria-describedby="special_instructions_desc" class="wide_input">
272-
<div class="label_info" id="special_instructions_desc">
273-
For example, gate code or other information to help the driver find you
274-
</div>
275-
</div>
276-
</div>
277-
<div class="dialog_form_actions">
278-
<button type="button" onclick="openDialog('dialog2', this, 'dialog2_para1')">Verify Address</button>
279-
<button type="button" onclick="replaceDialog('dialog3', undefined, 'dialog3_close_btn')">Add</button>
280-
<button type="button" onclick="closeDialog(this)">Cancel</button>
281-
</div>
282-
</div>
283-
284-
<!-- Second modal to open on top of the first modal -->
285-
<div id="dialog2" role="dialog" aria-labelledby="dialog2_label"
286-
aria-describedby="dialog2_desc" aria-modal="true" class="hidden">
287-
<h2 id="dialog2_label" class="dialog_label">Verification Result</h2>
288-
<div id="dialog2_desc" class="dialog_desc">
289-
<p tabindex="-1" id="dialog2_para1">This is just a demonstration. If it were a real application, it would
290-
provide a message telling whether the entered address is valid.</p>
291-
<p>
292-
For demonstration purposes, this dialog has a lot of text. It demonstrates a
293-
scenario where:
294-
</p>
295-
<ul>
296-
<li>The first interactive element, the help link, is at the bottom of the dialog.</li>
297-
<li>If focus is placed on the first interactive element when the dialog opens, the
298-
validation message may not be visible.</li>
299-
<li>If the validation message is visible and the focus is on the help link, then
300-
the focus may not be visible.</li>
301-
<li>
302-
When the dialog opens, it is important that both:
303-
<ul>
304-
<li>The beginning of the text is visible so users do not have to scroll back to
305-
start reading.</li>
306-
<li>The keyboard focus always remains visible.</li>
307-
</ul>
308-
</li>
309-
</ul>
310-
<p>There are several ways to resolve this issue:</p>
311-
<ul>
312-
<li>Place an interactive element at the top of the dialog, e.g., a button or link.</li>
313-
<li>Make a static element focusable, e.g., the dialog title or the first block of
314-
text.</li>
315-
</ul>
316-
<p>
317-
Please <em>DO NOT </em> make the element with role dialog focusable!
318-
</p>
319-
<ul>
320-
<li>The larger a focusable element is, the more difficult it is to visually
321-
identify the location of focus, especially for users with a narrow field of view.</li>
322-
<li>The dialog has a visual border, so creating a clear visual indicator of focus
323-
when the entire dialog has focus is not very feasible.
324-
<li>Screen readers read the label and content of focusable elements. The dialog
325-
contains its label and a lot of content! If a dialog like this one has focus, the
326-
actual focus is difficult to comprehend.</li>
327-
</ul>
328-
<p>
329-
In this dialog, the first paragraph has <code>tabindex=<q>-1</q></code>. The first
330-
paragraph is also contained inside the element that provides the dialog description, i.e., the element that is referenced
331-
by <code>aria-describedby</code>. With some screen readers, this may have one negative
332-
but relatively insignificant side effect when the dialog opens -- the first paragraph
333-
may be announced twice. Nonetheless, making the first paragraph focusable and setting
334-
the initial focus on it is the most broadly accessible option.
335-
</p>
336-
</div>
337-
<div class="dialog_form_actions">
338-
<a href="#" onclick="openDialog('dialog4', this)">link to help</a>
339-
<button type="button" onclick="openDialog('dialog4', this)">accepting an alternative form</button>
340-
<button type="button" onclick="closeDialog(this)">Close</button>
341-
</div>
342-
</div>
343-
344-
<!-- Dialog that replaces dialog 1. -->
345-
<div id="dialog3" role="dialog" aria-labelledby="dialog3_label"
346-
aria-describedby="dialog3_desc" aria-modal="true" class="hidden">
347-
<h2 id="dialog3_label" class="dialog_label">Address Added</h2>
348-
<p id="dialog3_desc" class="dialog_desc">
349-
The address you provided has been added to your list of delivery addresses. It is ready
350-
for immediate use. If you wish to remove it, you can do so from
351-
<a href="#" onclick="openDialog('dialog4', this)">your profile.</a>
352-
</p>
353-
<div class="dialog_form_actions">
354-
<button type="button" id="dialog3_close_btn" onclick="closeDialog(this)">OK</button>
355-
</div>
356-
</div>
357-
358-
<div id="dialog4" role="dialog" aria-labelledby="dialog4_label"
359-
aria-describedby="dialog4_desc" class="hidden"
360-
aria-modal="true">
361-
<h2 id="dialog4_label" class="dialog_label">End of the Road!</h2>
362-
<p id="dialog4_desc" class="dialog_desc">
363-
You activated a fake link or button that goes nowhere!
364-
The link or button is present for demonstration purposes only.
365-
</p>
366-
<div class="dialog_form_actions">
367-
<button type="button" id="dialog4_close_btn" onclick="closeDialog(this)">Close</button>
368-
</div>
369-
</div>
370-
</div>
371373

372374
<script>
373-
sourceCode.add('sc1', 'ex1');
374-
sourceCode.add('sc1', 'dialog_layer');
375+
sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
375376
sourceCode.make();
376377
</script>
377378

‎examples/radio/radio-activedescendant.html

+5-3
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,9 @@ <h1>Radio Group Example Using aria-activedescendant</h1>
3636
<li><a href="radio.html">Radio Group Example Using Roving tabindex</a>: A radio button group that uses roving <code>tabindex</code> for managing keyboard focus.</li>
3737
</ul>
3838
<section>
39-
<h2 id="ex_label">Example</h2>
39+
<div class="example-header">
40+
<h2 id="ex_label">Example</h2>
41+
</div>
4042
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
4143
<div id="ex1">
4244
<h3 id="group_label_1">Pizza Crust</h3>
@@ -260,7 +262,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
260262

261263
<section>
262264
<h2>Javascript and CSS Source Code</h2>
263-
<ul>
265+
<ul id="css_js_files">
264266
<li>CSS: <a href="css/radio.css" type="tex/css">radio.css</a></li>
265267
<li>Javascript: <a href="js/radio-activedescendant.js" type="text/javascript">radio-activedescendant.js</a></li>
266268
</ul>
@@ -277,7 +279,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
277279
If you change the ID of either the 'ex1' div or the 'sc1' div, be sure to update the sourceCode.add function parameters.
278280
-->
279281
<script>
280-
sourceCode.add('sc1', 'ex1');
282+
sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
281283
sourceCode.make();
282284
</script>
283285
</section>

0 commit comments

Comments
 (0)