Skip to content

Commit

Permalink
Update alert example to new template
Browse files Browse the repository at this point in the history
  • Loading branch information
Michiel Bijl committed Jan 23, 2017
1 parent a1551ef commit 9f3209e
Showing 1 changed file with 71 additions and 39 deletions.
110 changes: 71 additions & 39 deletions examples/alert/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,90 +2,122 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ARIA Alert Role Example</title>
<title>Alert Example | WAI-ARIA Authoring Practices 1.1</title>
<link href="../css/core.css" rel="stylesheet">
<link href="../css/table.css" rel="stylesheet">
<script src="../js/examples.js" type="text/javascript"></script>
<link href="css/alert.css" rel="stylesheet">
<script src="js/alert.js" type="text/javascript"></script>
</head>
<body>
<script type="text/template" id="alert-template">
<div role="alert">
<p>Hej, hello, ciao, こんにちは, 안녕</p>
</div>
</script>

</head>
<body>
<main>
<h1>ARIA <code>alert</code> Role Example</h1>
<p>
<strong>Note:</strong>
This page requires updates per <a href="https://github.com/w3c/aria-practices/issues/185">issue 185.</a>
Please provide any additional feedback in this issue.
</p>
<h1>Alert Example</h1>

<p>This example shows a simple alert after you click the button.</p>
<p>
This example shows a simple alert after you click the button.
It’s implemented according to the <a href="../../#alert">design pattern for alert</a>.
</p>

<p><a href="../../#alert">More information on alert pattern</a></p>
<section>
<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">
<p><button id="alert-trigger">Trigger an alert</button></p>

<button id="alert-trigger">Trigger an alert</button>

<div id="example">
<div id="example">

</div>
</div>
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
</section>

<h2 id="id_a11yfeature">Accessibility Feature</h2>

<ul>
<section>
<h2>Accessibility Features</h2>
<ol>
<li><code>role=alert</code> identifies an element as an alert which is a specialized form of the <code>status</code> role.</li>
</ul>

<h2 id="id_kbd">Keyboard Support</h2>
</ol>
</section>

<section>
<h2 id="kbd_label">Keyboard Support</h2>
<p>No keyboard interaction needed.</p>
</section>

<h2 id="id_rps">ARIA Roles, Properties and States</h2>

<table aria-labelledby="id_rps">
<section>
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<table aria-labelledby="rps_label">
<thead>
<tr>
<th>Role</th>
<th>Property/State</th>
<th>Usage</th>
<th scope="col">Role</th>
<th scope="col">Attribute</th>
<th scope="col">Element</th>
<th scope="col">Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td>alert</td>
<th scope="row"><code>alert</code></th>
<td></td>
<td></td>
<td>
Identify element as Alert widget
</td>
</tr>
<tr>
<td></td>
<td><a href="http://www.w3.org/TR/wai-aria-1.1/#aria-live"><code>aria-live</code></a> with implicit value of assertive</td>
<td>
Announces alert when it is displayed.
</td>
<th scope="row"><a href="http://www.w3.org/TR/wai-aria-1.1/#aria-live"><code>aria-live</code></a> with implicit value of assertive</th>
<td></td>
<td>Announces alert when it is displayed.</td>
</tr>
<tr>
<td></td>
<td><a href="http://www.w3.org/TR/wai-aria-1.1/#aria-atomic"><code>aria-atomic</code></a> with implicit value of true</td>
<th scope="row"><a href="http://www.w3.org/TR/wai-aria-1.1/#aria-atomic"><code>aria-atomic</code></a> with implicit value of true</th>
<td></td>
<td>
Tells assistive technologies to announce all content.
</td>
</tr>
</tbody>
</table>
</section>

<script src="../js/examples.js" type="text/javascript"></script>

<h2>Source Code</h2>

<section>
<h2>Javascript and CSS Source Code</h2>
<ul>
<li>CSS: <a href="css/alert.css" type="tex/css">alert.css</a></li>
<li>Javascript: <a href="js/alert.js" type="text/javascript">alert.js</a></li>
<li>
CSS:
<a href="css/alert.css" type="tex/css">alert.css</a>
</li>
<li>
Javascript:
<a href="js/alert.js" type="text/javascript">alert.js</a>
</li>
</ul>
</section>

<section>
<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>
<div id="sc1"></div>
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
<pre id="sc1" class="sourcecode">
&lt;script type="text/template" id="alert-template"&gt;
&lt;div role="alert"&gt;
&lt;p&gt;Hej, hello, ciao, こんにちは, 안녕&lt;/p&gt;
&lt;/div&gt;
&lt;/script&gt;

&lt;button id="alert-trigger"&gt;Trigger an alert&lt;/button&gt;
</pre>
</section>
</main>
<nav>
<a href="../../#alert">Alert Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
</nav>
</body>
</html>

0 comments on commit 9f3209e

Please sign in to comment.