aria tree view: move roles and aria-attributes to node span

Update #709
mar10 · May 5, 2017 · 84f0136 · 84f0136
1 parent 3ab1a4c
commit 84f0136
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 48 deletions.
diff --git 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
@@ -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
@@ -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("<span role='button' class='fancytree-expander fancytree-expander-fixed'></span>");
-				}else{
-					ares.push("<span class='fancytree-expander fancytree-expander-fixed''></span>");
-				}
+				ares.push("<span " + role + " class='fancytree-expander fancytree-expander-fixed'></span>");
 			}
 			// .. else (i.e. for root level) skip expander/connector alltogether
 		} else {
-			if(aria){
-				ares.push("<span role='button' class='fancytree-expander'></span>");
-			}else{
-				ares.push("<span class='fancytree-expander'></span>");
-			}
+			ares.push("<span " + role + " class='fancytree-expander'></span>");
 		}
 		// Checkbox mode
 		if( opts.checkbox && node.hideCheckbox !== true && !node.isStatusNode() ) {
-			if(aria){
-				ares.push("<span role='checkbox' class='fancytree-checkbox'></span>");
-			}else{
-				ares.push("<span class='fancytree-checkbox'></span>");
-			}
+			role = aria ? " role='checkbox'" : "";
+			ares.push("<span " + role + " class='fancytree-checkbox'></span>");
 		}
 		// 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 = "<span " + role + " class='fancytree-title'" +
@@ -3655,7 +3628,7 @@ $.extend(Fancytree.prototype,
 			return;
 		}
 		if( aria ) {
-			$ariaElem = node.tr ? $(node.tr) : $(node.span).find(".fancytree-title");
+			$ariaElem = node.tr ? $(node.tr) : $(node.span); //.find(".fancytree-title");
 		}
 		// Build a list of class names that we will add to the node <span>
 		cnList.push(cn.node);