examples/tree/ARIA.js

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