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 @@