Merge pull request #1812 from interactivellama/html-lint-tree-update

Update tree markup to have alert role on span

Author: futuremint

markup/tree-folders-selectable.html

@@ -12,7 +12,7 @@
 			</button>
 		</div>
 		<ul class="tree-branch-children" role="group"></ul>
-		<div class="tree-loader" role="alert">Loading...</div>
+		<div class="tree-loader"><span role="alert">Loading...</span></div>
 	</li>
 	<li class="tree-item hidden" data-template="treeitem" role="treeitem">
 		<button type="button" class="tree-item-name">

markup/tree.html

@@ -12,7 +12,7 @@
 			</button>
 		</div>
 		<ul class="tree-branch-children" role="group"></ul>
-		<div class="tree-loader" role="alert">Loading...</div>
+		<div class="tree-loader"><span role="alert">Loading...</span></div>
 	</li>
 	<li class="tree-item hidden" data-template="treeitem" role="treeitem">
 		<button type="button" class="tree-item-name">
@@ -26,7 +26,7 @@
 			<span class="tree-label"></span>
 		</button>
 	</li>
-	<li class="tree-loader hidden" role="alert">Loading...</li>
+	<li class="tree-loader hidden"><span role="alert">Loading...</span></li>
 </ul>
 </body>
 </html>

templates/handlebars/fuelux/tree.hbs

@@ -10,7 +10,7 @@
 		</div>
 		<ul class="tree-branch-children" role="group"></ul>
 		<!-- this loader shows on nested folders and when overflow is triggered -->
-		{{#if loaderHTML }}{{loaderHTML}}{{else}}<div class="tree-loader hidden" role="alert">Loading...</div>{{/if}}
+		{{#if loaderHTML }}{{loaderHTML}}{{else}}<div class="tree-loader hidden"><span role="alert">Loading...</span></div>{{/if}}
 	</li>
 	<li class="tree-item hidden" data-template="treeitem" role="treeitem">
 		<button type="button" class="tree-item-name">
@@ -25,5 +25,5 @@
 		</button>
 	</li>
 	<!-- Loader shown at root level and when tree is loading -->
-	{{#if initialLoaderHTML}}{{initialLoaderHTML}}{{else}}{{#if loaderHTML }}{{loaderHTML}}{{else}}<li class="tree-loader hidden" role="alert">Loading...</li>{{/if}}{{/if}}
+	{{#if initialLoaderHTML}}{{initialLoaderHTML}}{{else}}{{#if loaderHTML }}{{loaderHTML}}{{else}}<li class="tree-loader hidden"><span role="alert">Loading...</span></li>{{/if}}{{/if}}
 </ul>

test/markup/tree-markup.html

@@ -17,7 +17,7 @@
 					</button>
 				</div>
 				<ul class="tree-branch-children" role="group"></ul>
-				<div class="tree-loader" role="alert">Loading...</div>
+				<div class="tree-loader"><span role="alert">Loading...</span></div>
 			</li>
 			<!-- item template -->
 			<li class="tree-item hidden" data-template="treeitem" role="treeitem">
@@ -32,7 +32,7 @@
 					<span class="tree-label"></span>
 				</button>
 			</li>
-			<li class="tree-loader hidden" role="alert">Loading...</li>
+			<li class="tree-loader hidden"><span role="alert">Loading...</span></li>
 		</ul>
 
 		<ul id="MyTree2" class="tree" role="tree">
@@ -46,7 +46,7 @@
 					</button>
 				</div>
 				<ul class="tree-branch-children" role="group"></ul>
-				<div class="tree-loader" role="alert">Loading...</div>
+				<div class="tree-loader"><span role="alert">Loading...</span></div>
 			</li>
 			<!-- item template -->
 			<li class="tree-item hidden" data-template="treeitem" role="treeitem">
@@ -61,7 +61,7 @@
 					<span class="tree-label"></span>
 				</button>
 			</li>
-			<li class="tree-loader hidden" role="alert">Loading...</li>
+			<li class="tree-loader hidden"><span role="alert">Loading...</span></li>
 		</ul>
 
 	</div>
@@ -82,7 +82,7 @@
 					</button>
 				</div>
 				<ul class="tree-branch-children"></ul>
-				<div class="tree-loader" role="alert">Loading...</div>
+				<div class="tree-loader"><span role="alert">Loading...</span></div>
 			</li>
 			<!-- item template -->
 			<li class="tree-item hidden" data-template="treeitem" role="treeitem">
@@ -97,7 +97,7 @@
 					<span class="tree-label"></span>
 				</button>
 			</li>
-			<li class="tree-loader hidden" role="alert">Loading...</li>
+			<li class="tree-loader hidden"><span role="alert">Loading...</span></li>
 		</ul>
 
 	</div>