<!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>
