diff --git a/CHANGELOG.md b/CHANGELOG.md index 80b3250a..abae89fc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,10 +1,13 @@ # 2.23.0-0 / Unreleased - * [Added] `ext-ariagrid` (experimental) + * [Added] #709 `ext-ariagrid` (experimental) * [Added] #730 ext-persist option `expandOpts` is passed to setExpanded() Allows to suppress animation or event generation. +# 2.22.4 / Unreleased + * [Improved] #709 experimental ext-ariagrid + # 2.22.3 / 2017-05-05 - * [Improved] experimental ext-ariagrid + * [Improved] #709 experimental ext-ariagrid # 2.22.2 / 2017-04-29 * [Fixed] #729 Fix regression with addChild performance improvements (#708) diff --git a/src/jquery.fancytree.ariagrid.js b/src/jquery.fancytree.ariagrid.js index b4a1d251..e845b8ff 100644 --- a/src/jquery.fancytree.ariagrid.js +++ b/src/jquery.fancytree.ariagrid.js @@ -31,16 +31,10 @@ - In strict mode, how can a user leave an embedded text input, if it is the only control in a row? - - Use aria-expanded on the row except in the cellFocus=force case, in which - case it should be on the title cell - => what if cellFocus=start, but in cell-mode? - - If rows are hidden I suggest aria-hidden="true" on them (may be optional) => aria-hidden currently not set (instead: style="display: none") needs to be added to ext-table - - Don't put role="button" on expanders if they are not visible (leaf nodes) - - enable treeOpts.aria by default => requires some benchmarks, confirm it does not affect performance too much diff --git a/src/jquery.fancytree.js b/src/jquery.fancytree.js index 74a5ef0c..c98602b9 100644 --- a/src/jquery.fancytree.js +++ b/src/jquery.fancytree.js @@ -3389,18 +3389,17 @@ $.extend(Fancytree.prototype, node.li = document.createElement("li"); node.li.ftnode = node; - // We set role 'treeitem' to the title span instead - if(aria){ - // TODO: why does the next line don't work: - // node.li.role = "treeitem"; - // $(node.li).attr("role", "treeitem"); - // .attr("aria-labelledby", "ftal_" + opts.idPrefix + node.key); - } + // if(aria){ + // $(node.li).attr("role", "treeitem"); + // } if( node.key && opts.generateIds ){ node.li.id = opts.idPrefix + node.key; } node.span = document.createElement("span"); node.span.className = "fancytree-node"; + if( aria && !node.tr ) { + $(node.span).attr("role", "treeitem"); + } // if(aria){ // $(node.li).attr("aria-labelledby", "ftal_" + opts.idPrefix + node.key); // } @@ -3520,32 +3519,22 @@ $.extend(Fancytree.prototype, return; } // Connector (expanded, expandable or simple) + role = (aria && node.hasChildren() !== false) ? " role='button'" : ""; if( level < opts.minExpandLevel ) { if( !node.lazy ) { node.expanded = true; } if(level > 1){ - if(aria){ - ares.push(""); - }else{ - ares.push(""); - } + ares.push(""); } // .. else (i.e. for root level) skip expander/connector alltogether } else { - if(aria){ - ares.push(""); - }else{ - ares.push(""); - } + ares.push(""); } // Checkbox mode if( opts.checkbox && node.hideCheckbox !== true && !node.isStatusNode() ) { - if(aria){ - ares.push(""); - }else{ - ares.push(""); - } + role = aria ? " role='checkbox'" : ""; + ares.push(""); } // Folder or doctype icon if( node.data.iconClass !== undefined ) { // 2015-11-16 @@ -3566,22 +3555,6 @@ $.extend(Fancytree.prototype, // icon is defined, but not true/false: must be a string icon = "" + icon; } - // if( $.isFunction(opts.icon) ) { - // icon = opts.icon.call(tree, {type: "icon"}, ctx); - // if( icon == null ) { - // icon = node.icon; - // } - // } else { - // icon = (node.icon != null) ? node.icon : opts.icon; - // } - // if( icon == null ) { - // icon = true; // no icon option at all: show default icon - // } else { - // if( typeof icon !== "boolean" ) { - // // icon is defined, but not true/false: must be a string - // icon = "" + icon; - // } - // } if( icon !== false ) { role = aria ? " role='presentation'" : ""; if ( typeof icon === "string" ) { @@ -3612,7 +3585,7 @@ $.extend(Fancytree.prototype, // id = aria ? " id='ftal_" + opts.idPrefix + node.key + "'" : ""; id = ""; // role = ""; - role = (aria && !node.tr) ? " role='treeitem'" : ""; + role = ""; // (aria && !node.tr) ? " role='treeitem'" : ""; tabindex = opts.titlesTabbable ? " tabindex='0'" : ""; nodeTitle = " cnList.push(cn.node);