Skip to content

Commit

Permalink
Merge pull request #688 from sh0ji/alertdialog-example
Browse files Browse the repository at this point in the history 
Add Alert Dialog Example and update existing modal dialog.
  • Loading branch information
@mcking65
mcking65 authored Jun 24, 2018
2 parents 94ed309 + e739b6f commit 6f4eb22
Show file tree
Hide file tree
Showing 6 changed files with 663 additions and 236 deletions.
0 examples/alert/index.html → examples/alert/alert.html
View file
File renamed without changes.
241 changes: 241 additions & 0 deletions examples/dialog-modal/alertdialog.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,241 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Alert and Message Dialogs Example | WAI-ARIA Authoring Practices 1.1</title>
<!-- Core js and css shared by all examples; do not modify when using this template. -->
<link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
<link rel="stylesheet" href="../css/core.css">
<script src="../js/examples.js"></script>
<script src="../js/highlight.pack.js"></script>
<script src="../js/app.js"></script>
<!-- js from the dialog-modal example -->
<script src="../js/utils.js"></script>
<script src="js/dialog.js"></script>
<!-- js and css for this example. -->
<link href="css/dialog.css" rel="stylesheet">
<script src="js/alertdialog.js"></script>
</head>

<body>
<nav aria-labelledby="ex_related" class="feedback">
<header id="ex_related">Related Links</header>
<ul>
<li><a href="../../#browser_and_AT_support">Browser and Assistive Technology Support</a></li>
<li><a href="https://github.com/w3c/aria-practices/issues/new">Report Issue</a></li>
<li><a href="https://github.com/w3c/aria-practices/projects/20">Related Issues</a></li>
<li><a href="../../#alertdialog">Design Pattern</a></li>
</ul>
</nav>
<main aria-labelledby="main_label">
<h1 id="main_label">Alert Dialog Example</h1>
<p>
The below example demonstrates the <a href="../../#alertdialog">design pattern for an alert dialog</a>.
The <a href="../../#alert">design pattern for an alert</a> is also demonstrated to allow the user to experience the difference between the two patterns.
</p>
<p>User interactions for this interactive include:</p>
<ul>
<li>The "notes" <code>textarea</code> contains editable text that you are encouraged to modify.</li>
<li>
The "discard" <code>button</code> triggers a confirmation dialog.
<ul>
<li>Clicking "yes" will remove all contents of both the notes field and the user's local storage</li>
<li>Clicking "no" or pressing <kbd>escape</kbd> will simply close the dialog.</li>
<li>The "discard" <code>button</code> is disabled if the notes field does not contain any text.</li>
</ul>
</li>
<li>
The "save" <code>button</code> saves the contents of the "notes" <code>textarea</code> to your <a href="https://www.w3.org/TR/webstorage/#the-localstorage-attribute">local storage</a>.
<ul>
<li>A successful save will trigger a short <code>[role="alert"]</code> to notify you that your notes have been saved.</li>
<li>The "save" <code>button</code> is disabled if the user's local storage value is the same as the <code>textarea</code> value.</li>
</ul>
</li>
</ul>
<p>Similar examples include:</p>
<ul>
<li><a href="alert.html">Alert</a>: a basic alert.</li>
<li><a href="../dialog-modal/dialog.html">Modal Dialog</a>: an example of multiple modal dialogs.</li>
</ul>
<section aria-labelledby="ex_label">
<h2 id="ex_label">Example</h2>
<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>
<textarea class="notes" name="notes" id="notes" rows="7">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, similique, consequatur eaque, mollitia repellat cumque numquam fuga hic illo voluptas, alias officiis possimus assumenda natus eos ex. Quo, enim neque!</textarea>
<button type="button" aria-controls="notes" id="notes_save">Save</button>
<button type="button" aria-controls="notes" id="notes_discard" onclick="openAlertDialog('alert_dialog', this)">Discard</button>
<div role="alert" id="alert_toast" class="toast hidden">Nothing to discard.</div>
<div class="dialog-backdrop no-scroll">
<div id="alert_dialog" role="alertdialog" aria-modal="true" aria-labelledby="dialog_label" aria-describedby="dialog_desc" class="hidden">
<h2 id="dialog_label" class="dialog_label">Confirmation</h2>
<div id="dialog_desc" class="dialog_desc">
<p>Are you sure you want to discard all of your notes?</p>
</div>
<div class="dialog_form_actions">
<button type="button" onclick="closeDialog(this)">No</button>
<button type="button" aria-controls="notes" id="notes_confirm" onclick="discardInput(this)">Yes</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>
<section aria-labelledby="a11y_label">
<h2 id="a11y_label">Accessibility Features</h2>
<p>
Note that this example uses code from the <a href="../dialog-modal/dialog.html">modal dialog example</a> to handle the behavior of the <code>alertdialog</code>.
Referencing that example may also be useful.
</p>
<ol>
<li>The accessible label for the alert dialog is set to its heading ("Confirmation").</li>
<li>The dialog's prompt ("Are you sure...?") is referenced via <code>aria-describedby</code> to ensure that the user is immediately aware of the prompt.</li>
<li>
Focus is automatically set to the first focusable element inside the dialog, which is the "No" <code>button</code>.
This is the least destructive action, and will prevent the user from accidentally confirming the dialog.
</li>
<li>The user can dismiss the dialog with <kbd>Escape</kbd> at any time, or by clicking the "No" <code>button</code>.</li>
<li>
Once the user has removed the contents of the notes <code>textarea</code>, clicking the "discard notes" <code>button</code> cannot do anything.
To communicate this to the user, an alert with <code>role="alert"</code> is triggered.
</li>
</ol>
</section>
<section aria-labelledby="kbd_label">
<h2 id="kbd_label">Keyboard Support</h2>
<table aria-labelledby="kbd_label" class="def">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<th><kbd>Tab</kbd></th>
<td>
<ul>
<li>Moves focus to next focusable element inside the dialog.</li>
<li>When focus is on the last focusable element in the dialog, moves focus to the first focusable element in the dialog.</li>
</ul>
</td>
</tr>
<tr>
<th><kbd>Shift + Tab</kbd></th>
<td>
<ul>
<li>Moves focus to previous focusable element inside the dialog.</li>
<li>When focus is on the first focusable element in the dialog, moves focus to the last focusable element in the dialog.</li>
</ul>
</td>
</tr>
<tr>
<th><kbd>Escape</kbd></th>
<td>Closes the dialog.</td>
</tr>
<tr>
<th><kbd>Command + S</kbd></th>
<td>(Mac only) Save the contents of the notes <code>textarea</code> when focused.</td>
</tr>
<tr>
<th><kbd>Control + S</kbd></th>
<td>(Windows only) Save the contents of the notes <code>textarea</code> when focused.</td>
</tr>
</tbody>
</table>
</section>
<section aria-labelledby="rps_label">
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<table aria-labelledby="rps_label" class="data attributes">
<thead>
<tr>
<th scope="col">Role</th>
<th scope="col">Attribute</th>
<th scope="col">Element</th>
<th scope="col">Usage</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><code>alertdialog</code></th>
<td></td>
<td><code>div</code></td>
<td>
Identifies the element that serves as the alert dialog container.
</td>
</tr>
<tr>
<td></td>
<th scope="row"><code>aria-labelledby=<q>IDREF</q></code></th>
<td><code>div</code></td>
<td>
Gives the alert dialog an accessible name by referring to the element that provides the alert dialog title.
</td>
</tr>
<tr>
<td></td>
<th scope="row"><code>aria-describedby=<q>IDREF</q></code></th>
<td><code>div</code></td>
<td>
Gives the alert dialog an accessible description by referring to the alert dialog content that describes the primary message or purpose of the alert dialog.
</td>
</tr>
<tr>
<td></td>
<th scope="row"><code>aria-modal=<q>true</q></code></th>
<td><code>div</code></td>
<td>
Tells assistive technologies that the windows underneath the current alert dialog are not available for interaction (inert).
</td>
</tr>
<tr>
<th scope="row"><code>alert</code></th>
<td></td>
<td><code>div</code></td>
<td>
Identifies the element that serves as the alert notification.
</td>
</tr>
</tbody>
</table>
<h3>Notes on <code>aria-modal</code> and <code>aria-hidden</code></h3>
<ol>
<li>
The <code>aria-modal</code> property was introduced in ARIA 1.1.
As a new property, screen reader users may experience varying degrees of support for it.
</li>
<li>
Applying the <code>aria-modal</code> property to the <code>dialog</code> element
replaces the technique of using <code>aria-hidden</code> on the background for informing assistive technologies that content outside a dialog is inert.
</li>
<li>
In legacy dialog implementations where <code>aria-hidden</code> is used to make content outside a dialog inert for assistive technology users, it is important that:
<ol>
<li><code>aria-hidden</code> is set to <code>true</code> on each element containing a portion of the inert layer.</li>
<li>The dialog element is not a descendant of any element that has <code>aria-hidden</code> set to <code>true</code>.</li>
</ol>
</li>
</ol>
</section>
<section aria-labelledby="src_label">
<h2 id="src_label">Javascript and CSS Source Code</h2>
<ul>
<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></li>
</ul>
</section>
<section aria-labelledby="sc1_label">
<h2 id="sc1_label">HTML Source Code</h2>
<div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div> <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.make();
</script>
</section>
</main>
<nav>
<a href="../../#alertdialog">Alert and Message Dialogs Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
</nav>
</body>
</html>
131 changes: 67 additions & 64 deletions examples/dialog-modal/css/dialog.css
View file
Original file line number Diff line number Diff line change
@@ -1,76 +1,31 @@
html, body {
height: 100%;
}

body {
max-width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}

body:not(.toc-inline) {
padding: 0;
}

#base_window_layer {
box-sizing: border-box;
height: 100%;
width: 100%;
/* Use overflow scroll and webkit-overflow-scrolling to add momentum scroll*/
overflow: scroll;
-webkit-overflow-scrolling: touch;
padding: 1.6em 0 2em;
}

#base_window_layer main, #base_window_layer nav {
max-width: 50em;
margin: auto;
padding-right: 1.5em;
padding-left: 50px;
padding-left: calc(26px + 1.5em);
}

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

body:not(.toc-inline) {
padding: 0;
}
}

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


.hidden {
display: none
}

[role="alertdialog"],
[role="dialog"] {
width: 50%;
margin: 10vh auto;
padding: 5px;
border: thin #000 solid;
box-sizing: border-box;
padding: 15px;
border: 1px solid #000;
background-color: #fff;
min-height: 100vh;
}

@media screen and (max-width: 640px) {
@media screen and (min-width: 640px) {
[role="alertdialog"],
[role="dialog"] {
box-sizing: border-box;
top: 0px;
left: 0px;
margin: 0 auto;
min-height: 100%;
width: 100%;
position: absolute;
top: 2rem;
left: 50vw; /* move to the middle of the screen (assumes relative parent is the body/viewport) */
transform: translateX(-50%); /* move backwards 50% of this element's width */
min-width: calc(640px - (15px * 2)); /* == breakpoint - left+right margin */
min-height: auto;
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.12), 0 15px 12px rgba(0, 0, 0, 0.22);
}
}

[role="dialog"] h2:first-of-type {
text-align:center;
.dialog_label {
text-align: center;
}

.dialog_form {
Expand Down Expand Up @@ -148,12 +103,60 @@ body:not(.toc-inline) #main_content main, body:not(.toc-inline) #main_content na

/* native <dialog> element uses the ::backdrop pseudo-element */
/*dialog::backdrop,*/
.dialog-backdrop.active {
.dialog-backdrop {
display: none;
position: fixed;
overflow-y: scroll;
overflow-y: auto;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.3);
}

@media screen and (min-width: 640px) {
.dialog-backdrop {
background: rgba(0, 0, 0, 0.3);
}
}

.dialog-backdrop.active {
display: block;
}

.no-scroll {
overflow-y: auto !important;
}

/* this is added to the body when a dialog is open */
.has-dialog {
overflow: hidden;
}

/* styling for alert-dialog example */
.notes {
display: block;
font-size: 1rem;
line-height: 1.3;
min-width: 400px;
max-width: 100%;
width: 33%;
}

.toast {
background-color: rgba(0, 0, 0, 0.9);
color: #fff;
padding: 1rem;
border: none;
border-radius: 0.25rem;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);

position: fixed;
top: 1rem;
right: 1rem;
transform: translateY(-150%);
transition: transform 225ms cubic-bezier(0.4, 0.0, 0.2, 1);
}

.toast.active {
transform: translateY(0);
}
Loading

0 comments on commit 6f4eb22

Please sign in to comment.