examples/tree/aria-tree.html

   1 <html>\r
   2 <head>\r
   3 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">\r
   4 <title>ARIA Enabled Tree</title>\r
   5     <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />\r
   6     <!-- Common Styles for the examples -->\r
   7     <link rel="stylesheet" type="text/css" href="../shared/examples.css" />\r
   8 \r
   9     <style type="text/css">\r
  10         #tree {\r
  11                 float:left;\r
  12                 margin:20px;\r
  13                 border:1px solid #c3daf9;\r
  14         }\r
  15         .folder .x-tree-node-icon{\r
  16                 background:transparent url(../../resources/images/default/tree/folder.gif);\r
  17         }\r
  18         .x-tree-node-expanded .x-tree-node-icon{\r
  19                 background:transparent url(../../resources/images/default/tree/folder-open.gif);\r
  20         }\r
  21         .x-a11y-focusframe {\r
  22             position: absolute;\r
  23             top: 0;\r
  24             left: 0;\r
  25             z-index: 10000000;\r
  26             width: 0;\r
  27             height: 0;\r
  28             font-size: 0;\r
  29         }\r
  30         .x-a11y-focusframe-side {\r
  31             position: absolute;\r
  32             font-size: 0;\r
  33             overflow: hidden;\r
  34         }\r
  35         .x-a11y-focusable:focus {\r
  36             outline: none\r
  37         }\r
  38         button.x-a11y-focusable::-moz-focus-inner{border:none}\r
  39     </style>\r
  40 \r
  41     <!-- GC -->\r
  42         <!-- LIBS -->\r
  43         <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>\r
  44         <!-- ENDLIBS -->\r
  45 \r
  46     <script type="text/javascript" src="../../ext-all.js"></script>\r
  47     <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->\r
  48     <script type="text/javascript" src="../ux/Focus.js"></script>\r
  49     <script type="text/javascript" src="ARIA.js"></script>\r
  50     <script type="text/javascript" src="aria-tree.js"></script>\r
  51 </head>\r
  52 \r
  53 <body role="">\r
  54     <h1>ARIA Enabled Tree</h1>\r
  55     <p>This example shows a TreePanel with ARIA enabled. Download a screenreader like NVDA and navigate to this page\r
  56     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
  57 \r
  58     <div id="tree"></div>\r
  59 </body>\r
  60 </html>\r