Skip to content

Commit

Permalink
Separate aria 1.0 and aria 1.1 combobox example templates
Browse files Browse the repository at this point in the history 
* Made separate subdirectories for the aria 1.0 and aria 1.1 style examples.
* Made an HTML template file for each example using the latest template.
* Updated title tags and H1 elements for all the combobox example pages.
  • Loading branch information
@mcking65
mcking65 committed Feb 1, 2017
1 parent 69a36ff commit 93a8d91
Show file tree
Hide file tree
Showing 13 changed files with 1,365 additions and 610 deletions.
194 changes: 194 additions & 0 deletions examples/combobox/aria1.0pattern/combobox-autocomplete-both.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example of Legacy ARIA 1.0 Combobox With Both List and Inline Autocompletion | WAI-ARIA Authoring Practices 1.1</title>

<!-- Core js and css shared by all examples; do not modify when using this template. -->
<link href="../css/core.css" rel="stylesheet">
<link href="../css/table.css" rel="stylesheet">
<script src="../js/examples.js" type="text/javascript"></script>

<!-- js and css for this example. -->
<link href="css/combobox-1.0.css" rel="stylesheet">
<script src="js/combobox-1.0.js" type="text/javascript"></script>
</head>
<body>
<main>
<h1>Example of Legacy ARIA 1.0 Combobox With Both List and Inline Autocompletion</h1>
<p>
<strong>NOTE:</strong> This page is work in progress; it is not ready for review.
This work is tracked by <a href="https://github.com/w3c/aria-practices/issues/99">issue 99</a>.
</p>
<p>
<!-- Provide an overview of the example where the first sentence provides a link to the section of aria-practices.html that describes the pattern this example implements. -->
Replace this paragraph with an overview of the example that is something like the following. The
below example section demonstrates a simple checkbox that implements the
<a href="../../#checkbox">design pattern for checkbox.</a>
This example uses ... summarize salient techniques )
</p>
<p>Similar examples include: </p>
<ul>
<li><a href="#">example name</a>: summarize what this related example demonstrates.</li>
<!-- list other examples that implement the same design pattern. -->
</ul>

<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>
<!--
Note the ID of the following div that contains the example HTML is used as a parameter for the sourceCode.add() function.
The sourceCode functions in the examples/js/examples.js render the HTML source to show it to the reader of the example page.
If you change the ID of this div, be sure to update the parameters of the sourceCode.add() function call, which is made following the div with id="sc1" where the HTML is render.
The div for the rendered HTML source is in the last section of the page.
-->
<div id="ex1">
<!-- Replace content of this div with the example. -->
<p>This is the place where the reader will experience the functioning example.</p>
<ul>
<li>The HTML in this section along with the javascript and CSS it uses demonstrate
the design pattern.</li>
<li>
When developing an example implementation for this guide, please follow the
<a href="https://ianpouncey.github.io/code-guide/">APG example coding guidelines</a>
.
</li>
<!-- Target of previous link will need to be updated when we move the guidelines into the wiki from Ian's repo. -->
</ul>
</div>
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
</section>

<section>
<h2>Accessibility Features</h2>
<p class="annotate">Optional section: If appropriate, please replace this content with a list of any special or noteworthy accessibility features
demonstrated in this implementation, such as:</p>
<ol>
<li>What distinguishes this example from related examples.</li>
<li>Keyboard chortcuts, live regions, unusual event handling, or other ancillary best practices that are employed.</li>
<li>Do not include information that would be repeated in the following keyboard and attribute sections.</li>
<li>Delete this section if not needed.</li>
</ol>
</section>

<section>
<h2 id="kbd_label">Keyboard Support</h2>
<!--
List the keys supported in this example.
Remember to:
Use kbd tags,e.g. <kbd>KeyName</kbd>.
Key names use first-letter caps, e.g., <kbd>Enter</kbd>.
Single space between multiple Words, e.g., <kbd>Up Arrow</kbd>.
Use + to separate modifiers, e.g., <kbd>Control + Right Arrow</kbd>.
One key per row, e.g., do not combine <kbd>Up Arrow</kbd> and <kbd>Down Arrow</kbd> into a single row.
Do not use the word "key", e.g., do not write <kbd>Enter Key</kbd> or <kbd>Enter</kbd> key.
-->
<table aria-labelledby="kbd_label">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<th><kbd>KeyName</kbd></th>
<td>
Description of key function.
<!-- Do not use a list if there is only one function for the key. -->
</td>
</tr>
<tr>
<th><kbd>KeyName</kbd></th>
<td>
<ul>
<li>If condition 1, performs function 1.</li>
<li>If condition 2, performs function 2.</li>
<li>Only use a list if multiple statements are needed.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>

<section>
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<!--
Update this table to describe how roles, properties, states, and tabindex are used in this example.
-->
<table aria-labelledby="rps_label">
<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>RoleName</code></th>
<td><!-- Leave this cell blank in rows where a role is being described. --></td>
<td><code>HTML_ELEMENT</code></td>
<td>
Describe usage/purpose, e.g., indicates the focusable element that serves as the ...
</td>
</tr>
<tr>
<td>
<!-- Leave this cell blank in rows that describe attributes applied to the element with the previously described role.
Make a row like this for each attribute/value pair.
-->
</td>
<th scope="row"><code>AttributeName=<q>AttributeValue</q></code></th>
<td><code>HTML_ELEMENT</code></td>
<td>
<ul>
<li>explanation of usage, purpose, benefit, and/or guidance relevant to this implementation.</li>
<li>If making multiple statements, use list for brevity and clarity</li>
<li>Do not make a single item list.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>

<section>
<h2>Javascript and CSS Source Code</h2>
<!-- After the js and css files are named with the name of this example, change the href and text of the following 2 links to refer to the appropriate js and css files. -->
<ul>
<li>
CSS:
<a href="css/example_name.css" type="tex/css">example_name.css</a>
</li>
<li>
Javascript:
<a href="js/example_name.js" type="text/javascript">example_name.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>
<pre id="sc1"></pre>
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
<!--
The following script will show the reader the HTML source for the example that is in the div with ID 'ex1'.
It renders the HTML in the preceding pre element with ID 'sc1'.
If you change the ID of either the 'ex1' div or the 'sc1' pre, be sure to update the sourceCode.add function parameters.
-->
<script>
sourceCode.add('sc1', 'ex1');
sourceCode.make();
</script>
</section>
</main>
<nav>
<!-- Update the pattern_ID parameter of this link to refer to the APG design pattern section related to this example. -->
<a href="../../#pattern_ID">EXAMPLE_NAME Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
</nav>
</body>
</html>
194 changes: 194 additions & 0 deletions examples/combobox/aria1.0pattern/combobox-autocomplete-list.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Example of Legacy ARIA 1.0 Combobox With an Autocomplete List | WAI-ARIA Authoring Practices 1.1</title>

<!-- Core js and css shared by all examples; do not modify when using this template. -->
<link href="../css/core.css" rel="stylesheet">
<link href="../css/table.css" rel="stylesheet">
<script src="../js/examples.js" type="text/javascript"></script>

<!-- js and css for this example. -->
<link href="css/combobox-1.0.css" rel="stylesheet">
<script src="js/combobox-1.0.js" type="text/javascript"></script>
</head>
<body>
<main>
<h1>Example of Legacy ARIA 1.0 Combobox With an Autocomplete List</h1>
<p>
<strong>NOTE:</strong> This page is work in progress; it is not ready for review.
This work is tracked by <a href="https://github.com/w3c/aria-practices/issues/99">issue 99</a>.
</p>
<p>
<!-- Provide an overview of the example where the first sentence provides a link to the section of aria-practices.html that describes the pattern this example implements. -->
Replace this paragraph with an overview of the example that is something like the following. The
below example section demonstrates a simple checkbox that implements the
<a href="../../#checkbox">design pattern for checkbox.</a>
This example uses ... summarize salient techniques )
</p>
<p>Similar examples include: </p>
<ul>
<li><a href="#">example name</a>: summarize what this related example demonstrates.</li>
<!-- list other examples that implement the same design pattern. -->
</ul>

<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>
<!--
Note the ID of the following div that contains the example HTML is used as a parameter for the sourceCode.add() function.
The sourceCode functions in the examples/js/examples.js render the HTML source to show it to the reader of the example page.
If you change the ID of this div, be sure to update the parameters of the sourceCode.add() function call, which is made following the div with id="sc1" where the HTML is render.
The div for the rendered HTML source is in the last section of the page.
-->
<div id="ex1">
<!-- Replace content of this div with the example. -->
<p>This is the place where the reader will experience the functioning example.</p>
<ul>
<li>The HTML in this section along with the javascript and CSS it uses demonstrate
the design pattern.</li>
<li>
When developing an example implementation for this guide, please follow the
<a href="https://ianpouncey.github.io/code-guide/">APG example coding guidelines</a>
.
</li>
<!-- Target of previous link will need to be updated when we move the guidelines into the wiki from Ian's repo. -->
</ul>
</div>
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
</section>

<section>
<h2>Accessibility Features</h2>
<p class="annotate">Optional section: If appropriate, please replace this content with a list of any special or noteworthy accessibility features
demonstrated in this implementation, such as:</p>
<ol>
<li>What distinguishes this example from related examples.</li>
<li>Keyboard chortcuts, live regions, unusual event handling, or other ancillary best practices that are employed.</li>
<li>Do not include information that would be repeated in the following keyboard and attribute sections.</li>
<li>Delete this section if not needed.</li>
</ol>
</section>

<section>
<h2 id="kbd_label">Keyboard Support</h2>
<!--
List the keys supported in this example.
Remember to:
Use kbd tags,e.g. <kbd>KeyName</kbd>.
Key names use first-letter caps, e.g., <kbd>Enter</kbd>.
Single space between multiple Words, e.g., <kbd>Up Arrow</kbd>.
Use + to separate modifiers, e.g., <kbd>Control + Right Arrow</kbd>.
One key per row, e.g., do not combine <kbd>Up Arrow</kbd> and <kbd>Down Arrow</kbd> into a single row.
Do not use the word "key", e.g., do not write <kbd>Enter Key</kbd> or <kbd>Enter</kbd> key.
-->
<table aria-labelledby="kbd_label">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<th><kbd>KeyName</kbd></th>
<td>
Description of key function.
<!-- Do not use a list if there is only one function for the key. -->
</td>
</tr>
<tr>
<th><kbd>KeyName</kbd></th>
<td>
<ul>
<li>If condition 1, performs function 1.</li>
<li>If condition 2, performs function 2.</li>
<li>Only use a list if multiple statements are needed.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>

<section>
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
<!--
Update this table to describe how roles, properties, states, and tabindex are used in this example.
-->
<table aria-labelledby="rps_label">
<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>RoleName</code></th>
<td><!-- Leave this cell blank in rows where a role is being described. --></td>
<td><code>HTML_ELEMENT</code></td>
<td>
Describe usage/purpose, e.g., indicates the focusable element that serves as the ...
</td>
</tr>
<tr>
<td>
<!-- Leave this cell blank in rows that describe attributes applied to the element with the previously described role.
Make a row like this for each attribute/value pair.
-->
</td>
<th scope="row"><code>AttributeName=<q>AttributeValue</q></code></th>
<td><code>HTML_ELEMENT</code></td>
<td>
<ul>
<li>explanation of usage, purpose, benefit, and/or guidance relevant to this implementation.</li>
<li>If making multiple statements, use list for brevity and clarity</li>
<li>Do not make a single item list.</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>

<section>
<h2>Javascript and CSS Source Code</h2>
<!-- After the js and css files are named with the name of this example, change the href and text of the following 2 links to refer to the appropriate js and css files. -->
<ul>
<li>
CSS:
<a href="css/example_name.css" type="tex/css">example_name.css</a>
</li>
<li>
Javascript:
<a href="js/example_name.js" type="text/javascript">example_name.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>
<pre id="sc1"></pre>
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
<!--
The following script will show the reader the HTML source for the example that is in the div with ID 'ex1'.
It renders the HTML in the preceding pre element with ID 'sc1'.
If you change the ID of either the 'ex1' div or the 'sc1' pre, be sure to update the sourceCode.add function parameters.
-->
<script>
sourceCode.add('sc1', 'ex1');
sourceCode.make();
</script>
</section>
</main>
<nav>
<!-- Update the pattern_ID parameter of this link to refer to the APG design pattern section related to this example. -->
<a href="../../#pattern_ID">EXAMPLE_NAME Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
</nav>
</body>
</html>
Loading

0 comments on commit 93a8d91

Please sign in to comment.