Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / examples / tree / aria-tree.html
diff --git a/examples/tree/aria-tree.html b/examples/tree/aria-tree.html
new file mode 100644 (file)
index 0000000..cd1010f
--- /dev/null
@@ -0,0 +1,60 @@
+<html>\r
+<head>\r
+<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">\r
+<title>ARIA Enabled Tree</title>\r
+    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />\r
+    <!-- Common Styles for the examples -->\r
+    <link rel="stylesheet" type="text/css" href="../shared/examples.css" />\r
+\r
+    <style type="text/css">\r
+        #tree {\r
+               float:left;\r
+               margin:20px;\r
+               border:1px solid #c3daf9;\r
+        }\r
+        .folder .x-tree-node-icon{\r
+               background:transparent url(../../resources/images/default/tree/folder.gif);\r
+       }\r
+       .x-tree-node-expanded .x-tree-node-icon{\r
+               background:transparent url(../../resources/images/default/tree/folder-open.gif);\r
+       }\r
+        .x-a11y-focusframe {\r
+            position: absolute;\r
+            top: 0;\r
+            left: 0;\r
+            z-index: 10000000;\r
+            width: 0;\r
+            height: 0;\r
+            font-size: 0;\r
+        }\r
+        .x-a11y-focusframe-side {\r
+            position: absolute;\r
+            font-size: 0;\r
+            overflow: hidden;\r
+        }\r
+        .x-a11y-focusable:focus {\r
+            outline: none\r
+        }\r
+        button.x-a11y-focusable::-moz-focus-inner{border:none}\r
+    </style>\r
+\r
+    <!-- GC -->\r
+       <!-- LIBS -->\r
+       <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>\r
+       <!-- ENDLIBS -->\r
+\r
+    <script type="text/javascript" src="../../ext-all.js"></script>\r
+    <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->\r
+    <script type="text/javascript" src="../ux/Focus.js"></script>\r
+    <script type="text/javascript" src="ARIA.js"></script>\r
+    <script type="text/javascript" src="aria-tree.js"></script>\r
+</head>\r
+\r
+<body role="">\r
+    <h1>ARIA Enabled Tree</h1>\r
+    <p>This example shows a TreePanel with ARIA enabled. Download a screenreader like NVDA and navigate to this page\r
+    to test. By default the tree will be focused. Press down to select the root node and start navigating using the arrow keys.</p>\r
+\r
+    <div id="tree"></div>\r
+</body>\r
+</html>\r