Merge branch 'MDL-60079-master' of https://github.com/nashtechdev01/m…

…oodle
moodle · Jan 9, 2018 · 1679485693320f201b845095630a5b00a3579c3e · 1679485
2 parents a52fc1f + 48a9fd8
commit 1679485693320f201b845095630a5b00a3579c3e
Unified Split

Showing with 81 additions and 25 deletions.

+1 −1 admin/tool/usertours/amd/build/tour.min.js

+59 −23 admin/tool/usertours/amd/src/tour.js

+20 −0 admin/tool/usertours/tests/behat/tour_filter.feature

+1 −1 admin/tool/usertours/thirdpartylibs.xml
diff --git a/admin/tool/usertours/amd/build/tour.min.js b/admin/tool/usertours/amd/build/tour.min.js
diff --git a/admin/tool/usertours/amd/src/tour.js b/admin/tool/usertours/amd/src/tour.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();

diff --git a/admin/tool/usertours/tests/behat/tour_filter.feature b/admin/tool/usertours/tests/behat/tour_filter.feature
@@ -157,3 +157,23 @@ Feature: Apply tour filters to a tour
    When I am on "Course 2" course homepage
    And I wait until the page is ready
    Then I should not 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
diff --git a/admin/tool/usertours/thirdpartylibs.xml b/admin/tool/usertours/thirdpartylibs.xml
@@ -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>