Skip to content

Commit

Permalink
Stub out treegrid pattern and example page for issue #91 and issue 132.
Browse files Browse the repository at this point in the history 
1. Modified aria-practices:
    * Add placeholder section for treegrid design pattern.
    * Add link to treegrid example page.
2. Add new template file: examples/treegrid/css/treegrid.css
3. Add nnew template file: examples/treegrid/js/treegrid.js
4. Add new template file:   examples/treegrid/treegrid-1.html
  • Loading branch information
@mcking65
mcking65 committed Apr 17, 2017
1 parent db3bb0a commit 3a85c1c
Show file tree
Hide file tree
Showing 4 changed files with 248 additions and 0 deletions.
30 changes: 30 additions & 0 deletions aria-practices.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2025,6 +2025,36 @@ <h4>Example</h4>
</section>
</section>

<section class="widget" id="treegrid">
<h3>Tree Grid</h3>
<p>
<strong>NOTE:</strong> This section is not complete.
Development of content for this pattern is tracked by
<a href="https://github.com/w3c/aria-practices/issues/91">issue 91.</a>
</p>
<p>
Place holder for description
</p>
<section class="notoc">
<h4>Keyboard Interaction</h4>
<p>Placeholder for list of key commands</p>
</section>

<section class="notoc">
<h4>WAI-ARIA Roles, States, and Properties</h4>
<p>Placeholder for list of states and props</p>
</section>

<section class="notoc">
<h4>Examples</h4>
<ul>
<li>
<a href="examples/treegrid/treegrid-1.html">Treegrid Email Inbox Example</a>
</li>
</ul>
</section>
</section>

<section class="widget" id="TreeView">
<h3>Tree View</h3>
<p>
Expand Down
4 changes: 4 additions & 0 deletions examples/treegrid/css/treegrid.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.annotate{
font-style: italic;
color: #366ED4;
}
3 changes: 3 additions & 0 deletions examples/treegrid/js/treegrid.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
/**
* Rename this file to the name of the example, e.g., checkbox.js.
*/
211 changes: 211 additions & 0 deletions examples/treegrid/treegrid-1.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,211 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />

<!--
Give this example implementation a name and put it in the title element,
e.g., "Checkbox" if implementing the checkbox pattern.
The name should be unique if the pattern will have multiple implementations,
e.g., "Simple Two-State Checkbox" or "Three-State Checkbox".
-->
<title>Treegrid Email Inbox 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 for this example. -->
<link href="css/treegrid.css" rel="stylesheet">
<script src="js/treegrid.js" type="text/javascript"></script>
</head>
<body>
<main>
<h1>Treegrid Email Inbox Example</h1>
<p>
<strong>NOTE:</strong> This example page is not yet complete.
Development of this example is tracked by
<a href="https://github.com/w3c/aria-practices/issues/132">issue 132.</a>
</p>
<p>
The following example demonstrates how the
<a href="../../#treegrid">treegrid design pattern.</a>
can be used to make an interactive tree that enables users to navigate the hierarchical structure of email conversations
and also provides the ability to navigate to elements that describe each email, such as subject and sender.
</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. -->

<script type="text/javascript">
<!-- Javascript relavant to example -->
var i;
var str = "text"
for(i = 0; i < str.length; i++) {
console.log(str[i]);
var code = "<p>Hello World!</p>";
}
</script>
</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" class="def">
<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" 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>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><code id="sc1"></code></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>

0 comments on commit 3a85c1c

Please sign in to comment.