--- /dev/null
+<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
git.ithinksw.org / extjs.git / blobdiff