From 544f55d281135c3bb53c35bc9baa327d40437a10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Siiri=20Yl=C3=B6nen?= <siiri.ylonen@helsinki.fi>
Date: Tue, 17 Dec 2024 15:11:01 +0200
Subject: [PATCH 1/2] Initial commit to make search filters accessible on
 smaller screens for sr.

---
 themes/finna2/js/finna-layout.js              | 42 +++++++++++++++++--
 .../Recommend/SideFacetsDeferred.phtml        |  2 +-
 themes/finna2/templates/search/results.phtml  |  2 +-
 3 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/themes/finna2/js/finna-layout.js b/themes/finna2/js/finna-layout.js
index d0fd75999e7..cce1b5c59e1 100644
--- a/themes/finna2/js/finna-layout.js
+++ b/themes/finna2/js/finna-layout.js
@@ -165,14 +165,50 @@ finna.layout = (function finnaLayout() {
     }
   }
 
+  /**
+   * Click function for mobile search filter
+   */
+  function onSidebarBtnClick() {
+    $('.sidebar').toggleClass('open');
+    $('.mobile-navigation .sidebar-navigation i').toggleClass('fa-arrow-down');
+    $('body').toggleClass('prevent-scroll');
+  }
+
+  /**
+   * Check and keep focus within the search facet list
+   *
+   * @param {object} e Event object
+   */
+  function onFocusOut(e) {
+    const container = document.querySelector('.side-facets-container-ajax');
+    if (!container.contains(e.relatedTarget)) {
+      container.focus();
+    }
+  }
+
   /**
    * Initialize mobile narrow search
    */
   function initMobileNarrowSearch() {
     $('.mobile-navigation .sidebar-navigation, .finna-search-filter-toggle .btn-search-filter, .sidebar .sidebar-close-btn, .sidebar .mylist-bar h1').off('click').on('click', function onClickMobileNav() {
-      $('.sidebar').toggleClass('open');
-      $('.mobile-navigation .sidebar-navigation i').toggleClass('fa-arrow-down');
-      $('body').toggleClass('prevent-scroll');
+      onSidebarBtnClick();
+    });
+    const container = document.querySelector(".side-facets-container-ajax");
+    container.tabIndex = '0';
+    container.ariaModal = true;
+    container.querySelector('h1').tabIndex = '0';
+    $('.finna-search-filter-toggle .btn-search-filter, .sidebar .sidebar-close-btn').off('keydown').on('keydown', function onClickMobileNav(e) {
+      if (e.which === 27 || e.which === 13) {
+        e.preventDefault();
+        onSidebarBtnClick();
+        if (document.querySelector('.sidebar').classList.contains('open')) {
+          container.addEventListener('focusout', onFocusOut);
+          container.querySelector('h1').focus();
+        } else {
+          document.querySelector('.finna-search-filter-toggle .btn-search-filter').focus();
+          container.removeEventListener('focusout', onFocusOut);
+        }
+      }
     });
     $('.mobile-navigation .sidebar-navigation .active-filters').off('click').on('click', function onClickMobileActiveFilters() {
       $('.sidebar').scrollTop(0);
diff --git a/themes/finna2/templates/Recommend/SideFacetsDeferred.phtml b/themes/finna2/templates/Recommend/SideFacetsDeferred.phtml
index 9d54a7492b7..056d6e7e80e 100644
--- a/themes/finna2/templates/Recommend/SideFacetsDeferred.phtml
+++ b/themes/finna2/templates/Recommend/SideFacetsDeferred.phtml
@@ -26,7 +26,7 @@
     $extraUrlFields = $results->getUrlQuery()->getParamsWithConfiguredDefaults();
   ?>
   <div class="side-facets-container-ajax" data-search-class-id="<?=$this->escapeHtmlAttr($this->searchClassId) ?>" data-location="<?=$this->escapeHtmlAttr($this->location) ?>" data-config-index="<?=$this->escapeHtmlAttr($this->configIndex)?>" data-query="<?=$this->escapeHtmlAttr($urlQuery)?>" data-query-suppressed="<?=$querySuppressed ? '1' : '0' ?>" data-extra-fields="<?=$this->escapeHtml(implode(',', $extraUrlFields))?>">
-  <h1><?=$this->transEsc($this->slot('side-facet-caption')->get('Narrow Search')) ?><?php if (null === $this->slot('side-facet-caption')->get() && !$this->translationEmpty('tooltip_facet_html')): ?><span class="tooltip-facet pull-right" data-toggle="tooltip" data-placement="auto" data-html="true" data-original-title="<?=$this->transEsc('tooltip_facet_html')?>"><?=$this->icon('help') ?></span><?php endif; ?><span role="button" class="visible-xs sidebar-close-btn" aria-label="<?=$this->transEsc('close')?>"><?=$this->icon('sidefacets-close', 'sidefacets-close-icon') ?></span></h1><?php endif; ?>
+  <h1><?=$this->transEsc($this->slot('side-facet-caption')->get('Narrow Search')) ?><?php if (null === $this->slot('side-facet-caption')->get() && !$this->translationEmpty('tooltip_facet_html')): ?><span class="tooltip-facet pull-right" data-toggle="tooltip" data-placement="auto" data-html="true" data-original-title="<?=$this->transEsc('tooltip_facet_html')?>"><?=$this->icon('help') ?></span><?php endif; ?><span role="button" class="visible-xs sidebar-close-btn" tabindex="0" aria-label="<?=$this->transEsc('close')?>"><?=$this->icon('sidefacets-close', 'sidefacets-close-icon') ?></span></h1><?php endif; ?>
 <?php $checkboxFilters = $params->getCheckboxFacets(); ?>
 <?php $checkboxesShown = false; ?>
 <?php if (count($checkboxFilters) > 0):
diff --git a/themes/finna2/templates/search/results.phtml b/themes/finna2/templates/search/results.phtml
index a6c46eaa57c..4a28c900c7f 100644
--- a/themes/finna2/templates/search/results.phtml
+++ b/themes/finna2/templates/search/results.phtml
@@ -114,7 +114,7 @@
 <?php if ($recordTotal > 0): ?>
   <div class="finna-search-filter-toggle-trigger visible-xs hidden-print"></div>
   <div class="finna-search-filter-toggle visible-xs hidden-print">
-    <div class="btn btn-primary btn-search-filter">
+    <div role="button" class="btn btn-primary btn-search-filter" tabindex="0">
       <?=$this->transEsc('Narrow Search')?>
       <?php if ($filterCount > 0): ?>
         <span class="active-filter-count">(<?=$filterCount?>)</span>

From c8b766e5271293022d0cd257888e3f6a9218494e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Siiri=20Yl=C3=B6nen?= <siiri.ylonen@helsinki.fi>
Date: Tue, 17 Dec 2024 15:21:59 +0200
Subject: [PATCH 2/2] Fixed the 0 line warning.

---
 themes/finna2/js/finna-layout.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/themes/finna2/js/finna-layout.js b/themes/finna2/js/finna-layout.js
index cce1b5c59e1..af9dc9b188e 100644
--- a/themes/finna2/js/finna-layout.js
+++ b/themes/finna2/js/finna-layout.js
@@ -176,7 +176,6 @@ finna.layout = (function finnaLayout() {
 
   /**
    * Check and keep focus within the search facet list
-   *
    * @param {object} e Event object
    */
   function onFocusOut(e) {