Skip to content

Commit 93a8d91

Browse files
mcking65mcking65
committed
Separate aria 1.0 and aria 1.1 combobox example templates
* 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.
1 parent 69a36ff commit 93a8d91

13 files changed

+1365
-610
lines changed

‎examples/combobox/aria1.0pattern/combobox-autocomplete-both.html‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Example of Legacy ARIA 1.0 Combobox With Both List and Inline Autocompletion | WAI-ARIA Authoring Practices 1.1</title>
6+
7+
<!-- Core js and css shared by all examples; do not modify when using this template. -->
8+
<link href="../css/core.css" rel="stylesheet">
9+
<link href="../css/table.css" rel="stylesheet">
10+
<script src="../js/examples.js" type="text/javascript"></script>
11+
12+
<!-- js and css for this example. -->
13+
<link href="css/combobox-1.0.css" rel="stylesheet">
14+
<script src="js/combobox-1.0.js" type="text/javascript"></script>
15+
</head>
16+
<body>
17+
<main>
18+
<h1>Example of Legacy ARIA 1.0 Combobox With Both List and Inline Autocompletion</h1>
19+
<p>
20+
<strong>NOTE:</strong> This page is work in progress; it is not ready for review.
21+
This work is tracked by <a href="https://github.com/w3c/aria-practices/issues/99">issue 99</a>.
22+
</p>
23+
<p>
24+
<!-- 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. -->
25+
Replace this paragraph with an overview of the example that is something like the following. The
26+
below example section demonstrates a simple checkbox that implements the
27+
<a href="../../#checkbox">design pattern for checkbox.</a>
28+
This example uses ... summarize salient techniques )
29+
</p>
30+
<p>Similar examples include: </p>
31+
<ul>
32+
<li><a href="#">example name</a>: summarize what this related example demonstrates.</li>
33+
<!-- list other examples that implement the same design pattern. -->
34+
</ul>
35+
36+
<section>
37+
<h2 id="ex_label">Example</h2>
38+
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
39+
<!--
40+
Note the ID of the following div that contains the example HTML is used as a parameter for the sourceCode.add() function.
41+
The sourceCode functions in the examples/js/examples.js render the HTML source to show it to the reader of the example page.
42+
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.
43+
The div for the rendered HTML source is in the last section of the page.
44+
-->
45+
<div id="ex1">
46+
<!-- Replace content of this div with the example. -->
47+
<p>This is the place where the reader will experience the functioning example.</p>
48+
<ul>
49+
<li>The HTML in this section along with the javascript and CSS it uses demonstrate
50+
the design pattern.</li>
51+
<li>
52+
When developing an example implementation for this guide, please follow the
53+
<a href="https://ianpouncey.github.io/code-guide/">APG example coding guidelines</a>
54+
.
55+
</li>
56+
<!-- Target of previous link will need to be updated when we move the guidelines into the wiki from Ian's repo. -->
57+
</ul>
58+
</div>
59+
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
60+
</section>
61+
62+
<section>
63+
<h2>Accessibility Features</h2>
64+
<p class="annotate">Optional section: If appropriate, please replace this content with a list of any special or noteworthy accessibility features
65+
demonstrated in this implementation, such as:</p>
66+
<ol>
67+
<li>What distinguishes this example from related examples.</li>
68+
<li>Keyboard chortcuts, live regions, unusual event handling, or other ancillary best practices that are employed.</li>
69+
<li>Do not include information that would be repeated in the following keyboard and attribute sections.</li>
70+
<li>Delete this section if not needed.</li>
71+
</ol>
72+
</section>
73+
74+
<section>
75+
<h2 id="kbd_label">Keyboard Support</h2>
76+
<!--
77+
List the keys supported in this example.
78+
Remember to:
79+
Use kbd tags,e.g. <kbd>KeyName</kbd>.
80+
Key names use first-letter caps, e.g., <kbd>Enter</kbd>.
81+
Single space between multiple Words, e.g., <kbd>Up Arrow</kbd>.
82+
Use + to separate modifiers, e.g., <kbd>Control + Right Arrow</kbd>.
83+
One key per row, e.g., do not combine <kbd>Up Arrow</kbd> and <kbd>Down Arrow</kbd> into a single row.
84+
Do not use the word "key", e.g., do not write <kbd>Enter Key</kbd> or <kbd>Enter</kbd> key.
85+
-->
86+
<table aria-labelledby="kbd_label">
87+
<thead>
88+
<tr>
89+
<th>Key</th>
90+
<th>Function</th>
91+
</tr>
92+
</thead>
93+
<tbody>
94+
<tr>
95+
<th><kbd>KeyName</kbd></th>
96+
<td>
97+
Description of key function.
98+
<!-- Do not use a list if there is only one function for the key. -->
99+
</td>
100+
</tr>
101+
<tr>
102+
<th><kbd>KeyName</kbd></th>
103+
<td>
104+
<ul>
105+
<li>If condition 1, performs function 1.</li>
106+
<li>If condition 2, performs function 2.</li>
107+
<li>Only use a list if multiple statements are needed.</li>
108+
</ul>
109+
</td>
110+
</tr>
111+
</tbody>
112+
</table>
113+
</section>
114+
115+
<section>
116+
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
117+
<!--
118+
Update this table to describe how roles, properties, states, and tabindex are used in this example.
119+
-->
120+
<table aria-labelledby="rps_label">
121+
<thead>
122+
<tr>
123+
<th scope="col">Role</th>
124+
<th scope="col">Attribute</th>
125+
<th scope="col">Element</th>
126+
<th scope="col">Usage</th>
127+
</tr>
128+
</thead>
129+
<tbody>
130+
<tr>
131+
<th scope="row"><code>RoleName</code></th>
132+
<td><!-- Leave this cell blank in rows where a role is being described. --></td>
133+
<td><code>HTML_ELEMENT</code></td>
134+
<td>
135+
Describe usage/purpose, e.g., indicates the focusable element that serves as the ...
136+
</td>
137+
</tr>
138+
<tr>
139+
<td>
140+
<!-- Leave this cell blank in rows that describe attributes applied to the element with the previously described role.
141+
Make a row like this for each attribute/value pair.
142+
-->
143+
</td>
144+
<th scope="row"><code>AttributeName=<q>AttributeValue</q></code></th>
145+
<td><code>HTML_ELEMENT</code></td>
146+
<td>
147+
<ul>
148+
<li>explanation of usage, purpose, benefit, and/or guidance relevant to this implementation.</li>
149+
<li>If making multiple statements, use list for brevity and clarity</li>
150+
<li>Do not make a single item list.</li>
151+
</ul>
152+
</td>
153+
</tr>
154+
</tbody>
155+
</table>
156+
</section>
157+
158+
<section>
159+
<h2>Javascript and CSS Source Code</h2>
160+
<!-- 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. -->
161+
<ul>
162+
<li>
163+
CSS:
164+
<a href="css/example_name.css" type="tex/css">example_name.css</a>
165+
</li>
166+
<li>
167+
Javascript:
168+
<a href="js/example_name.js" type="text/javascript">example_name.js</a>
169+
</li>
170+
</ul>
171+
</section>
172+
173+
<section>
174+
<h2 id="sc1_label">HTML Source Code</h2>
175+
<div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
176+
<pre id="sc1"></pre>
177+
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
178+
<!--
179+
The following script will show the reader the HTML source for the example that is in the div with ID 'ex1'.
180+
It renders the HTML in the preceding pre element with ID 'sc1'.
181+
If you change the ID of either the 'ex1' div or the 'sc1' pre, be sure to update the sourceCode.add function parameters.
182+
-->
183+
<script>
184+
sourceCode.add('sc1', 'ex1');
185+
sourceCode.make();
186+
</script>
187+
</section>
188+
</main>
189+
<nav>
190+
<!-- Update the pattern_ID parameter of this link to refer to the APG design pattern section related to this example. -->
191+
<a href="../../#pattern_ID">EXAMPLE_NAME Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
192+
</nav>
193+
</body>
194+
</html>

‎examples/combobox/aria1.0pattern/combobox-autocomplete-list.html‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Example of Legacy ARIA 1.0 Combobox With an Autocomplete List | WAI-ARIA Authoring Practices 1.1</title>
6+
7+
<!-- Core js and css shared by all examples; do not modify when using this template. -->
8+
<link href="../css/core.css" rel="stylesheet">
9+
<link href="../css/table.css" rel="stylesheet">
10+
<script src="../js/examples.js" type="text/javascript"></script>
11+
12+
<!-- js and css for this example. -->
13+
<link href="css/combobox-1.0.css" rel="stylesheet">
14+
<script src="js/combobox-1.0.js" type="text/javascript"></script>
15+
</head>
16+
<body>
17+
<main>
18+
<h1>Example of Legacy ARIA 1.0 Combobox With an Autocomplete List</h1>
19+
<p>
20+
<strong>NOTE:</strong> This page is work in progress; it is not ready for review.
21+
This work is tracked by <a href="https://github.com/w3c/aria-practices/issues/99">issue 99</a>.
22+
</p>
23+
<p>
24+
<!-- 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. -->
25+
Replace this paragraph with an overview of the example that is something like the following. The
26+
below example section demonstrates a simple checkbox that implements the
27+
<a href="../../#checkbox">design pattern for checkbox.</a>
28+
This example uses ... summarize salient techniques )
29+
</p>
30+
<p>Similar examples include: </p>
31+
<ul>
32+
<li><a href="#">example name</a>: summarize what this related example demonstrates.</li>
33+
<!-- list other examples that implement the same design pattern. -->
34+
</ul>
35+
36+
<section>
37+
<h2 id="ex_label">Example</h2>
38+
<div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
39+
<!--
40+
Note the ID of the following div that contains the example HTML is used as a parameter for the sourceCode.add() function.
41+
The sourceCode functions in the examples/js/examples.js render the HTML source to show it to the reader of the example page.
42+
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.
43+
The div for the rendered HTML source is in the last section of the page.
44+
-->
45+
<div id="ex1">
46+
<!-- Replace content of this div with the example. -->
47+
<p>This is the place where the reader will experience the functioning example.</p>
48+
<ul>
49+
<li>The HTML in this section along with the javascript and CSS it uses demonstrate
50+
the design pattern.</li>
51+
<li>
52+
When developing an example implementation for this guide, please follow the
53+
<a href="https://ianpouncey.github.io/code-guide/">APG example coding guidelines</a>
54+
.
55+
</li>
56+
<!-- Target of previous link will need to be updated when we move the guidelines into the wiki from Ian's repo. -->
57+
</ul>
58+
</div>
59+
<div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
60+
</section>
61+
62+
<section>
63+
<h2>Accessibility Features</h2>
64+
<p class="annotate">Optional section: If appropriate, please replace this content with a list of any special or noteworthy accessibility features
65+
demonstrated in this implementation, such as:</p>
66+
<ol>
67+
<li>What distinguishes this example from related examples.</li>
68+
<li>Keyboard chortcuts, live regions, unusual event handling, or other ancillary best practices that are employed.</li>
69+
<li>Do not include information that would be repeated in the following keyboard and attribute sections.</li>
70+
<li>Delete this section if not needed.</li>
71+
</ol>
72+
</section>
73+
74+
<section>
75+
<h2 id="kbd_label">Keyboard Support</h2>
76+
<!--
77+
List the keys supported in this example.
78+
Remember to:
79+
Use kbd tags,e.g. <kbd>KeyName</kbd>.
80+
Key names use first-letter caps, e.g., <kbd>Enter</kbd>.
81+
Single space between multiple Words, e.g., <kbd>Up Arrow</kbd>.
82+
Use + to separate modifiers, e.g., <kbd>Control + Right Arrow</kbd>.
83+
One key per row, e.g., do not combine <kbd>Up Arrow</kbd> and <kbd>Down Arrow</kbd> into a single row.
84+
Do not use the word "key", e.g., do not write <kbd>Enter Key</kbd> or <kbd>Enter</kbd> key.
85+
-->
86+
<table aria-labelledby="kbd_label">
87+
<thead>
88+
<tr>
89+
<th>Key</th>
90+
<th>Function</th>
91+
</tr>
92+
</thead>
93+
<tbody>
94+
<tr>
95+
<th><kbd>KeyName</kbd></th>
96+
<td>
97+
Description of key function.
98+
<!-- Do not use a list if there is only one function for the key. -->
99+
</td>
100+
</tr>
101+
<tr>
102+
<th><kbd>KeyName</kbd></th>
103+
<td>
104+
<ul>
105+
<li>If condition 1, performs function 1.</li>
106+
<li>If condition 2, performs function 2.</li>
107+
<li>Only use a list if multiple statements are needed.</li>
108+
</ul>
109+
</td>
110+
</tr>
111+
</tbody>
112+
</table>
113+
</section>
114+
115+
<section>
116+
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
117+
<!--
118+
Update this table to describe how roles, properties, states, and tabindex are used in this example.
119+
-->
120+
<table aria-labelledby="rps_label">
121+
<thead>
122+
<tr>
123+
<th scope="col">Role</th>
124+
<th scope="col">Attribute</th>
125+
<th scope="col">Element</th>
126+
<th scope="col">Usage</th>
127+
</tr>
128+
</thead>
129+
<tbody>
130+
<tr>
131+
<th scope="row"><code>RoleName</code></th>
132+
<td><!-- Leave this cell blank in rows where a role is being described. --></td>
133+
<td><code>HTML_ELEMENT</code></td>
134+
<td>
135+
Describe usage/purpose, e.g., indicates the focusable element that serves as the ...
136+
</td>
137+
</tr>
138+
<tr>
139+
<td>
140+
<!-- Leave this cell blank in rows that describe attributes applied to the element with the previously described role.
141+
Make a row like this for each attribute/value pair.
142+
-->
143+
</td>
144+
<th scope="row"><code>AttributeName=<q>AttributeValue</q></code></th>
145+
<td><code>HTML_ELEMENT</code></td>
146+
<td>
147+
<ul>
148+
<li>explanation of usage, purpose, benefit, and/or guidance relevant to this implementation.</li>
149+
<li>If making multiple statements, use list for brevity and clarity</li>
150+
<li>Do not make a single item list.</li>
151+
</ul>
152+
</td>
153+
</tr>
154+
</tbody>
155+
</table>
156+
</section>
157+
158+
<section>
159+
<h2>Javascript and CSS Source Code</h2>
160+
<!-- 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. -->
161+
<ul>
162+
<li>
163+
CSS:
164+
<a href="css/example_name.css" type="tex/css">example_name.css</a>
165+
</li>
166+
<li>
167+
Javascript:
168+
<a href="js/example_name.js" type="text/javascript">example_name.js</a>
169+
</li>
170+
</ul>
171+
</section>
172+
173+
<section>
174+
<h2 id="sc1_label">HTML Source Code</h2>
175+
<div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
176+
<pre id="sc1"></pre>
177+
<div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
178+
<!--
179+
The following script will show the reader the HTML source for the example that is in the div with ID 'ex1'.
180+
It renders the HTML in the preceding pre element with ID 'sc1'.
181+
If you change the ID of either the 'ex1' div or the 'sc1' pre, be sure to update the sourceCode.add function parameters.
182+
-->
183+
<script>
184+
sourceCode.add('sc1', 'ex1');
185+
sourceCode.make();
186+
</script>
187+
</section>
188+
</main>
189+
<nav>
190+
<!-- Update the pattern_ID parameter of this link to refer to the APG design pattern section related to this example. -->
191+
<a href="../../#pattern_ID">EXAMPLE_NAME Design Pattern in WAI-ARIA Authoring Practices 1.1</a>
192+
</nav>
193+
</body>
194+
</html>

0 commit comments

Comments
 (0)