Merge branch 'MDL-60079-33' of https://github.com/nashtechdev01/moodle into MOODLE_33_STABLE

Author: David Monllao

admin/tool/usertours/amd/build/tour.min.js

@@ -619,26 +619,43 @@ Tour.prototype.addEventHandler = function (eventName, handler) {
  */
 Tour.prototype.processStepListeners = function (stepConfig) {
     this.listeners.push(
-    // Next/Previous buttons.
-    {
-        node: this.currentStepNode,
-        args: ['click', '[data-role="next"]', $.proxy(this.next, this)]
-    }, {
-        node: this.currentStepNode,
-        args: ['click', '[data-role="previous"]', $.proxy(this.previous, this)]
-    },
-
-    // Close and end tour buttons.
-    {
-        node: this.currentStepNode,
-        args: ['click', '[data-role="end"]', $.proxy(this.endTour, this)]
-    },
-
-    // Keypresses.
-    {
-        node: $('body'),
-        args: ['keydown', $.proxy(this.handleKeyDown, this)]
-    });
+        // Next/Previous buttons.
+        {
+            node: this.currentStepNode,
+            args: ['click', '[data-role="next"]', $.proxy(this.next, this)]
+        }, {
+            node: this.currentStepNode,
+            args: ['click', '[data-role="previous"]', $.proxy(this.previous, this)]
+        },
+
+        // Close and end tour buttons.
+        {
+            node: this.currentStepNode,
+            args: ['click', '[data-role="end"]', $.proxy(this.endTour, this)]
+        },
+
+        // Click backdrop and hide tour.
+        {
+            node: $('[data-flexitour="backdrop"]'),
+            args: ['click', $.proxy(this.hide, this)]
+        },
+
+        // Click out and hide tour without backdrop.
+        {
+            node: $('body'),
+            args: ['click', $.proxy(function (e) {
+                // Handle click in or click out tour content,
+                // if click out, hide tour.
+                if (!this.currentStepNode.is(e.target) && $(e.target).closest('[data-role="flexitour-step"]').length === 0) {
+                    this.hide();
+                }}, this)]
+        },
+
+        // Keypresses.
+        {
+            node: $('body'),
+            args: ['keydown', $.proxy(this.handleKeyDown, this)]
+        });
 
     if (stepConfig.moveOnClick) {
         var targetNode = this.getStepTarget(stepConfig);
@@ -904,7 +921,7 @@ Tour.prototype.announceStep = function (stepConfig) {
  * @param   {EventFacade} e
  */
 Tour.prototype.handleKeyDown = function (e) {
-    var tabbableSelector = 'a[href], link[href], [draggable=true], [contenteditable=true], :input:enabled, [tabindex], button';
+    var tabbableSelector = 'a[href], link[href], [draggable=true], [contenteditable=true], :input:enabled, [tabindex], button:enabled';
     switch (e.keyCode) {
         case 27:
             this.endTour();
@@ -923,8 +940,17 @@ Tour.prototype.handleKeyDown = function (e) {
                 var activeElement = $(document.activeElement);
                 var stepTarget = this.getStepTarget(this.currentStepConfig);
                 var tabbableNodes = $(tabbableSelector);
+                var dialogContainer = $('span[data-flexitour="container"]');
                 var currentIndex = void 0;
-                tabbableNodes.filter(function (index, element) {
+                // Filter out element which is not belong to target section or dialogue.
+                if (stepTarget) {
+                    tabbableNodes = tabbableNodes.filter(function (index, element) {
+                        return stepTarget != null && (stepTarget.has(element).length || dialogContainer.has(element).length || stepTarget.is(element) || dialogContainer.is(element));
+                    });
+                }
+
+                // Find index of focusing element.
+                tabbableNodes.each(function (index, element) {
                     if (activeElement.is(element)) {
                         currentIndex = index;
                         return false;
@@ -934,7 +960,7 @@ Tour.prototype.handleKeyDown = function (e) {
                 var nextIndex = void 0;
                 var nextNode = void 0;
                 var focusRelevant = void 0;
-                if (currentIndex) {
+                if (currentIndex != void 0) {
                     var direction = 1;
                     if (e.shiftKey) {
                         direction = -1;
@@ -1090,6 +1116,16 @@ Tour.prototype.hide = function (transition) {
         $(this).remove();
     });
 
+    // Remove aria-describedby and tabindex attributes.
+    if (this.currentStepNode && this.currentStepNode.length) {
+        var stepId = this.currentStepNode.attr('id');
+        if (stepId) {
+            var currentStepElement = '[aria-describedby="' + stepId + '-body"]';
+            $(currentStepElement).removeAttr('tabindex');
+            $(currentStepElement).removeAttr('aria-describedby');
+        }
+    }
+
     // Reset the listeners.
     this.resetStepListeners();
 

admin/tool/usertours/amd/src/tour.js

@@ -57,3 +57,23 @@ Feature: Apply tour filters to a tour
     And I log in as "teacher1"
     And I am on "Course 1" course homepage
     And I should see "Welcome to your course tour."
+
+  @javascript
+  Scenario: Aria tags should not exist
+    Given I log in as "admin"
+    And I open the User tour settings page
+    # Turn on default tour for boost theme.
+    And I click on "Enable" "link" in the "Boost - administrator" "table_row"
+    And I am on site homepage
+    When I click on "Next" "button"
+    Then "button[aria-describedby^='tour-step-tool_usertours']" "css_element" should exist
+    And "button[tabindex]" "css_element" should exist
+    When I click on "Next" "button"
+    Then "button[aria-describedby^='tour-step-tool_usertours']" "css_element" should not exist
+    And "button[tabindex]" "css_element" should not exist
+    When I click on "Previous" "button"
+    Then "button[aria-describedby^='tour-step-tool_usertours']" "css_element" should exist
+    And "button[tabindex]" "css_element" should exist
+    When I click on "End tour" "button"
+    Then "button[aria-describedby^='tour-step-tool_usertours']" "css_element" should not exist
+    And "button[tabindex]" "css_element" should not exist

admin/tool/usertours/tests/behat/tour_filter.feature

@@ -4,7 +4,7 @@
     <location>amd/src/tour.js</location>
     <name>Flexitour</name>
     <license>GPLv3</license>
-    <version>0.10.0</version>
+    <version>0.12.0</version>
     <licenseversion>3</licenseversion>
   </library>
   <library>