examples/tree/aria-tree.html

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