diff --git a/themes/finna2/js/finna-layout.js b/themes/finna2/js/finna-layout.js index f0e1bbf58de..d7843b5f442 100644 --- a/themes/finna2/js/finna-layout.js +++ b/themes/finna2/js/finna-layout.js @@ -177,15 +177,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); }); diff --git a/themes/finna2/scss/finna/mylist.scss b/themes/finna2/scss/finna/mylist.scss index 63a2c207cab..0777463020a 100644 --- a/themes/finna2/scss/finna/mylist.scss +++ b/themes/finna2/scss/finna/mylist.scss @@ -55,7 +55,9 @@ > li { max-width: none; border: none; - + > h1 { + width: 100%; + } > a { padding: 3px 20px; &.active { diff --git a/themes/finna2/scss/finna/result-sidebar.scss b/themes/finna2/scss/finna/result-sidebar.scss index 3cdc0ff7ad8..34ef7abcccc 100644 --- a/themes/finna2/scss/finna/result-sidebar.scss +++ b/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; @@ -71,12 +71,30 @@ display: flex; justify-content: space-between; margin-bottom: 0; - .tooltip-facet { + .finna-toggletip { margin-right: auto; padding-left: 10px; } } } +.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; diff --git a/themes/finna2/templates/Recommend/SideFacetsDeferred.phtml b/themes/finna2/templates/Recommend/SideFacetsDeferred.phtml index fa79f8417ae..823c1686c04 100644 --- a/themes/finna2/templates/Recommend/SideFacetsDeferred.phtml +++ b/themes/finna2/templates/Recommend/SideFacetsDeferred.phtml @@ -26,7 +26,21 @@ $extraUrlFields = $results->getUrlQuery()->getParamsWithConfiguredDefaults(); ?>