MDL-73556 core_courseformat: fix course index click toggle

When the user clicks on a course index chevron the section is toggled.
However, when clicks on the section name the section is expanded but
never collapsed.

course/format/amd/build/local/courseeditor/contenttree.min.js

@@ -10,6 +10,6 @@ define("core_courseformat/local/courseeditor/contenttree",["exports","jquery","c
    * @class      core_courseformat/local/courseindex/keyboardnav
    * @copyright  2021 Ferran Recio <ferran@moodle.com>
    * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
-   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_jquery=_interopRequireDefault(_jquery),_tree=_interopRequireDefault(_tree);class _default extends _tree.default{constructor(mainElement,selectors,preventcache){var _selectors$ENTER;super(mainElement),this.selectors={SECTION:selectors.SECTION,TOGGLER:selectors.TOGGLER,COLLAPSE:selectors.COLLAPSE,ENTER:null!==(_selectors$ENTER=selectors.ENTER)&&void 0!==_selectors$ENTER?_selectors$ENTER:selectors.TOGGLER},preventcache&&(this._getVisibleItems=this.getVisibleItems,this.getVisibleItems=()=>(this.refreshVisibleItemsCache(),this._getVisibleItems())),this.treeRoot.on("hidden.bs.collapse shown.bs.collapse",(()=>{this.refreshVisibleItemsCache()})),this.registerEnterCallback(this.enterCallback.bind(this))}getActiveItem(){const activeItem=this.treeRoot.data("activeItem");if(activeItem)return(0,_normalise.getList)(activeItem)[0]}enterCallback(jQueryItem){const item=(0,_normalise.getList)(jQueryItem)[0];if(this.isGroupItem(jQueryItem)){const enter=item.querySelector(this.selectors.ENTER);"#"!==enter.getAttribute("href")&&(window.location.href=enter.getAttribute("href")),enter.click()}else{const link=item.querySelector("a");"#"!==link.getAttribute("href")?window.location.href=link.getAttribute("href"):link.click()}}isGroupCollapsed(jQueryItem){return"false"===(0,_normalise.getList)(jQueryItem)[0].querySelector("[aria-expanded]").getAttribute("aria-expanded")}toggleGroup(item){var _toggler$data;const toggler=item.find(this.selectors.COLLAPSE);let collapsibleId=null!==(_toggler$data=toggler.data("target"))&&void 0!==_toggler$data?_toggler$data:toggler.attr("href");if(!collapsibleId)return;collapsibleId=collapsibleId.replace("#","");(0,_jquery.default)("#".concat(collapsibleId)).length&&(0,_jquery.default)("#".concat(collapsibleId)).collapse("toggle")}expandGroup(item){this.isGroupCollapsed(item)&&this.toggleGroup(item)}collapseGroup(item){this.isGroupCollapsed(item)||this.toggleGroup(item)}expandAllGroups(){(0,_normalise.getList)(this.treeRoot)[0].querySelectorAll(this.selectors.SECTION).forEach((item=>{this.expandGroup((0,_jquery.default)(item))}))}}return _exports.default=_default,_exports.default}));
+   */Object.defineProperty(_exports,"__esModule",{value:!0}),_exports.default=void 0,_jquery=_interopRequireDefault(_jquery),_tree=_interopRequireDefault(_tree);class _default extends _tree.default{constructor(mainElement,selectors,preventcache){var _selectors$ENTER;super(mainElement),this.selectors={SECTION:selectors.SECTION,TOGGLER:selectors.TOGGLER,COLLAPSE:selectors.COLLAPSE,ENTER:null!==(_selectors$ENTER=selectors.ENTER)&&void 0!==_selectors$ENTER?_selectors$ENTER:selectors.TOGGLER},preventcache&&(this._getVisibleItems=this.getVisibleItems,this.getVisibleItems=()=>(this.refreshVisibleItemsCache(),this._getVisibleItems())),this.treeRoot.on("hidden.bs.collapse shown.bs.collapse",(()=>{this.refreshVisibleItemsCache()})),this.registerEnterCallback(this.enterCallback.bind(this))}getActiveItem(){const activeItem=this.treeRoot.data("activeItem");if(activeItem)return(0,_normalise.getList)(activeItem)[0]}enterCallback(jQueryItem){const item=(0,_normalise.getList)(jQueryItem)[0];if(this.isGroupItem(jQueryItem)){const enter=item.querySelector(this.selectors.ENTER);"#"!==enter.getAttribute("href")&&(window.location.href=enter.getAttribute("href")),enter.click()}else{const link=item.querySelector("a");"#"!==link.getAttribute("href")?window.location.href=link.getAttribute("href"):link.click()}}handleItemClick(event,jQueryItem){event.target.closest(this.selectors.COLLAPSE)?super.handleItemClick(event,jQueryItem):(jQueryItem.focus(),this.isGroupItem(jQueryItem)&&this.expandGroup(jQueryItem))}isGroupCollapsed(jQueryItem){return"false"===(0,_normalise.getList)(jQueryItem)[0].querySelector("[aria-expanded]").getAttribute("aria-expanded")}toggleGroup(item){var _toggler$data;const toggler=item.find(this.selectors.COLLAPSE);let collapsibleId=null!==(_toggler$data=toggler.data("target"))&&void 0!==_toggler$data?_toggler$data:toggler.attr("href");if(!collapsibleId)return;collapsibleId=collapsibleId.replace("#","");(0,_jquery.default)("#".concat(collapsibleId)).length&&(0,_jquery.default)("#".concat(collapsibleId)).collapse("toggle")}expandGroup(item){this.isGroupCollapsed(item)&&this.toggleGroup(item)}collapseGroup(item){this.isGroupCollapsed(item)||this.toggleGroup(item)}expandAllGroups(){(0,_normalise.getList)(this.treeRoot)[0].querySelectorAll(this.selectors.SECTION).forEach((item=>{this.expandGroup((0,_jquery.default)(item))}))}}return _exports.default=_default,_exports.default}));
 
 //# sourceMappingURL=contenttree.min.js.map

course/format/amd/src/local/courseeditor/contenttree.js

@@ -108,6 +108,26 @@ export default class extends Tree {
         }
     }
 
+    /**
+     * Handle an item click.
+     *
+     * @param {Event} event the click event
+     * @param {jQuery} jQueryItem the item clicked
+     */
+    handleItemClick(event, jQueryItem) {
+        const isChevron = event.target.closest(this.selectors.COLLAPSE);
+        // Only chevron clicks toogle the sections always.
+        if (isChevron) {
+            super.handleItemClick(event, jQueryItem);
+            return;
+        }
+        // This is a title or activity name click.
+        jQueryItem.focus();
+        if (this.isGroupItem(jQueryItem)) {
+            this.expandGroup(jQueryItem);
+        }
+    }
+
     /**
      * Check if a gorup item is collapsed.
      *

course/format/tests/behat/course_courseindex.feature

@@ -150,7 +150,7 @@ Feature: Course index depending on role
     And I should see "Activity sample 2" in the "courseindex-content" "region"
     And I should see "Topic 3" in the "courseindex-content" "region"
     And I should see "Activity sample 3" in the "courseindex-content" "region"
-    # Uncollapse section 1 via Topic name.
+    # Expand section 1 via Topic name.
     And I click on "Topic 1" "link" in the "courseindex-content" "region"
     And I should see "Topic 1" in the "courseindex-content" "region"
     And I should see "Activity sample 1" in the "courseindex-content" "region"
@@ -168,7 +168,7 @@ Feature: Course index depending on role
     And I should not see "Activity sample 2" in the "courseindex-content" "region"
     And I should see "Topic 3" in the "courseindex-content" "region"
     And I should see "Activity sample 3" in the "courseindex-content" "region"
-    # Uncollapse section 2 via chevron.
+    # Expand section 2 via chevron.
     And I click on "Expand" "link" in the ".courseindex-section[data-number='2']" "css_element"
     And I should see "Topic 1" in the "courseindex-content" "region"
     And I should see "Activity sample 1" in the "courseindex-content" "region"
@@ -177,6 +177,15 @@ Feature: Course index depending on role
     And I should see "Activity sample 2" in the "courseindex-content" "region"
     And I should see "Topic 3" in the "courseindex-content" "region"
     And I should see "Activity sample 3" in the "courseindex-content" "region"
+    # Click a section name does not collapse the section.
+    And I click on "Topic 2" "link" in the "courseindex-content" "region"
+    And I should see "Topic 1" in the "courseindex-content" "region"
+    And I should see "Activity sample 1" in the "courseindex-content" "region"
+    And I should see "Second activity in section 1" in the "courseindex-content" "region"
+    And I should see "Topic 2" in the "courseindex-content" "region"
+    And I should see "Activity sample 2" in the "courseindex-content" "region"
+    And I should see "Topic 3" in the "courseindex-content" "region"
+    And I should see "Activity sample 3" in the "courseindex-content" "region"
 
   @javascript
   Scenario: Course index section preferences

course/format/tests/behat/courseindex_keyboardnav.feature

@@ -62,6 +62,12 @@ Feature: Verify that courseindex is usable with the keyboard
     And I press enter
     And I should see "Activity sample 2" in the "courseindex-content" "region"
 
+  @javascript
+  Scenario: Enter key should not collapse sections.
+    When I press the down key
+    And I press enter
+    And I should see "Activity sample 1" in the "courseindex-content" "region"
+
   @javascript
   Scenario: Navigate to an activity.
     When I press the down key

lib/amd/src/tree.js

@@ -480,23 +480,12 @@ define(['jquery'], function($) {
     };
 
     /**
-     * Handle a click (select).
+     * Handle an item click.
      *
-     * @method handleClick
-     * @param {Event} e The event.
+     * @param {Event} event the click event
+     * @param {jQuery} item the item clicked
      */
-    Tree.prototype.handleClick = function(e) {
-        if (e.altKey || e.ctrlKey || e.shiftKey || e.metaKey) {
-            // Do nothing.
-            return;
-        }
-
-        // Get the closest tree item from the event target.
-        var item = $(e.target).closest('[role="treeitem"]');
-        if (!item.is(e.currentTarget)) {
-            return;
-        }
-
+    Tree.prototype.handleItemClick = function(event, item) {
         // Update the active item.
         item.focus();
 
@@ -506,6 +495,27 @@ define(['jquery'], function($) {
         }
     };
 
+    /**
+     * Handle a click (select).
+     *
+     * @method handleClick
+     * @param {Event} event The event.
+     */
+    Tree.prototype.handleClick = function(event) {
+        if (event.altKey || event.ctrlKey || event.shiftKey || event.metaKey) {
+            // Do nothing.
+            return;
+        }
+
+        // Get the closest tree item from the event target.
+        var item = $(event.target).closest('[role="treeitem"]');
+        if (!item.is(event.currentTarget)) {
+            return;
+        }
+
+        this.handleItemClick(event, item);
+    };
+
     /**
      * Handle a focus event.
      *