examples/tree/ARIA.js

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