docs/source/ARIA.html

   1 <html>\r
   2 <head>\r
   3   <title>The source code</title>\r
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   6 </head>\r
   7 <body  onload="prettyPrint();">\r
   8     <pre class="prettyprint lang-js">(function() {\r
   9 \r
  10 Ext.a11y.ARIA = Ext.apply(new Ext.util.Observable(), function() {\r
  11     return {\r
  12         setRole : function(el, role) {\r
  13             el = Ext.getDom(el);\r
  14             if(el) {\r
  15                 el.setAttribute('role', role.toString());\r
  16             }\r
  17         },\r
  18         \r
  19         setProperty : function(el, key, value) {\r
  20             el = Ext.getDom(el);\r
  21             if(el) {\r
  22                 el.setAttribute(key.toString(), value.toString());\r
  23             }                \r
  24         }\r
  25     }\r
  26 }());\r
  27 \r
  28 var ARIA = Ext.a11y.ARIA;\r
  29 \r
  30 Ext.override(Ext.tree.TreeNode, {\r
  31     render : function(bulkRender){\r
  32         this.ui.render(bulkRender);\r
  33         if(!this.rendered){\r
  34             // make sure it is registered\r
  35             this.getOwnerTree().registerNode(this);\r
  36             this.rendered = true;\r
  37             this.fireEvent('noderender', this);\r
  38             if(this.expanded){\r
  39                 this.expanded = false;\r
  40                 this.expand(false, false);\r
  41             }\r
  42         }\r
  43     }\r
  44 });\r
  45 \r
  46 Ext.override(Ext.tree.TreePanel, {\r
  47     initARIA : function() {\r
  48         Ext.tree.TreePanel.superclass.initARIA.call(this);\r
  49         this.getSelectionModel().on('selectionchange', this.onNodeSelect, this);\r
  50         this.ariaTreeEl = this.body.down('.x-tree-root-ct');\r
  51         this.on('collapsenode', this.onNodeCollapse, this);\r
  52         this.on('expandnode', this.onNodeExpand, this);\r
  53     },\r
  54     \r
  55     // private\r
  56     registerNode : function(node){\r
  57         if(this.nodeHash[node.id] === undefined) {\r
  58             node.on('noderender', this.onNodeRender, this);\r
  59         }\r
  60         this.nodeHash[node.id] = node;\r
  61     },\r
  62 \r
  63     // private\r
  64     unregisterNode : function(node){\r
  65         node.un('noderender', this.onNodeRender, this);\r
  66         delete this.nodeHash[node.id];\r
  67     },\r
  68     \r
  69     onNodeRender : function(node) {\r
  70         var a = node.ui.anchor,\r
  71             level = this.rootVisible ? 1 : 0,\r
  72             pnode = node;\r
  73                                 \r
  74         if(node.isRoot) {\r
  75             ARIA.setRole(this.ariaTreeEl, 'tree');\r
  76             ARIA.setProperty(this.ariaTreeEl, 'aria-labelledby', Ext.id(node.ui.textNode));\r
  77             ARIA.setProperty(this.ariaTreeEl, 'aria-activedescendant', 'false');\r
  78             if(!this.rootVisible) {\r
  79                 return;\r
  80             }\r
  81         }\r
  82         ARIA.setRole(node.ui.wrap, 'treeitem');\r
  83         ARIA.setProperty(node.ui.wrap, 'aria-labelledby', Ext.id(node.ui.textNode));            \r
  84         ARIA.setProperty(node.ui.wrap, 'aria-expanded', 'false');\r
  85         ARIA.setProperty(node.ui.wrap, 'aria-selected', 'false');\r
  86         while (pnode.parentNode) {\r
  87             level++;\r
  88             pnode = pnode.parentNode;\r
  89         }\r
  90         ARIA.setProperty(node.ui.wrap, 'aria-level', level);   \r
  91         if(!node.isLeaf()) {\r
  92             ARIA.setRole(node.ui.ctNode, 'group');\r
  93             ARIA.setProperty(node.ui.wrap, 'aria-expanded', node.isExpanded());\r
  94         }\r
  95     },\r
  96     \r
  97     onNodeSelect : function(sm, node) {\r
  98         ARIA.setProperty(this.ariaTreeEl, 'aria-activedescendant', Ext.id(node.ui.wrap));\r
  99         ARIA.setProperty(node.ui.wrap, 'aria-selected', 'true');\r
 100     },\r
 101     \r
 102     onNodeCollapse : function(node) {\r
 103         ARIA.setProperty(node.ui.wrap, 'aria-expanded', 'false');\r
 104     },\r
 105     \r
 106     onNodeExpand : function(node) {\r
 107         ARIA.setProperty(node.ui.wrap, 'aria-expanded', 'true');\r
 108     }\r
 109 });\r
 110      \r
 111 })();</pre>    \r
 112 </body>\r
 113 </html>