MDL-56350 tool_usertours: Apply aria-hidden to other page elements
[moodle.git] / admin / tool / usertours / amd / src / tour.js
index 46a0e19..1f7d0c6 100644 (file)
@@ -722,7 +722,11 @@ Tour.prototype.addStepToPage = function (stepConfig) {
     var animationTarget = $('body, html').stop(true, true);
 
     if (this.isStepActuallyVisible(stepConfig)) {
-        var zIndex = this.calculateZIndex(this.getStepTarget(stepConfig));
+        var targetNode = this.getStepTarget(stepConfig);
+
+        targetNode.data('flexitour', 'target');
+
+        var zIndex = this.calculateZIndex(targetNode);
         if (zIndex) {
             stepConfig.zIndex = zIndex + 1;
         }
@@ -774,6 +778,7 @@ Tour.prototype.addStepToPage = function (stepConfig) {
         this.currentStepNode.offset(this.calculateStepPositionInPage());
 
         this.currentStepPopper = new Popper($('body'), this.currentStepNode[0], {
+            removeOnDestroy: true,
             placement: stepConfig.placement + '-start',
             arrowElement: '[data-role="arrow"]',
             // Empty the modifiers. We've already placed the step and don't want it moved.
@@ -847,6 +852,8 @@ Tour.prototype.announceStep = function (stepConfig) {
         target.data('original-describedby', target.attr('aria-describedby')).attr('aria-describedby', stepId + '-body');
     }
 
+    this.accessibilityShow(stepConfig);
+
     return this;
 };
 
@@ -1036,6 +1043,8 @@ Tour.prototype.hide = function (transition) {
     // Reset the listeners.
     this.resetStepListeners();
 
+    this.accessibilityHide();
+
     this.fireEventHandlers('afterHide');
 
     this.currentStepNode = null;
@@ -1372,6 +1381,50 @@ Tour.prototype.centerPopper = function (data) {
     return data;
 };
 
+Tour.prototype.accessibilityShow = function (stepConfig) {
+    var stateHolder = 'data-has-hidden';
+    var attrName = 'aria-hidden';
+    var hideFunction = function hideFunction(child) {
+        var flexitourRole = child.data('flexitour');
+        if (flexitourRole) {
+            switch (flexitourRole) {
+                case 'container':
+                case 'target':
+                    return;
+            }
+        }
+
+        var hidden = child.attr(attrName);
+        if (!hidden) {
+            child.attr(stateHolder, true);
+            child.attr(attrName, true);
+        }
+    };
+
+    this.currentStepNode.siblings().each(function (index, node) {
+        hideFunction($(node));
+    });
+    this.currentStepNode.parentsUntil('body').siblings().each(function (index, node) {
+        hideFunction($(node));
+    });
+};
+
+Tour.prototype.accessibilityHide = function () {
+    var stateHolder = 'data-has-hidden';
+    var attrName = 'aria-hidden';
+    var showFunction = function showFunction(child) {
+        var hidden = child.attr(stateHolder);
+        if (typeof hidden !== 'undefined') {
+            child.removeAttr(stateHolder);
+            child.removeAttr(attrName);
+        }
+    };
+
+    $('[' + stateHolder + ']').each(function (index, node) {
+        showFunction($(node));
+    });
+};
+
 if ((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object') {
     module.exports = Tour;
 }