Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Alert Dialog Example #688

Merged
merged 32 commits into from
Jun 24, 2018
+663 −236
Merged

Add Alert Dialog Example #688

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
6223a21
make room for alertdialog.html
sh0ji May 21, 2018
07ba6d6
initial alertdialog
sh0ji May 21, 2018
3c92514
editorial: fix fragment sentence
sh0ji May 21, 2018
ac5502f
target labels directly
sh0ji May 21, 2018
9b3e274
improve dialog sizing & positioning for desktop
sh0ji May 21, 2018
7ddd9c5
add box shadow
sh0ji May 21, 2018
c585cca
move to dialog-modal folder
sh0ji May 22, 2018
6de2fd0
add alertdialog to the list of valid Dialog roles
sh0ji May 22, 2018
704e4db
make the alert notification more prominent
sh0ji May 22, 2018
b64883f
remove #base_window_layer
sh0ji May 22, 2018
2300da9
make room for alertdialog.html
sh0ji May 21, 2018
e3fb535
initial alertdialog
sh0ji May 21, 2018
4228323
editorial: fix fragment sentence
sh0ji May 21, 2018
917678f
target labels directly
sh0ji May 21, 2018
6366416
improve dialog sizing & positioning for desktop
sh0ji May 21, 2018
e72cb94
add box shadow
sh0ji May 21, 2018
1c5996f
move to dialog-modal folder
sh0ji May 22, 2018
08adb33
add alertdialog to the list of valid Dialog roles
sh0ji May 22, 2018
7fb3064
make the alert notification more prominent
sh0ji May 22, 2018
7ac78fb
remove #base_window_layer
sh0ji May 22, 2018
ea4e5d5
clicking and selecting are different
sh0ji Jun 1, 2018
b2692e0
be more consistent about gt/lt usage
sh0ji Jun 1, 2018
0ba27b0
vnu: The “type” attribute is unnecessary for JavaScript resources.
sh0ji Jun 1, 2018
d61ceb0
serialize the interaction features for easier readability
sh0ji Jun 1, 2018
312fcc7
more consistent code highlighting
sh0ji Jun 1, 2018
f88cf4d
add a space
sh0ji Jun 1, 2018
9cc53ae
formatting
sh0ji Jun 1, 2018
239696f
more consistent language
sh0ji Jun 1, 2018
701c067
Merge branch 'alertdialog-example' of https://github.com/sh0ji/aria-p…
sh0ji Jun 1, 2018
7e1d8ad
remove redundant li
sh0ji Jun 18, 2018
60bca35
treat the alert like a notification that slides in on the top right
sh0ji Jun 18, 2018
e739b6f
redesign: implement save via local storage; repurpose alert for save
sh0ji Jun 18, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 examples/alert/index.html → examples/alert/alert.html
View file
Open in desktop
File renamed without changes.
241 changes: 241 additions & 0 deletions examples/dialog-modal/alertdialog.html
View file
Open in desktop
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
Open in desktop
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