diff --git a/themes/finna2/js/finna-layout.js b/themes/finna2/js/finna-layout.js index d0fd75999e7..af9dc9b188e 100644 --- a/themes/finna2/js/finna-layout.js +++ b/themes/finna2/js/finna-layout.js @@ -165,14 +165,49 @@ 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(); ?>
-

transEsc($this->slot('side-facet-caption')->get('Narrow Search')) ?>slot('side-facet-caption')->get() && !$this->translationEmpty('tooltip_facet_html')): ?>icon('help') ?>icon('sidefacets-close', 'sidefacets-close-icon') ?>

+

transEsc($this->slot('side-facet-caption')->get('Narrow Search')) ?>slot('side-facet-caption')->get() && !$this->translationEmpty('tooltip_facet_html')): ?>icon('help') ?>icon('sidefacets-close', 'sidefacets-close-icon') ?>

getCheckboxFacets(); ?> 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 @@ 0): ?>
-
+
transEsc('Narrow Search')?> 0): ?> ()