Bug 39489: 'Refine your search' aria-expanded attribute

On smaller screens (phones, tablets), the 'Refine your search' expandable section in the Koha OPAC is not clearly announced by screen readers.
The reason for this is that the expandable section toggle button is instead identified and announced as a link.
This results in screen reader users incorrectly expecting to be redirected to another page, and not being informed that there is a expandable section.

For elements with a class of menu-collapse-toggle, add an aria-expanded attribute which defaults to false, and is toggled to true upon that specific section being expanded.
If the screen width is 992px or higher, then remove the aria-expanded attribute on load as it is irrelevant, and potentially misleading.

To test:

1) Apply the patch.

on a small screen:

2) Run a library catalogue search in the Koha OPAC.
3) Right click on the page to inspect it.
4) Inspect the 'Refine your search' element.
5) Notice that it now has a aria-expanded attribute which is set to false.
6) Open the expandable 'Refine your search' section.
7) Notice that the aria-expanded attribute on the 'Refinine your search' element is now set to true.
8) Navigate to Home > Most popular titles
9) Repeat steps 3-7
10) Navigate to Home > Details for > Full subscription history
11) Repeat steps 3-7

then, on a bigger screen (992px and above)

12) Run a library catalogue search in the Koha OPAC.
13) Right click on the page to inspect it.
14) Inspect the 'Refine your search' element.
15) Notice that there is no 'aria-expanded' attribute, as in this case the section isn't expandable.
16) Resize your viewport below 992px, and notice that 'aria-expanded' reappears and is set to false.
17) Resize your viewport while remaining below the 992px limit, and notice that 'aria-expanded' remains set to false.
18) Open 'Refine your search', notice that 'aria-expanded' is set to true.
19) Resize your viewport while remaining below the 992px limit, and notice that 'aria-expanded' remains set to true.

Note: now updated to handle screen resizes
Sponsored-by: British Museum
Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Martin Renvoize <martin.renvoize@openfifth.co.uk>
Signed-off-by: Laura_Escamilla <laura.escamilla@bywatersolutions.com>
Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
(cherry picked from commit c4ee078e50)
Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de>

koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-facets.inc

@@ -6,7 +6,7 @@
 [% SET OPACResultsSidebar = AdditionalContents.get( location => "OPACResultsSidebar", lang => lang, library => logged_in_user.branchcode || default_branch ) %]
 [% IF ( opacfacets && facets_loop && total ) %]
     <div id="search-facets">
-        <h2><a href="#" class="menu-collapse-toggle">Refine your search</a></h2>
+        <h2><a href="#" class="menu-collapse-toggle" aria-expanded="false">Refine your search</a></h2>
         <ul class="menu-collapse">
             [% IF Koha.Preference("SavedSearchFilters") && search_filters.size > 0 %]
                 <li id="search-filters">

koha-tmpl/opac-tmpl/bootstrap/en/includes/opac-topissues.inc

@@ -5,7 +5,7 @@
 
 <div id="search-facets">
     <form method="get" action="/cgi-bin/koha/opac-topissues.pl">
-        <h2><a href="#" class="menu-collapse-toggle">Refine your search</a></h2>
+        <h2><a href="#" class="menu-collapse-toggle" aria-expanded="false">Refine your search</a></h2>
         <ul class="menu-collapse">
             <li
                 ><label for="limit">Show the top </label>

koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-full-serial-issues.tt

@@ -76,7 +76,7 @@
                     <div id="search-facets">
                         <form method="get" action="/cgi-bin/koha/opac-serial-issues.pl" id="filterform">
                             <legend
-                                ><h2><a href="#" class="menu-collapse-toggle">Refine your search</a></h2></legend
+                                ><h2><a href="#" class="menu-collapse-toggle" aria-expanded="false">Refine your search</a></h2></legend
                             >
                             <ul class="menu-collapse">
                                 <li>

koha-tmpl/opac-tmpl/bootstrap/js/global.js

@@ -233,10 +233,13 @@ if (typeof enquire == "object") {
 
 function facetMenu(action) {
     if (action == "show") {
-        $(".menu-collapse-toggle").off("click", facetHandler);
+        $(".menu-collapse-toggle")
+            .removeAttr("aria-expanded")
+            .off("click", facetHandler);
         $(".menu-collapse").show();
     } else {
         $(".menu-collapse-toggle")
+            .attr("aria-expanded", "false")
             .on("click", facetHandler)
             .removeClass("menu-open");
         $(".menu-collapse").hide();
@@ -247,8 +250,14 @@ var facetHandler = function (e) {
     e.preventDefault();
     $(this).toggleClass("menu-open");
     $(".menu-collapse").toggle();
+    setAriaExpandable(e);
 };
 
+function setAriaExpandable(e) {
+    let currentValue = $(e.target).attr("aria-expanded");
+    $(e.target).attr("aria-expanded", currentValue === "false");
+}
+
 function setPlaceholder() {
     let search_placeholder = $("#masthead_search option:selected").data(
         "placeholder"