[FINNA-2373] Fix search filters on smaller screens for sr

themes/finna2/js/finna-layout.js

@@ -163,15 +163,64 @@ finna.layout = (function finnaLayout() {
     }
   }
 
+  /**
+   * Sidebar click on mobile
+   */
+  function onSidebarBtnClick() {
+    $('.sidebar').toggleClass('open');
+    $('.mobile-navigation .sidebar-navigation .expand-icon, .mobile-navigation .sidebar-navigation .collapse-icon').toggleClass('hidden');
+    $('body').toggleClass('prevent-scroll');
+  }
+
+  /**
+   * Check and keep focus within the search facet list
+   * @param {object} e Event object
+   */
+  function onFocusOutOfFacetContainer(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');
+    $('.mobile-navigation .sidebar-navigation, .sidebar .mylist-bar h1').off('click').on('click', function onClickMobileNav() {
+      onSidebarBtnClick();
     });
+    const container = document.querySelector(".side-facets-container-ajax");
+    if (container) {
+      $('.finna-search-filter-toggle .btn-search-filter, .sidebar .sidebar-close-btn').off('click').on('click', function onClickMobileNav() {
+        onSidebarBtnClick();
+        if (document.querySelector('.sidebar').classList.contains('open')) {
+          document.activeElement.blur();
+          container.querySelector('h1').focus();
+        } else {
+          document.activeElement.blur();
+          document.querySelector('.finna-search-filter-toggle .btn-search-filter').focus();
+        }
+      });
+      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 === 32 || e.which === 13) {
+          e.preventDefault();
+          onSidebarBtnClick();
+          if (document.querySelector('.sidebar').classList.contains('open')) {
+            container.addEventListener('focusout', onFocusOutOfFacetContainer);
+            document.activeElement.blur();
+            container.querySelector('h1').focus();
+          } else {
+            document.activeElement.blur();
+            document.querySelector('.finna-search-filter-toggle .btn-search-filter').focus();
+            container.removeEventListener('focusout', onFocusOutOfFacetContainer);
+          }
+        }
+      });
+    }
     $('.mobile-navigation .sidebar-navigation .active-filters').off('click').on('click', function onClickMobileActiveFilters() {
       $('.sidebar').scrollTop(0);
     });

themes/finna2/scss/finna/mylist.scss

@@ -55,7 +55,9 @@
     > li {
       max-width: none;
       border: none;
-
+      > h1 {
+        width: 100%;
+      }
       > a {
         padding: 3px 20px;
         &.active {

themes/finna2/scss/finna/result-sidebar.scss

@@ -59,7 +59,7 @@
   }
 }
 
-.sidebar :not(.recordProvidedBy) h1,
+.sidebar :not(.recordProvidedBy) .side-facets-header-container,
 .sidebar > h1,
 .sidebar > h2 {
   margin-bottom: 5px;
@@ -77,6 +77,24 @@
     }
   }
 }
+.sidebar .side-facets-header-container {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  background-color: $sidebar-background;
+  color: $sidebar-header-text-color;
+  padding: 10px 15px;
+  align-items: baseline;
+  h1 {
+    padding: 0;
+  }
+  button {
+    background-color: $sidebar-background;
+    color: $sidebar-header-text-color;
+    border: none;
+    font-size: 1.2rem;
+  }
+}
 
 .list-group {
   margin-bottom: 5px;

themes/finna2/templates/Recommend/SideFacetsDeferred.phtml

@@ -26,7 +26,15 @@
     $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-bs-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; ?>
+  <div class="side-facets-header-container">
+    <h1><?=$this->transEsc($this->slot('side-facet-caption')->get('Narrow Search')) ?></h1>
+    <?php if (null === $this->slot('side-facet-caption')->get() && !$this->translationEmpty('tooltip_facet_html')): ?>
+      <button aria-label="<?= $this->transEsc('Help') ?>" class="tooltip-button tooltip-facet pull-right" data-bs-toggle="tooltip" data-bs-placement="bottom" data-html="true" data-original-title="<?=$this->transEsc('tooltip_facet_html')?>">
+        <?=$this->icon('help') ?>
+      </button>
+    <?php endif; ?>
+    <button class="visible-xs sidebar-close-btn" aria-label="<?=$this->transEsc('close')?>"><?=$this->icon('sidefacets-close', 'sidefacets-close-icon') ?></button><?php endif; ?>
+  </div>
 <?php $checkboxFilters = $params->getCheckboxFacets(); ?>
 <?php $checkboxesShown = false; ?>
 <?php if (count($checkboxFilters) > 0):

themes/finna2/templates/myresearch/mylist.phtml

@@ -175,7 +175,7 @@
   <?php endif; ?>
   <div class="mylist-mobile mobile-navigation visible-xs visible-sm hidden-print">
     <ul>
-      <li class="sidebar-navigation"><?=$this->icon('sidebar-expand') ?> <?=$this->transEsc('Your Lists')?></li>
+      <li class="sidebar-navigation"><?=$this->icon('sidebar-expand', 'expand-icon') ?><?=$this->icon('sidebar-collapse', 'collapse-icon hidden') ?> <?=$this->transEsc('Your Lists')?></li>
     </ul>
   </div>
 

themes/finna2/templates/reservationlist/displaylist.phtml

@@ -127,7 +127,7 @@
 </div>
 <div class="mylist-mobile mobile-navigation visible-xs visible-sm hidden-print">
   <ul>
-    <li class="sidebar-navigation"><?=$this->icon('sidebar-expand') ?> <?=$this->transEsc('Your Lists')?></li>
+    <li class="sidebar-navigation"><?=$this->icon('sidebar-expand', 'expand-icon') ?><?=$this->icon('sidebar-collapse', 'collapse-icon hidden') ?> <?=$this->transEsc('Your Lists')?></li>
   </ul>
 </div>
 <!-- END of: finna - reservationlist/displaylist.phtml -->

themes/finna2/templates/reservationlist/displaylists.phtml

@@ -61,7 +61,7 @@
 </div>
 <div class="mylist-mobile mobile-navigation visible-xs visible-sm hidden-print">
   <ul>
-    <li class="sidebar-navigation"><?=$this->icon('sidebar-expand') ?> <?=$this->transEsc('Your Lists')?></li>
+    <li class="sidebar-navigation"><?=$this->icon('sidebar-expand', 'expand-icon') ?><?=$this->icon('sidebar-collapse', 'collapse-icon hidden') ?> <?=$this->transEsc('Your Lists')?></li>
   </ul>
 </div>
 <!-- END of: finna - reservationlist/displaylists.phtml -->

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" id="narrow-search-filter-toggle" class="btn btn-primary btn-search-filter" tabindex="0">
       <?=$this->transEsc('Narrow Search')?>
       <?php if ($filterCount > 0): ?>
         <span class="active-filter-count">(<?=$filterCount?>)</span>
@@ -274,7 +274,8 @@
           if (!isset($this->layout()->skiplink)) {
             $this->layout()->skiplink = '';
           }
-          $this->layout()->skiplink .= ' <a class="skip-link" href="#sidebar">' . $this->transEsc('Skip to narrowing options') . '</a>';
+          $this->layout()->skiplink .= ' <a class="skip-link hidden-xs" href="#sidebar">' . $this->transEsc('Skip to narrowing options') . '</a>';
+          $this->layout()->skiplink .= ' <a class="skip-link visible-xs" href="#narrow-search-filter-toggle">' . $this->transEsc('Skip to narrowing options') . '</a>';
           $messageAdded = true;
         }?>
       <?php endforeach; ?>