From bf2577afcabfbd385564fcb6022e16e43f60d99a Mon Sep 17 00:00:00 2001
From: James C <5689414+james-cnz@users.noreply.github.com>
Date: Wed, 14 Aug 2024 12:01:59 +1200
Subject: [PATCH] MDL-82679 course: Prevent collapsable sections conflicting

---
 .upgradenotes/MDL-82679-2025013012141805.yml  | 14 +++++++
 .../local/content/section/content.mustache    |  2 +-
 .../local/content/section/header.mustache     |  6 +--
 .../tests/behat/content_preferences.feature   | 12 +++---
 .../behat/course_collapse_sections.feature    | 40 +++++++++----------
 5 files changed, 44 insertions(+), 30 deletions(-)
 create mode 100644 .upgradenotes/MDL-82679-2025013012141805.yml

diff --git a/.upgradenotes/MDL-82679-2025013012141805.yml b/.upgradenotes/MDL-82679-2025013012141805.yml
new file mode 100644
index 00000000000..8ddaea790b8
--- /dev/null
+++ b/.upgradenotes/MDL-82679-2025013012141805.yml
@@ -0,0 +1,14 @@
+issueNumber: MDL-82679
+notes:
+  core_courseformat:
+    - message: >-
+        HTML IDs relating to section collapse/expand have been changed in the
+        course format templates.
+
+        - core_courseformat/local/content/section/header
+        #collapssesection{{num}} has been changed to #collapsesectionid{{id}}
+
+        - core_courseformat/local/content/section/content
+        #coursecontentcollapse{{num}} had been changed to
+        #coursecontentcollapseid{{id}}
+      type: fixed
diff --git a/course/format/templates/local/content/section/content.mustache b/course/format/templates/local/content/section/content.mustache
index b12016f48c3..fa170060bf9 100644
--- a/course/format/templates/local/content/section/content.mustache
+++ b/course/format/templates/local/content/section/content.mustache
@@ -161,7 +161,7 @@
         {{/headerdisplaymultipage}}
     {{/header}}
 </div>
-<div id="coursecontentcollapse{{num}}"
+<div id="coursecontentcollapseid{{id}}"
      class="content {{^iscoursedisplaymultipage}}{{^sitehome}}{{^displayonesection}}course-content-item-content collapse {{^contentcollapsed}}show{{/contentcollapsed}}{{/displayonesection}}{{/sitehome}}{{/iscoursedisplaymultipage}}">
     <div class="{{#hasavailability}}description{{/hasavailability}} my-3" data-for="sectioninfo">
         {{#isstealth}}
diff --git a/course/format/templates/local/content/section/header.mustache b/course/format/templates/local/content/section/header.mustache
index 862f06ef214..b920bcc00ba 100644
--- a/course/format/templates/local/content/section/header.mustache
+++ b/course/format/templates/local/content/section/header.mustache
@@ -55,10 +55,10 @@
                 <a role="button"
                     data-toggle="collapse"
                     data-for="sectiontoggler"
-                    href="#coursecontentcollapse{{num}}"
-                    id="collapssesection{{num}}"
+                    href="#coursecontentcollapseid{{id}}"
+                    id="collapsesectionid{{id}}"
                     aria-expanded="{{^contentcollapsed}}true{{/contentcollapsed}}{{#contentcollapsed}}false{{/contentcollapsed}}"
-                    aria-controls="coursecontentcollapse{{num}}"
+                    aria-controls="coursecontentcollapseid{{id}}"
                     class="btn btn-icon me-3 icons-collapse-expand justify-content-center
                         {{#contentcollapsed}} collapsed {{/contentcollapsed}}"
                     aria-label="{{name}}">
diff --git a/course/format/tests/behat/content_preferences.feature b/course/format/tests/behat/content_preferences.feature
index be90d88b51d..e6df0e0a011 100644
--- a/course/format/tests/behat/content_preferences.feature
+++ b/course/format/tests/behat/content_preferences.feature
@@ -37,7 +37,7 @@ Feature: Course content collapsed user preferences
     And I should see "Activity sample 2" in the "region-main" "region"
     And I should see "Section 3" in the "region-main" "region"
     And I should see "Activity sample 3" in the "region-main" "region"
-    And I click on "#collapssesection1" "css_element"
+    And I click on "Collapse" "link" in the "Section 1" "section"
     When I reload the page
     Then I should see "Section 1" in the "region-main" "region"
     And I should not see "Activity sample 1" in the "region-main" "region"
@@ -45,7 +45,7 @@ Feature: Course content collapsed user preferences
     And I should see "Activity sample 2" in the "region-main" "region"
     And I should see "Section 3" in the "region-main" "region"
     And I should see "Activity sample 3" in the "region-main" "region"
-    And I click on "#collapssesection2" "css_element"
+    And I click on "Collapse" "link" in the "Section 2" "section"
     And I reload the page
     And I should see "Section 1" in the "region-main" "region"
     And I should not see "Activity sample 1" in the "region-main" "region"
@@ -53,7 +53,7 @@ Feature: Course content collapsed user preferences
     And I should not see "Activity sample 2" in the "region-main" "region"
     And I should see "Section 3" in the "region-main" "region"
     And I should see "Activity sample 3" in the "region-main" "region"
-    And I click on "#collapssesection3" "css_element"
+    And I click on "Collapse" "link" in the "Section 3" "section"
     And I reload the page
     And I should see "Section 1" in the "region-main" "region"
     And I should not see "Activity sample 1" in the "region-main" "region"
@@ -61,12 +61,12 @@ Feature: Course content collapsed user preferences
     And I should not see "Activity sample 2" in the "region-main" "region"
     And I should see "Section 3" in the "region-main" "region"
     And I should not see "Activity sample 3" in the "region-main" "region"
-    And I click on "#collapssesection2" "css_element"
-    And I click on "#collapssesection3" "css_element"
+    And I click on "Expand" "link" in the "Section 2" "section"
+    And I click on "Expand" "link" in the "Section 3" "section"
     And I reload the page
     And I should see "Section 1" in the "region-main" "region"
     And I should not see "Activity sample 1" in the "region-main" "region"
-    And I click on "#collapssesection4" "css_element"
+    And I click on "Collapse" "link" in the "Section 4" "section"
     And I turn editing mode on
     And I delete section "1"
     And I click on "Delete" "button" in the ".modal" "css_element"
diff --git a/course/tests/behat/course_collapse_sections.feature b/course/tests/behat/course_collapse_sections.feature
index 3bc4f824605..b7d84bcd1fa 100644
--- a/course/tests/behat/course_collapse_sections.feature
+++ b/course/tests/behat/course_collapse_sections.feature
@@ -81,25 +81,25 @@ Feature: Collapse course sections
     And I should not see "Forum 4"
     And I should see "Not available" in the "#section-5" "css_element"
     And I should not see "Forum 5"
-    When I click on "#collapssesection3" "css_element"
+    When I click on "Collapse" "link" in the "Section 3" "section"
     And I should see "Assignment 1" in the "region-main" "region"
     And I should see "Assignment 2" in the "region-main" "region"
     And I should see "Book 2" in the "region-main" "region"
     And I should not see "Book 3" in the "region-main" "region"
-    And I click on "#collapssesection1" "css_element"
-    And I click on "#collapssesection2" "css_element"
-    And I click on "#collapssesection4" "css_element"
-    And I click on "#collapssesection5" "css_element"
+    And I click on "Collapse" "link" in the "Section 1" "section"
+    And I click on "Collapse" "link" in the "Section 2" "section"
+    And I click on "Collapse" "link" in the "Section 4" "section"
+    And I click on "Collapse" "link" in the "Section 5" "section"
     Then I should not see "Assignment 1" in the "region-main" "region"
     And I should not see "Assignment 2" in the "region-main" "region"
     And I should not see "Book 2" in the "region-main" "region"
     And I should not see "Book 3" in the "region-main" "region"
     And I should not see "Available until" in the "section-4" "core_availability > Section availability"
-    And I click on "#collapssesection1" "css_element"
-    And I click on "#collapssesection2" "css_element"
-    And I click on "#collapssesection3" "css_element"
-    And I click on "#collapssesection4" "css_element"
-    And I click on "#collapssesection5" "css_element"
+    And I click on "Expand" "link" in the "Section 1" "section"
+    And I click on "Expand" "link" in the "Section 2" "section"
+    And I click on "Expand" "link" in the "Section 3" "section"
+    And I click on "Expand" "link" in the "Section 4" "section"
+    And I click on "Expand" "link" in the "Section 5" "section"
     And I should see "Assignment 1" in the "region-main" "region"
     And I should see "Assignment 2" in the "region-main" "region"
     And I should see "Book 2" in the "region-main" "region"
@@ -118,26 +118,26 @@ Feature: Collapse course sections
     And I should see "Forum 4"
     And I should see "Hidden from students" in the "#section-5" "css_element"
     And I should see "Forum 5"
-    When I click on "#collapssesection3" "css_element"
+    And I click on "Collapse" "link" in the "15 May - 21 May" "section"
     And I should see "Assignment 1" in the "region-main" "region"
     And I should see "Assignment 2" in the "region-main" "region"
     And I should see "Book 2" in the "region-main" "region"
     And I should not see "Book 3" in the "region-main" "region"
-    And I click on "#collapssesection1" "css_element"
-    And I click on "#collapssesection2" "css_element"
-    And I click on "#collapssesection4" "css_element"
-    And I click on "#collapssesection5" "css_element"
+    And I click on "Collapse" "link" in the "1 May - 7 May" "section"
+    And I click on "Collapse" "link" in the "8 May - 14 May" "section"
+    And I click on "Collapse" "link" in the "22 May - 28 May" "section"
+    And I click on "Collapse" "link" in the "29 May - 4 June" "section"
     Then I should not see "Assignment 1" in the "region-main" "region"
     And I should not see "Assignment 2" in the "region-main" "region"
     And I should not see "Book 2" in the "region-main" "region"
     And I should not see "Book 3" in the "region-main" "region"
     And I should not see "Available until" in the "section-4" "core_availability > Section availability"
     And I should not see "Not available" in the "#section-5" "css_element"
-    And I click on "#collapssesection1" "css_element"
-    And I click on "#collapssesection2" "css_element"
-    And I click on "#collapssesection3" "css_element"
-    And I click on "#collapssesection4" "css_element"
-    And I click on "#collapssesection5" "css_element"
+    And I click on "Expand" "link" in the "1 May - 7 May" "section"
+    And I click on "Expand" "link" in the "8 May - 14 May" "section"
+    And I click on "Expand" "link" in the "15 May - 21 May" "section"
+    And I click on "Expand" "link" in the "22 May - 28 May" "section"
+    And I click on "Expand" "link" in the "29 May - 4 June" "section"
     And I should see "Assignment 1" in the "region-main" "region"
     And I should see "Assignment 2" in the "region-main" "region"
     And I should see "Book 2" in the "region-main" "region"