| <!DOCTYPE HTML><!-- HTML 5 --> |
| <html lang="en"> |
| <head> |
| <title>ARIA Tree Example</title> |
| <meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
| <link rel="stylesheet" href="./css/treebox.css" type="text/css"> |
| <script type="text/javascript" src="./js/prototype.js"></script> |
| <script type="text/javascript" src="./js/aria.js"></script> |
| <script type="text/javascript" src="./js/init.js"></script> |
| </head> |
| <body> |
| |
| <h1>Directions</h1> |
| <ol> |
| <li>Tab into the tree control.</li> |
| <li>Use the up/down arrow keys to change the active descendant.</li> |
| <li>Use the right/left arrow keys to expand/collapse appropriate nodes.</li> |
| </ol> |
| |
| <p>Some <a href="javascript:$('tree0').focus();">focusable</a> content before the ARIA application.</p> |
| |
| <div role="application"> |
| <h1 id="treelabel">ARIA Tree Example</h1> |
| <ul id="tree0" role="tree" aria-labelledby="treelabel" aria-activedescendant="tree0_item0_2_0_1" tabindex="0"> |
| <!-- all the ids and aria-* attributes are hardcoded here for sake of example (final version will use javascript to assign ids as needed) --> |
| <li id="tree0_item0" role="treeitem" aria-level="1" aria-expanded="true"> |
| <!-- .expander becomes the javascript trigger for expand/collapse --> |
| <span> |
| <span class="expander"></span> |
| Animals |
| </span> |
| <ul role="group"> |
| <li id="tree0_item0_0" role="treeitem" aria-level="2"><span>Birds</span></li> |
| <li id="tree0_item0_1" role="treeitem" aria-level="2" aria-expanded="false"> |
| <span> |
| <span class="expander"></span> |
| Cats |
| </span> |
| <ul role="group"> |
| <li id="tree0_item0_1_0" role="treeitem" aria-level="3"><span>Siamese</span></li> |
| <li id="tree0_item0_1_1" role="treeitem" aria-level="3"><span>Tabby</span></li> |
| </ul> |
| </li> |
| <li id="tree0_item0_2" role="treeitem" aria-level="2" aria-expanded="true"> |
| <span> |
| <span class="expander"></span> |
| Dogs |
| </span> |
| <ul role="group"> |
| <li id="tree0_item0_2_0" role="treeitem" aria-level="3" aria-expanded="true"> |
| <span> |
| <span class="expander"></span> |
| Small Breeds |
| </span> |
| <ul role="group"> |
| <li id="tree0_item0_2_0_0" role="treeitem" aria-level="4"><span>Chihuahua</span></li> |
| <li id="tree0_item0_2_0_1" role="treeitem" aria-level="4"><span>Italian Greyhound</span></li> |
| <li id="tree0_item0_2_0_2" role="treeitem" aria-level="4"><span>Japanese Chin</span></li> |
| </ul> |
| </li> |
| <li id="tree0_item0_2_1" role="treeitem" aria-level="3" aria-expanded="false"> |
| <span> |
| <span class="expander"></span> |
| Medium Breeds |
| </span> |
| <ul role="group"> |
| <li id="tree0_item0_2_1_0" role="treeitem" aria-level="4"><span>Beagle</span></li> |
| <li id="tree0_item0_2_1_1" role="treeitem" aria-level="4"><span>Cocker Spaniel</span></li> |
| <li id="tree0_item0_2_1_2" role="treeitem" aria-level="4"><span>Pit Bull</span></li> |
| </ul> |
| </li> |
| <li id="tree0_item0_2_2" role="treeitem" aria-level="3" aria-expanded="false"> |
| <span> |
| <span class="expander"></span> |
| Large Breeds |
| </span> |
| <ul role="group"> |
| <li id="tree0_item0_2_2_0" role="treeitem" aria-level="4"><span>Afghan</span></li> |
| <li id="tree0_item0_2_2_1" role="treeitem" aria-level="4"><span>Great Dane</span></li> |
| <li id="tree0_item0_2_2_2" role="treeitem" aria-level="4"><span>Mastiff</span></li> |
| </ul> |
| </li> |
| </ul> |
| </li> |
| </ul> |
| </li> |
| <li id="tree0_item1" role="treeitem" aria-level="1" aria-expanded="true"> |
| <span> |
| <span class="expander"></span> |
| Minerals |
| </span> |
| <ul role="group"> |
| <li id="tree0_item1_0" role="treeitem" aria-level="2"><span>Zinc</span></li> |
| <li id="tree0_item1_1" role="treeitem" aria-level="2" aria-expanded="false"> |
| <span> |
| <span class="expander"></span> |
| Gold |
| </span> |
| <ul role="group"> |
| <li id="tree0_item1_1_0" role="treeitem" aria-level="3"><span>Yellow Gold</span></li> |
| <li id="tree0_item1_1_1" role="treeitem" aria-level="3"><span>White Gold</span></li> |
| </ul> |
| </li> |
| <li id="tree0_item1_2" role="treeitem" aria-level="2"><span>Silver</span></li> |
| </ul> |
| </li> |
| <li id="tree0_item2" role="treeitem" aria-level="1" aria-expanded="true"> |
| <span> |
| <span class="expander"></span> |
| Vegetables |
| </span> |
| <ul role="group"> |
| <li id="tree0_item2_0" role="treeitem" aria-level="2"><span>Carrot</span></li> |
| <li id="tree0_item2_1" role="treeitem" aria-level="2"><span>Tomato</span></li> |
| <li id="tree0_item2_2" role="treeitem" aria-level="2"><span>Lettuce</span></li> |
| </ul> |
| </li> |
| </ul> |
| </div> |
| |
| <p>More <a href="javascript:$('tree0').focus();">focusable</a> content after the ARIA application.</p> |
| |
| </body> |
| </html> |
