diff options
Diffstat (limited to 'testing/web-platform/tests/conformance-checkers/html-aria/_functional/tree/ariatree2.html')
| -rw-r--r-- | testing/web-platform/tests/conformance-checkers/html-aria/_functional/tree/ariatree2.html | 124 |
1 files changed, 124 insertions, 0 deletions
diff --git a/testing/web-platform/tests/conformance-checkers/html-aria/_functional/tree/ariatree2.html b/testing/web-platform/tests/conformance-checkers/html-aria/_functional/tree/ariatree2.html new file mode 100644 index 0000000000..3efe246488 --- /dev/null +++ b/testing/web-platform/tests/conformance-checkers/html-aria/_functional/tree/ariatree2.html @@ -0,0 +1,124 @@ +<!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 src="./js/prototype.js"></script> + <script src="./js/aria.js"></script> + <script 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> |