Skip to content

Commit

Permalink
5 example pages: Add codepen button (#1601)
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@spectranaut
spectranaut committed Dec 1, 2020
1 parent 63a6bcc commit d012c92
Show file tree
Hide file tree
Showing 5 changed files with 159 additions and 150 deletions.
10 changes: 6 additions & 4 deletions examples/alert/alert.html
View file
Expand Up @@ -23,7 +23,7 @@
<li><a href="https://github.com/w3c/aria-practices/projects/20">Related Issues</a></li>
<li><a href="../../#alert">Design Pattern</a></li>
</ul>
</nav>
</nav>
<main>
<h1>Alert Example</h1>
<p>
Expand All @@ -35,7 +35,9 @@ <h1>Alert Example</h1>
<li><a href="../dialog-modal/alertdialog.html">Alert Dialog Example</a>: A confirmation prompt that demonstrates an alert dialog.</li>
</ul>
<section>
<h2 id="ex_label">Example</h2>
<div class="example-header">
<h2 id="ex_label">Example</h2>
</div>
<p>
This is just a test.
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.
Expand Down Expand Up @@ -113,7 +115,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>

<section>
<h2>Javascript and CSS Source Code</h2>
<ul>
<ul id="css_js_files">
<li>
CSS:
<a href="css/alert.css" type="tex/css">alert.css</a>
Expand All @@ -131,7 +133,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
<pre><code id="sc1"></code></pre>
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
<script>
sourceCode.add('sc1', 'ex1');
sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
sourceCode.make();
</script>
</section>
Expand Down
8 changes: 5 additions & 3 deletions examples/dialog-modal/alertdialog.html
View file
Expand Up @@ -61,7 +61,9 @@ <h1>Alert Dialog Example</h1>
<li><a href="datepicker-dialog.html">Date Picker Dialog example</a>: Demonstrates a dialog containing a calendar grid for choosing a date.</li>
</ul>
<section>
<h2 id="ex_label">Example</h2>
<div class="example-header">
<h2 id="ex_label">Example</h2>
</div>
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
<div id="ex_alertdialog">
<label for="notes">Notes</label>
Expand Down Expand Up @@ -213,7 +215,7 @@ <h3>Notes on <code>aria-modal</code> and <code>aria-hidden</code></h3>
</section>
<section>
<h2 id="src_label">Javascript and CSS Source Code</h2>
<ul>
<ul id="css_js_files">
<li> CSS: <a href="css/dialog.css" type="text/css">dialog.css</a></li>
<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>
</ul>
Expand All @@ -224,7 +226,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
<pre><code id="sc1"></code></pre>
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
<script>
sourceCode.add('sc1', 'ex_alertdialog');
sourceCode.add('sc1', 'ex_alertdialog', 'ex_label', 'css_js_files');
sourceCode.make();
</script>
</section>
Expand Down
275 changes: 138 additions & 137 deletions examples/dialog-modal/dialog.html
View file
Expand Up @@ -42,10 +42,145 @@ <h1>Modal Dialog Example</h1>
<li><a href="datepicker-dialog.html">Date Picker Dialog example</a>: Demonstrates a dialog containing a calendar grid for choosing a date.</li>
</ul>
<section>
<h2 id="ex_label">Example</h2>
<div class="example-header">
<h2 id="ex_label">Example</h2>
</div>
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
<div id="ex1">
<button type="button" onclick="openDialog('dialog1', this)">Add Delivery Address</button>
<div id="dialog_layer" class="dialogs">
<div role="dialog" id="dialog1" aria-labelledby="dialog1_label" aria-modal="true" class="hidden">
<h2 id="dialog1_label" class="dialog_label">Add Delivery Address</h2>
<div class="dialog_form">
<div class="dialog_form_item">
<label>
<span class="label_text">Street:</span>
<input type="text" class="wide_input">
</label>
</div>
<div class="dialog_form_item">
<label>
<span class="label_text">City:</span>
<input type="text" class="city_input">
</label>
</div>
<div class="dialog_form_item">
<label>
<span class="label_text">State:</span>
<input type="text" class="state_input">
</label>
</div>
<div class="dialog_form_item">
<label>
<span class="label_text">Zip:</span>
<input type="text" class="zip_input">
</label>
</div>

<div class="dialog_form_item">
<label for="special_instructions">
<span class="label_text">Special instructions:</span>
</label>
<input id="special_instructions" type="text" aria-describedby="special_instructions_desc" class="wide_input">
<div class="label_info" id="special_instructions_desc">
For example, gate code or other information to help the driver find you
</div>
</div>
</div>
<div class="dialog_form_actions">
<button type="button" onclick="openDialog('dialog2', this, 'dialog2_para1')">Verify Address</button>
<button type="button" onclick="replaceDialog('dialog3', undefined, 'dialog3_close_btn')">Add</button>
<button type="button" onclick="closeDialog(this)">Cancel</button>
</div>
</div>

<!-- Second modal to open on top of the first modal -->
<div id="dialog2" role="dialog" aria-labelledby="dialog2_label"
aria-describedby="dialog2_desc" aria-modal="true" class="hidden">
<h2 id="dialog2_label" class="dialog_label">Verification Result</h2>
<div id="dialog2_desc" class="dialog_desc">
<p tabindex="-1" id="dialog2_para1">This is just a demonstration. If it were a real application, it would
provide a message telling whether the entered address is valid.</p>
<p>
For demonstration purposes, this dialog has a lot of text. It demonstrates a
scenario where:
</p>
<ul>
<li>The first interactive element, the help link, is at the bottom of the dialog.</li>
<li>If focus is placed on the first interactive element when the dialog opens, the
validation message may not be visible.</li>
<li>If the validation message is visible and the focus is on the help link, then
the focus may not be visible.</li>
<li>
When the dialog opens, it is important that both:
<ul>
<li>The beginning of the text is visible so users do not have to scroll back to
start reading.</li>
<li>The keyboard focus always remains visible.</li>
</ul>
</li>
</ul>
<p>There are several ways to resolve this issue:</p>
<ul>
<li>Place an interactive element at the top of the dialog, e.g., a button or link.</li>
<li>Make a static element focusable, e.g., the dialog title or the first block of
text.</li>
</ul>
<p>
Please <em>DO NOT </em> make the element with role dialog focusable!
</p>
<ul>
<li>The larger a focusable element is, the more difficult it is to visually
identify the location of focus, especially for users with a narrow field of view.</li>
<li>The dialog has a visual border, so creating a clear visual indicator of focus
when the entire dialog has focus is not very feasible.
<li>Screen readers read the label and content of focusable elements. The dialog
contains its label and a lot of content! If a dialog like this one has focus, the
actual focus is difficult to comprehend.</li>
</ul>
<p>
In this dialog, the first paragraph has <code>tabindex=<q>-1</q></code>. The first
paragraph is also contained inside the element that provides the dialog description, i.e., the element that is referenced
by <code>aria-describedby</code>. With some screen readers, this may have one negative
but relatively insignificant side effect when the dialog opens -- the first paragraph
may be announced twice. Nonetheless, making the first paragraph focusable and setting
the initial focus on it is the most broadly accessible option.
</p>
</div>
<div class="dialog_form_actions">
<a href="#" onclick="openDialog('dialog4', this)">link to help</a>
<button type="button" onclick="openDialog('dialog4', this)">accepting an alternative form</button>
<button type="button" onclick="closeDialog(this)">Close</button>
</div>
</div>

<!-- Dialog that replaces dialog 1. -->
<div id="dialog3" role="dialog" aria-labelledby="dialog3_label"
aria-describedby="dialog3_desc" aria-modal="true" class="hidden">
<h2 id="dialog3_label" class="dialog_label">Address Added</h2>
<p id="dialog3_desc" class="dialog_desc">
The address you provided has been added to your list of delivery addresses. It is ready
for immediate use. If you wish to remove it, you can do so from
<a href="#" onclick="openDialog('dialog4', this)">your profile.</a>
</p>
<div class="dialog_form_actions">
<button type="button" id="dialog3_close_btn" onclick="closeDialog(this)">OK</button>
</div>
</div>

<div id="dialog4" role="dialog" aria-labelledby="dialog4_label"
aria-describedby="dialog4_desc" class="hidden"
aria-modal="true">
<h2 id="dialog4_label" class="dialog_label">End of the Road!</h2>
<p id="dialog4_desc" class="dialog_desc">
You activated a fake link or button that goes nowhere!
The link or button is present for demonstration purposes only.
</p>
<div class="dialog_form_actions">
<button type="button" id="dialog4_close_btn" onclick="closeDialog(this)">Close</button>
</div>
</div>
</div>
</div>
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
</section>
Expand Down Expand Up @@ -212,7 +347,7 @@ <h3>Notes on <code>aria-modal</code> and <code>aria-hidden</code></h3>

<section>
<h2>Javascript and CSS Source Code</h2>
<ul>
<ul id="css_js_files">
<li>
CSS:
<a href="css/dialog.css" type="tex/css">dialog.css</a>
Expand All @@ -235,143 +370,9 @@ <h2 id="sc1_label">HTML Source Code</h2>
<nav>
<a href="../../#dialog_modal">Modal Dialog Design Pattern in WAI-ARIA Authoring Practices 1.2</a>
</nav>
<div id="dialog_layer" class="dialogs">
<div role="dialog" id="dialog1" aria-labelledby="dialog1_label" aria-modal="true" class="hidden">
<h2 id="dialog1_label" class="dialog_label">Add Delivery Address</h2>
<div class="dialog_form">
<div class="dialog_form_item">
<label>
<span class="label_text">Street:</span>
<input type="text" class="wide_input">
</label>
</div>
<div class="dialog_form_item">
<label>
<span class="label_text">City:</span>
<input type="text" class="city_input">
</label>
</div>
<div class="dialog_form_item">
<label>
<span class="label_text">State:</span>
<input type="text" class="state_input">
</label>
</div>
<div class="dialog_form_item">
<label>
<span class="label_text">Zip:</span>
<input type="text" class="zip_input">
</label>
</div>

<div class="dialog_form_item">
<label for="special_instructions">
<span class="label_text">Special instructions:</span>
</label>
<input id="special_instructions" type="text" aria-describedby="special_instructions_desc" class="wide_input">
<div class="label_info" id="special_instructions_desc">
For example, gate code or other information to help the driver find you
</div>
</div>
</div>
<div class="dialog_form_actions">
<button type="button" onclick="openDialog('dialog2', this, 'dialog2_para1')">Verify Address</button>
<button type="button" onclick="replaceDialog('dialog3', undefined, 'dialog3_close_btn')">Add</button>
<button type="button" onclick="closeDialog(this)">Cancel</button>
</div>
</div>

<!-- Second modal to open on top of the first modal -->
<div id="dialog2" role="dialog" aria-labelledby="dialog2_label"
aria-describedby="dialog2_desc" aria-modal="true" class="hidden">
<h2 id="dialog2_label" class="dialog_label">Verification Result</h2>
<div id="dialog2_desc" class="dialog_desc">
<p tabindex="-1" id="dialog2_para1">This is just a demonstration. If it were a real application, it would
provide a message telling whether the entered address is valid.</p>
<p>
For demonstration purposes, this dialog has a lot of text. It demonstrates a
scenario where:
</p>
<ul>
<li>The first interactive element, the help link, is at the bottom of the dialog.</li>
<li>If focus is placed on the first interactive element when the dialog opens, the
validation message may not be visible.</li>
<li>If the validation message is visible and the focus is on the help link, then
the focus may not be visible.</li>
<li>
When the dialog opens, it is important that both:
<ul>
<li>The beginning of the text is visible so users do not have to scroll back to
start reading.</li>
<li>The keyboard focus always remains visible.</li>
</ul>
</li>
</ul>
<p>There are several ways to resolve this issue:</p>
<ul>
<li>Place an interactive element at the top of the dialog, e.g., a button or link.</li>
<li>Make a static element focusable, e.g., the dialog title or the first block of
text.</li>
</ul>
<p>
Please <em>DO NOT </em> make the element with role dialog focusable!
</p>
<ul>
<li>The larger a focusable element is, the more difficult it is to visually
identify the location of focus, especially for users with a narrow field of view.</li>
<li>The dialog has a visual border, so creating a clear visual indicator of focus
when the entire dialog has focus is not very feasible.
<li>Screen readers read the label and content of focusable elements. The dialog
contains its label and a lot of content! If a dialog like this one has focus, the
actual focus is difficult to comprehend.</li>
</ul>
<p>
In this dialog, the first paragraph has <code>tabindex=<q>-1</q></code>. The first
paragraph is also contained inside the element that provides the dialog description, i.e., the element that is referenced
by <code>aria-describedby</code>. With some screen readers, this may have one negative
but relatively insignificant side effect when the dialog opens -- the first paragraph
may be announced twice. Nonetheless, making the first paragraph focusable and setting
the initial focus on it is the most broadly accessible option.
</p>
</div>
<div class="dialog_form_actions">
<a href="#" onclick="openDialog('dialog4', this)">link to help</a>
<button type="button" onclick="openDialog('dialog4', this)">accepting an alternative form</button>
<button type="button" onclick="closeDialog(this)">Close</button>
</div>
</div>

<!-- Dialog that replaces dialog 1. -->
<div id="dialog3" role="dialog" aria-labelledby="dialog3_label"
aria-describedby="dialog3_desc" aria-modal="true" class="hidden">
<h2 id="dialog3_label" class="dialog_label">Address Added</h2>
<p id="dialog3_desc" class="dialog_desc">
The address you provided has been added to your list of delivery addresses. It is ready
for immediate use. If you wish to remove it, you can do so from
<a href="#" onclick="openDialog('dialog4', this)">your profile.</a>
</p>
<div class="dialog_form_actions">
<button type="button" id="dialog3_close_btn" onclick="closeDialog(this)">OK</button>
</div>
</div>

<div id="dialog4" role="dialog" aria-labelledby="dialog4_label"
aria-describedby="dialog4_desc" class="hidden"
aria-modal="true">
<h2 id="dialog4_label" class="dialog_label">End of the Road!</h2>
<p id="dialog4_desc" class="dialog_desc">
You activated a fake link or button that goes nowhere!
The link or button is present for demonstration purposes only.
</p>
<div class="dialog_form_actions">
<button type="button" id="dialog4_close_btn" onclick="closeDialog(this)">Close</button>
</div>
</div>
</div>

<script>
sourceCode.add('sc1', 'ex1');
sourceCode.add('sc1', 'dialog_layer');
sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
sourceCode.make();
</script>

Expand Down
8 changes: 5 additions & 3 deletions examples/radio/radio-activedescendant.html
View file
Expand Up @@ -36,7 +36,9 @@ <h1>Radio Group Example Using aria-activedescendant</h1>
<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>
</ul>
<section>
<h2 id="ex_label">Example</h2>
<div class="example-header">
<h2 id="ex_label">Example</h2>
</div>
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
<div id="ex1">
<h3 id="group_label_1">Pizza Crust</h3>
Expand Down Expand Up @@ -260,7 +262,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>

<section>
<h2>Javascript and CSS Source Code</h2>
<ul>
<ul id="css_js_files">
<li>CSS: <a href="css/radio.css" type="tex/css">radio.css</a></li>
<li>Javascript: <a href="js/radio-activedescendant.js" type="text/javascript">radio-activedescendant.js</a></li>
</ul>
Expand All @@ -277,7 +279,7 @@ <h2 id="sc1_label">HTML Source Code</h2>
If you change the ID of either the 'ex1' div or the 'sc1' div, be sure to update the sourceCode.add function parameters.
-->
<script>
sourceCode.add('sc1', 'ex1');
sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
sourceCode.make();
</script>
</section>
Expand Down

0 comments on commit d012c92

Please sign in to comment.