Skip to content

Commit

Permalink
initial alertdialog
Browse files Browse the repository at this point in the history
  • Loading branch information
@sh0ji
sh0ji committed May 21, 2018
1 parent 6223a21 commit 07ba6d6
Show file tree
Hide file tree
Showing 3 changed files with 148 additions and 0 deletions.
73 changes: 73 additions & 0 deletions examples/alert/alert-dialog.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<!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 and css from the dialog-modal example -->
<link href="../dialog-modal/css/dialog.css" rel="stylesheet">
<script src="../js/utils.js" type="text/javascript"></script>
<script src="../dialog-modal/js/dialog.js" type="text/javascript"></script>
<!-- js and css for this example. -->
<link href="css/alert.css" rel="stylesheet">
<script src="js/alert-dialog.js" type="text/javascript"></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="ex_main">
<h1 id="ex_main">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> In this example, the "notes" <code>&lt;textarea&gt;</code> contains editable text that you are encouraged to modify. Pressing the "discard notes" button will trigger a confirmation dialog, but only if the notes field contains text. Clicking "yes" will remove all contents of the notes field, while clicking "no" or pressing escape will simply close the dialog. If the notes field does not contain any text, pressing the "discard nodes" button will trigger an alert notification that there is nothing to discard. This notification appears for 3 seconds, and then disappears, a pattern commonly referred to as a "toast notification." </p>
<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="ex1"> <label for="notes">
Notes
<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>
</label>
<button aria-controls="notes" onclick="openAlertDialog('alert_dialog', this)">Discard Notes</button>
</div>
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>

<div role="alert" id="alert_toast" class="toast hidden">Nothing to discard.</div>
<div class="dialog-backdrop no-scroll">
<div role="alertdialog" id="alert_dialog" 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 onclick="closeDialog(this)">No</button>
<button onclick="discardInput(this, 'notes')">Yes</button>
</div>
</div>
</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>. As such, referencing that example may 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" button. 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 selecting the "No" button.</li>
<li>Once the user has removed the contents of the notes <code>textarea</code>, clicking the "discard notes" button cannot do anything. To communicate this to the user, an alert with <code>role="alert"</code> is triggered.</li>
</ol>
</section>
</main>
</body>
</html>
24 changes: 24 additions & 0 deletions examples/alert/css/alert.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,27 @@
[role="alert"]:empty {
display: none;
}

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

[role="alert"].toast {
background-color: rgba(0, 0, 0, 0.7);
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: absolute;
bottom: 1rem;
left: 50%;
transform: translateX(-50%);
}
51 changes: 51 additions & 0 deletions examples/alert/js/alert-dialog.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
function initAlertDialog () {
function discardInput (closeButton, inputId) {
var input = document.getElementById(inputId);
input.value = '';
closeDialog(closeButton);
}

function triggerAlert (alertId) {
return new Promise(function (resolve, reject) {
try {
var alert = document.getElementById(alertId);
alert.classList.remove('hidden');
setTimeout(function () {
alert.classList.add('hidden');
resolve();
}, 3000);
}
catch (err) {
reject(err);
}
});
}

function openAlertDialog (dialogId, focusAfterClosed, focusFirst) {
var target = document.getElementById(focusAfterClosed.getAttribute('aria-controls'));
if (target && target.value) {
var dialog = document.getElementById(dialogId);
var desc = document.getElementById(dialog.getAttribute('aria-describedby'));
var wordCount = document.getElementById('word_count');
if (!wordCount) {
wordCount = document.createElement('p');
wordCount.id = 'word_count';
desc.appendChild(wordCount);
}
var count = target.value.split(/\s/).length;
var frag = (count > 1) ? 'words' : 'word';
wordCount.textContent = count + ' ' + frag + ' will be deleted.';
openDialog(dialogId, focusAfterClosed, focusFirst);
}
else {
triggerAlert('alert_toast').then(function () {
// optionally do something on notification end
});
}
}

window.openAlertDialog = openAlertDialog;
window.discardInput = discardInput;
}

document.addEventListener('DOMContentLoaded', initAlertDialog);

0 comments on commit 07ba6d6

Please sign in to comment.