SAK-37749 Lessonbuilder accessibility collapsible sections cannot be …

…opened with keyboard
sakaiproject · Nov 11, 2024 · f379f83 · f379f83
1 parent 33c428e
commit f379f83
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 9 deletions.
diff --git a/lessonbuilder/tool/src/webapp/js/show-page.js b/lessonbuilder/tool/src/webapp/js/show-page.js
@@ -193,13 +193,6 @@ $(document).ready(function () {
     }
   });
 
-  //Toggle collapsible section
-  $(".sectionHeader").attr("tabindex", "0").on("keydown", function (event) {
-    if (event.key === "Enter") {
-      $(this).trigger("click");
-    }
- });
-
   $("#collapsible").on("change", function () {
 
     if (this.checked) {

diff --git a/lessonbuilder/tool/src/webapp/templates/ShowPage.html b/lessonbuilder/tool/src/webapp/templates/ShowPage.html
@@ -2387,11 +2387,12 @@ <h5 class="modal-title" id="titleModalLabel" rsf:id="msg=simplepage.title">simpl
       <h3 rsf:id="msg=simplepage.maincontent" class="lb-offscreen" id="maintablelabel"></h3>
       <!-- WARNING: javascript for add-break-section adds section, ul, li, and sectionedit markup, so if you change here, keep it in sync -->
       <div rsf:id="sectionWrapper:">
-        <h3 rsf:id="sectionHeader" id="sectionHeader" class="sectionHeader">
+        <a rsf:id="sectionHeader" id="sectionHeader" class="sectionHeader d-block text-decoration-none h3" href="#collapsibleContent" tabindex="0" data-bs-toggle="collapse" aria-expanded="true" aria-controls="collapsibleContent">
           <span aria-hidden="true" class="collapseIcon fa-caret-down"></span>
           <span rsf:id="sectionHeaderText" class="sectionHeaderText"></span>
           <span class="toggleCollapse" rsf:id="msg=simplepage.clickToCollapse"></span>
-        </h3>
+        </a>
+	<div id="collapsibleContent" class="collapse show">
         <div rsf:id="section:" id="section" class="section">
           <div rsf:id="column:" class="column">
             <div class="editsection">
@@ -3226,6 +3227,7 @@ <h4><span rsf:id="peer-eval-target-name"></span></h4>
             </script>
           </div>
         </div>
+	</div>
         <!-- end section wrapper -->
       </div>
       <script>