(GH1964) adds hbs support for aria-label and aria-labelledby

Author: Christopher McCulloh

Diff for: index.html

@@ -2071,7 +2071,7 @@ <h5>Choose Folder Location</h5>
 							</div>
 
 							<div class="picker-body well">
-								<ul class="tree" id="myPickerTree1" role="tree">
+								<ul class="tree" id="myPickerTree1" role="tree" aria-activedescendant="" aria-label="My Tree">
 									<li class="tree-branch hidden" data-template="treebranch" role="treeitem" aria-expanded="false">
 										<div class="tree-branch-header">
 											<button type="button" class="glyphicon icon-caret glyphicon-play"><span class="sr-only">Open</span>
@@ -2113,10 +2113,10 @@ <h5>Choose Folder Location</h5>
 				<h2>Tree</h2>
 				<div class="thin-box">
 					<!-- Utilizes Handlebars templates (see index.js) -->
-					<h3>folders selectable (please note structure of treebranch)</h3>
+					<h3 id="myTreeLabel">folders selectable (please note structure of treebranch)</h3>
 					<div id="myTreeWrapper"></div>
 
-					<h3>only items selectable (please note structure of treebranch)</h3>
+					<h3 id="myTree2Label">only items selectable (please note structure of treebranch)</h3>
 					<div id="myTree2Wrapper"></div>
 
 				</div>

Diff for: index.js

@@ -999,7 +999,7 @@ define(function (require) {
 
 	var tree = require('hbs!fuelux_templates/tree');
 	var $myTreeWrapper = $('#myTreeWrapper');
-	$myTreeWrapper.html(tree({id: 'myTree', folderSelect: true}));
+	$myTreeWrapper.html(tree({id: 'myTree', labelledBy: 'myTreeLabel', folderSelect: true}));
 
 	var treeDataSource = function (parentData, callback) {
 		log('Opening branch data: ', parentData);
@@ -1099,7 +1099,7 @@ define(function (require) {
 	// initialize
 	function myTreeInit () {
 		var $myTree2Wrapper = $('#myTree2Wrapper');
-		$myTree2Wrapper.html(tree({id: 'myTree2'}));
+		$myTree2Wrapper.html(tree({id: 'myTree2', labelledBy: 'myTree2Label'}));
 
 		var callLimit = 200;
 		var callCount = 0;

Diff for: templates/handlebars/fuelux/tree.hbs

@@ -1,4 +1,9 @@
-<ul class="tree {{#if folderSelect}}tree-folder-select{{/if}}" id="{{#if id}}{{id}}{{else}}myTree{{/if}}" role="tree" aria-activedescendant="">
+<ul class="tree {{#if folderSelect}}tree-folder-select{{/if}}"
+	id="{{#if id}}{{id}}{{else}}myTree{{/if}}"
+	role="tree"
+	aria-activedescendant=""
+	{{#unless labelledBy}}aria-label="{{#if label}}{{label}}{{/if}}"{{/unless}}
+	{{#if labelledBy}}aria-labelledby="{{labelledBy}}"{{/if}}>
 	<li class="tree-branch hidden" data-template="treebranch" role="treeitem" aria-expanded="false">
 		<div class="tree-branch-header">
 			{{#if folderSelect}}<button type="button" class="glyphicon icon-caret glyphicon-play" tabindex="-1"><span class="sr-only">Open</span></button>{{/if}}

Diff for: test/markup/tree-markup.html

@@ -6,7 +6,7 @@
 	<label class="control-label">Items selectable only</label>
 	<div class="form-group">
 
-		<ul class="tree" id="MyTree" role="tree" aria-activedescendant="">
+		<ul class="tree" id="MyTree" role="tree" aria-activedescendant="" aria-label="My Tree">
 			<li class="tree-branch hidden" data-template="treebranch" role="treeitem" aria-expanded="false">
 				<div class="tree-branch-header">
 					<button type="button" class="tree-branch-name" tabindex="-1">
@@ -33,7 +33,7 @@
 			<li class="tree-loader hidden"><span role="alert">Loading...</span></li>
 		</ul>
 
-		<ul class="tree" id="MyTree2" role="tree" aria-activedescendant="">
+		<ul class="tree" id="MyTree2" role="tree" aria-activedescendant="" aria-label="My Tree 2">
 			<li class="tree-branch hidden" data-template="treebranch" role="treeitem" aria-expanded="false">
 				<div class="tree-branch-header">
 					<button type="button" class="tree-branch-name" tabindex="-1">
@@ -67,7 +67,7 @@
 	<label class="control-label">Folders selectable</label>
 	<div class="form-group">
 
-		<ul id="MyTreeSelectableFolder" class="tree tree-folder-select" role="tree" aria-activedescendant="">
+		<ul id="MyTreeSelectableFolder" class="tree tree-folder-select" role="tree" aria-activedescendant=""  aria-label="My Tree Selectable">
 			<li class="tree-branch hidden" data-template="treebranch" role="treeitem" aria-expanded="false">
 				<div class="tree-branch-header">
 					<button type="button" class="tree-branch-name" tabindex="-1">