Merge pull request #213 from ricksbrown/a11y

Add some a11y checking in debug mode

Author: ricksbrown

wcomponents-theme/src/main/js/wc/debug/a11y.js

@@ -1,13 +1,21 @@
-define(["axs", "wc/dom/initialise"], function(axs, initialise) {
+define(["axs", "wc/ui/loading"], function(axs, loading) {
 	"use strict";
 
-	initialise.addCallback(a11yTest);
+	loading.done.then(a11yTest);
 
+	/**
+	 * Run the accessbility test on the current page.
+	 */
 	function a11yTest() {
 		var auditConfig, issues;
 		try {
 			auditConfig = new axs.AuditConfiguration();
 			auditConfig.showUnsupportedRulesWarning = false;
+			auditConfig.scope = document.body;
+			/*
+			 * Skip "focusableElementNotVisibleAndNotAriaHidden" because it sets focus and that could be annoying.
+			 */
+			auditConfig.auditRulesToIgnore = ["focusableElementNotVisibleAndNotAriaHidden"];
 			issues = axs.Audit.run(auditConfig);
 			issues.forEach(formatIssue);
 		}
@@ -16,6 +24,11 @@ define(["axs", "wc/dom/initialise"], function(axs, initialise) {
 		}
 	}
 
+	/*
+	 * TODO hook this into a generic "debug messages" mechanism.
+	 * This could be a good place for an experiment such as mustache templates or webcomponents since it only runs when
+	 *    debug is enabled.
+	 */
 	function formatIssue(issue) {
 		var container = document.createElement("div"),
 			list = document.createElement("ul"),

wcomponents-theme/src/main/js/wc/ui/loading.js

@@ -11,17 +11,47 @@ define(["wc/dom/initialise", "wc/ui/modalShim"],
 	/** @param initialise wc/dom/initialise @param modalShim wc/ui/modalShim @ignore */
 	function(initialise, modalShim) {
 		"use strict";
-		initialise.addCallback(
-			function() {
+		var loading = {
+			/**
+			 * A Promise that is resolved when thepage is first initialized.
+			 * If other scripts wish to be notified when the UI is no longer in the loading state they can use this promise.
+			 * @var
+			 * @type {Promise}
+			 * @public
+			 */
+			done: new Promise(function(loaded, error) {
 				try {
-					var container = document.getElementById("wc_ui_loading");
-					if (container && container.parentNode) {
-						container.parentNode.removeChild(container);
-					}
+					postInit();
+					loaded();
 				}
-				finally {
-					modalShim.clearModal();
+				catch (ex) {
+					error(ex);
 				}
-			});
-		return true;
+			}),
+			/**
+			 * Call to dismiss the loading overlay (under normal circumstances this happens automatically).
+			 * @function module:wc/ui/loading.postInit
+			 * @public
+			 */
+			postInit: postInit
+		};
+
+		/**
+		 * Call when the DOM is loaded and UI controls are initialized to dismiss the loading overlay.
+		 * This is exposed as a public method since there are rare cases when it may need to be called manually.
+		 */
+		function postInit() {
+			try {
+				var container = document.getElementById("wc_ui_loading");
+				if (container && container.parentNode) {
+					container.parentNode.removeChild(container);
+				}
+			}
+			finally {
+				modalShim.clearModal();
+			}
+		}
+
+		initialise.register(loading);
+		return loading;
 	});

wcomponents-theme/src/main/xslt/wc.ui.root.xsl

@@ -56,10 +56,10 @@
 				<!-- We want to load up the CSS as soon as we can, so do it immediately after loading require. -->
 				<xsl:variable name="styleLoaderId" select="concat($scriptId,'-styleloader')"/>
 				<script type="text/javascript" id="{$styleLoaderId}">
-					<xsl:text>require(["wc/compat/compat!"], function(){</xsl:text>
+					<xsl:text>require(["wc/compat/compat!"], function() {</xsl:text>
 					<xsl:text>require(["wc/loader/style", "wc/dom/removeElement"</xsl:text>
 					<xsl:if test="$isDebug=1">
-						<xsl:text>,"wc/debug/consoleColor"</xsl:text>
+						<xsl:text>,"wc/debug/consoleColor", "wc/debug/a11y"</xsl:text>
 					</xsl:if>
 					<xsl:text>], function(s, r){try{s.load();}finally{r("</xsl:text>
 					<xsl:value-of select="$styleLoaderId"/>

wcomponents-theme/unbuilt.package.json

@@ -7,7 +7,7 @@
 		"jsdoc-oblivion": "~0.0.4"
 	},
 	"devDependencies": {
-		"accessibility-developer-tools": "2.9.0-rc.0",
+		"accessibility-developer-tools": "2.10.0",
 		"clean-css": "~3.4.3",
 		"css-b64-images": "~0.2.5",
 		"dojo": "~1.10.4",