diff --git a/wcomponents-theme/src/main/js/wc/debug/a11y.js b/wcomponents-theme/src/main/js/wc/debug/a11y.js
index 8e217ea02..c03f766b4 100755
--- a/wcomponents-theme/src/main/js/wc/debug/a11y.js
+++ b/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"),
diff --git a/wcomponents-theme/src/main/js/wc/ui/loading.js b/wcomponents-theme/src/main/js/wc/ui/loading.js
index 8828d37cd..82fe9274a 100755
--- a/wcomponents-theme/src/main/js/wc/ui/loading.js
+++ b/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;
});
diff --git a/wcomponents-theme/src/main/xslt/wc.ui.root.xsl b/wcomponents-theme/src/main/xslt/wc.ui.root.xsl
index 8fc27b232..122edf96e 100755
--- a/wcomponents-theme/src/main/xslt/wc.ui.root.xsl
+++ b/wcomponents-theme/src/main/xslt/wc.ui.root.xsl
@@ -56,10 +56,10 @@