<!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/treesimple.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 class="expander"></span>
				Animals
				<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 class="expander"></span>
						Cats
						<ul role="group">
							<li id="tree0_item0_1_0" role="treeitem" aria-level="3">Siamese</li>
							<li id="tree0_item0_1_1" role="treeitem" aria-level="3">Tabby</li>
						</ul>
					</li>
					<li id="tree0_item0_2" role="treeitem" aria-level="2" aria-expanded="true">
						<span class="expander"></span>
						Dogs
						<ul role="group">
							<li id="tree0_item0_2_0" role="treeitem" aria-level="3" aria-expanded="true">
								<span class="expander"></span>
								Small Breeds
								<ul role="group">
									<li id="tree0_item0_2_0_0" role="treeitem" aria-level="4">Chihuahua</li>
									<li id="tree0_item0_2_0_1" role="treeitem" aria-level="4">Italian Greyhound</li>
									<li id="tree0_item0_2_0_2" role="treeitem" aria-level="4">Japanese Chin</li>
								</ul>
							</li>
							<li id="tree0_item0_2_1" role="treeitem" aria-level="3" aria-expanded="false">
								<span class="expander"></span>
								Medium Breeds
								<ul role="group">
									<li id="tree0_item0_2_1_0" role="treeitem" aria-level="4">Beagle</li>
									<li id="tree0_item0_2_1_1" role="treeitem" aria-level="4">Cocker Spaniel</li>
									<li id="tree0_item0_2_1_2" role="treeitem" aria-level="4">Pit Bull</li>
								</ul>
							</li>
							<li id="tree0_item0_2_2" role="treeitem" aria-level="3" aria-expanded="false">
								<span class="expander"></span>
								Large Breeds
								<ul role="group">
									<li id="tree0_item0_2_2_0" role="treeitem" aria-level="4">Afghan</li>
									<li id="tree0_item0_2_2_1" role="treeitem" aria-level="4">Great Dane</li>
									<li id="tree0_item0_2_2_2" role="treeitem" aria-level="4">Mastiff</li>
								</ul>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li id="tree0_item1" role="treeitem" aria-level="1" aria-expanded="true">
				<span class="expander"></span>
				Minerals
				<ul role="group">
					<li id="tree0_item1_0" role="treeitem" aria-level="2">Zinc</li>
					<li id="tree0_item1_1" role="treeitem" aria-level="2" aria-expanded="false">
						<span class="expander"></span>
						Gold
						<ul role="group">
							<li id="tree0_item1_1_0" role="treeitem" aria-level="3">Yellow Gold</li>
							<li id="tree0_item1_1_1" role="treeitem" aria-level="3">White Gold</li>
						</ul>
					</li>
					<li id="tree0_item1_2" role="treeitem" aria-level="2">Silver</li>
				</ul>
			</li>
			<li id="tree0_item2" role="treeitem" aria-level="1" aria-expanded="true">
				<span class="expander"></span>
				Vegetables
				<ul role="group">
					<li id="tree0_item2_0" role="treeitem" aria-level="2">Carrot</li>
					<li id="tree0_item2_1" role="treeitem" aria-level="2">Tomato</li>
					<li id="tree0_item2_2" role="treeitem" aria-level="2">Lettuce</li>
				</ul>
			</li>
		</ul>
	</div>
	
	<p>More <a href="javascript:$('tree0').focus();">focusable</a> content after the ARIA application.</p>
	
</body>
</html>
