From 57d65754f369044aa9bbe398f1d565a0d3a98a68 Mon Sep 17 00:00:00 2001
From: Claas Kazzer <kazzer@uni-leipzig.de>
Date: Mon, 18 Jul 2022 14:38:30 +0200
Subject: [PATCH] refs #22127 [finc] vf6 Styles Active Filters in header
* removes from finc-accessibility and adds it to finc
* fine tunes and styles it in finc
* styles Active Filters in header
* removes Active Filters from finc-accessibility
* fine-tunes active filter elements in header
* adds ellipsis for overlong filter elements
* re-alligns elements due to ellipsis-related changes
* corrects erroneous for-label
* fixes active filters alignments
---
themes/finc-accessibility/scss/compiled.scss | 51 ------
.../templates/search/filters.phtml | 169 ------------------
themes/finc/scss/_customVariables.scss | 45 ++++-
.../components/_header-active-filters.scss | 146 +++++++++++----
.../finc/scss/components/_header-navbar.scss | 1 +
themes/finc/scss/components/_search.scss | 9 +-
.../templates/search/controls/limit.phtml | 2 +-
themes/finc/templates/search/filters.phtml | 25 ++-
8 files changed, 178 insertions(+), 270 deletions(-)
delete mode 100644 themes/finc-accessibility/templates/search/filters.phtml
diff --git a/themes/finc-accessibility/scss/compiled.scss b/themes/finc-accessibility/scss/compiled.scss
index 34fb79fb25c..273b21b9120 100644
--- a/themes/finc-accessibility/scss/compiled.scss
+++ b/themes/finc-accessibility/scss/compiled.scss
@@ -114,60 +114,9 @@ $screen-md-max: ($screen-lg-min - 1) !default;
}
-// Keep Filters elements in header
-.reset-filters-btn {
- background-color: $brand-warning;
- color: $black;
-
- &:focus,
- &:hover {
- background: $sidebar-item-active-hover-bg;
- color: $sidebar-facet-active-hover-color;
- }
-}
-
-.active-filters {
- .filters .filter-value:focus,
- .filters .filter-value:hover,
- .search-filter-remove:visited,
- .search-filter-remove:focus,
- .search-filter-remove:hover,
- .search-filter-remove:visited:focus,
- .search-filter-remove:visited:hover {
- background: $search-filter-remove-hover-bg;
- color: $search-filter-remove-hover-color;
- }
-
- .filters .filter-value:focus,
- .filters .filter-value:hover {
- .search-filter-remove::after {
- color: $red;
- }
-
- .search-filter-remove,
- .search-filter-remove:visited {
- color: $search-filter-remove-hover-color !important; // keep !important
- }
- }
-}
-
-.search-filter-remove::after {
- content: $search-filter-remove-icon;
-}
-
-// remove filter links styling
-a.remove-filter {
- display: flex;
- width: 100%;
-}
.record-tab.active {
.load-tab-content {
display: none;
}
}
-
-// overwrite vertical align
-#dropdown-toggle-Format {
- vertical-align: unset;
-}
diff --git a/themes/finc-accessibility/templates/search/filters.phtml b/themes/finc-accessibility/templates/search/filters.phtml
deleted file mode 100644
index d30559c7b49..00000000000
--- a/themes/finc-accessibility/templates/search/filters.phtml
+++ /dev/null
@@ -1,169 +0,0 @@
-<!-- finc-accessibility - search - filters -->
-<?php
- if (!isset($this->params)) {
- // No current search, use last search in memory
- $params = $this->searchMemory()->getLastSearchParams($this->searchClassId);
- } else {
- // clone params so that the manipulation doesn't cause trouble e.g. for facets
- $params = clone $this->params;
- }
-
- $lastSort = $this->searchMemory()->getLastSort($this->searchClassId);
- $options = $this->searchOptions($this->searchClassId);
- $hasDefaultsApplied = $params->hasDefaultsApplied();
- $filterCount = $this->searchbox()->getFilterCount($checkboxFilters, $filterList);
-
- // Determine whether the only filters applied are the default ones; this controls
- // when we display or hide the reset button:
- $defaultFilters = $options->getDefaultFilters();
- $onlyDefaultsApplied = count($defaultFilters) == $filterCount;
- foreach ($defaultFilters as $currentDefault) {
- if (!$params->hasFilter($currentDefault)) {
- $onlyDefaultsApplied = false;
- break;
- }
- }
-
- $advancedSearch = $this->searchType === 'advanced';
-?>
-<?php ob_start(); ?>
- <?php foreach ($checkboxFilters as $filter): ?>
- <?php if ($filter['selected']): ?>
- <span class="filter-value">
- <?php
- $removeLink = isset($urlQuery)
- ? $urlQuery->removeFilter($filter['filter'])
- : $this->searchMemory()->getEditLink(
- $this->searchClassId, 'removeFilter', $filter['filter']
- );
- $desc = $this->translate($filter['desc']);
- $ariaLabel = $this->translate('Remove filter') . ' ' . $this->escapeHtmlAttr($desc);
- ?>
- <?=$desc?>
- <?php if($removeLink): ?>
- <a class="search-filter-remove" aria-label="<?=$ariaLabel?>" href="<?=$removeLink?>"><!--icon from css --></a>
- <?php endif; ?>
- </span>
- <?php endif ?>
- <?php endforeach; ?>
-
- <?php foreach ($filterList as $field => $data): ?>
- <div class="title-value-pair">
- <span class="filters-title"><?=$this->transEsc($field)?>:</span>
- <?php /* finc: set number of filters from one group for display in dropdown to '> 1'
- so 2 and more filters from one group will be presented in a dropdown rather
- than as a long chain of terms - CK */ ?>
- <?php if (count($data) > 1): ?>
- <div class="search-filter-dropdown dropdown">
- <?php $dropdown = true; ?>
- <?php $safeId = preg_replace('/[^a-zA-Z0-9]/', '', $field); ?>
- <button id="dropdown-toggle-<?=$safeId?>" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
- <?=$this->transEsc('filter_toggle_entries', ['%%count%%' => count($data)])?>
- </button>
- <ul class="dropdown-menu" role="menu" aria-labelledby="dropdown-toggle-<?=$safeId?>">
- <?php else: ?>
- <?php $dropdown = false; ?>
- <?php endif; ?>
- <?php foreach ($data as $index => $value): ?>
- <?php if ($dropdown): ?>
- <li>
- <?php endif; ?>
- <?php
- switch ($value['operator']) {
- case 'NOT':
- $operatorChar = '-';
- $join = $this->transEsc('NOT');
- break;
- case 'OR':
- $operatorChar = '~';
- $join = $this->transEsc('OR');
- break;
- case 'AND':
- $operatorChar = '';
- $join = $this->transEsc('AND');
- break;
- default:
- $operatorChar = $join = '';
- }
- $operatorClass = $this->escapeHtmlAttr(strtolower($value['operator']));
- ?>
- <span class="filters-term filters-<?=$operatorClass?>">
- <?=($index > 0 || 'NOT' === $value['operator']) ? $join : '' ?>
- </span>
- <span class="filter-value filters-<?=$operatorClass?>">
- <?php /* finc uses entire text + icon as link for larger interaction area; adds more detailed aria-label */ ?>
- <?php
- $removeLink = isset($this->urlQuery)
- ? $urlQuery->removeFacet($value['field'], $value['value'], $value['operator'])
- : $this->searchMemory()->getEditLink($this->searchClassId, 'removeFacet', $value);
- ?>
- <a class="search-filter-remove"
- aria-label="<?=$this->transEsc('clear_tag_filter') ?> – <?=$this->transEsc('page_reload_on_deselect_hint', ['%%filter_name%%' => $value['displayText']])?>"
- href="<?=$removeLink?>">
- <span class="text">
- <?=$this->escapeHtml($value['displayText'])?>
- </span>
- <!--icon from css -->
- </a>
- </span>
- <?php if ($dropdown): ?>
- </li>
- <?php endif; ?>
- <?php endforeach; ?>
- <?php if ($dropdown): ?>
- </ul>
- </div>
- <?php endif; ?>
- </div>
- <?php endforeach; ?>
-<?php $filters = ob_get_contents(); ?>
-<?php ob_end_clean(); ?>
-
-<?php if ($hasDefaultsApplied || $filterCount > 0): ?>
- <?php
- $resetLink = null;
- if (!$onlyDefaultsApplied) {
- $resetLink = isset($urlQuery)
- ? $urlQuery->removeAllFilters()->resetDefaultFilters()
- : $this->searchMemory()->getEditLink($this->searchClassId, 'removeAllFilters', 1);
- }
- ?>
- <?php // Normal view ?>
- <div class="active-filters hidden-xs">
- <?php if ($resetLink && $options->getRetainFilterSetting()): ?>
- <?php /* finc adds verbose reload warning via aria-label */ ?>
- <a class="reset-filters-btn" href="<?=$resetLink?>"
- aria-label="<?=$this->transEsc('clear_tag_filter') ?> – <?=$this->transEsc('page_reload_on_deselect_all_hint', ['%%filter_name%%' => $value['displayText']])?>"
- >
- <?=$this->transEsc('reset_filters_button') ?>
- </a>
- <?php elseif ($advancedSearch): ?>
- <p class="adv_search_filters"><?=$this->transEsc('adv_search_filters')?>:</p>
- <?php endif; ?>
- <div class="filters">
- <?=$filters ?>
- </div>
- <div class="clearfix"></div>
- </div>
- <?php // Narrow view ?>
- <div class="active-filters visible-xs">
- <div class="filters-toggle-bar">
- <?php if ($resetLink && $options->getRetainFilterSetting()): ?>
- <?php /* finc adds verbose reload warning via aria-label */ ?>
- <a class="reset-filters-btn active" href="<?=$resetLink?>"
- aria-label="<?=$this->transEsc('clear_tag_filter') ?> – <?=$this->transEsc('page_reload_on_deselect_all_hint', ['%%filter_name%%' => $value['displayText']])?>">
- <?=$this->transEsc('reset_filters_button')?>
- </a>
- <?php endif; ?>
- <div class="filters-toggle collapsed" data-toggle="collapse" data-target="#active-filters-mobile">
- <?=$this->transEsc('show_filters_html', ['%%count%%' => $filterCount])?>
- </div>
- <div class="clearfix"></div>
- </div>
- <div id="active-filters-mobile" class="filters filters-bar collapse">
- <?=$filters ?>
- </div>
- <div class="clearfix"></div>
- </div>
-<?php endif; ?>
-<!-- finc-accessibility - search - filters - END -->
diff --git a/themes/finc/scss/_customVariables.scss b/themes/finc/scss/_customVariables.scss
index cf7424408c5..0bd4ec8a795 100644
--- a/themes/finc/scss/_customVariables.scss
+++ b/themes/finc/scss/_customVariables.scss
@@ -678,7 +678,7 @@ $hamburger-menu-margin-left-xs: 0 !default;
$hamburger-menu-margin-right-xs: 0 !default;
// This is for the menu items in the header incl. language, My account etc
-$header-menu-flex-sm-up: 1 0 30%;
+$header-menu-flex-sm-up: 1 0 40%;
$header-menu-flex-adv-srch-sm-up: 1 0 100%;
$header-menu-flex-order-sm-up: 3;
$header-menu-padding-top-sm-up: 6px;
@@ -728,7 +728,7 @@ $icon-exclamation-triangle-in-header-padding: 0 !default;
// *****************************************************************
// ************ Search box ************************************
// *****************************************************************
-// Make search box container flexible -- values should complement those
+// Make search box container flexible - values should complement those
// of #header-collapse (i.e. the right-hand side navigation elements)
$search-container-right-padding: 0 !default;
$search-container-sm-max-left-padding: 0 !default;
@@ -758,9 +758,12 @@ $search-form-input-type-sm-max-flex-shrink: 2 !default;
$search-form-input-only-sm-max-flex-basis: 50% !default;
$search-form-select-only-sm-max-flex-basis: 20% !default;
-$search-form-advanced-search-button-border: 1px solid $oil !default;
-
+// Pls. beware that the next two settings affect the active-filters' buttons too
+// (reset in 'header-active-filters.scss' -> button[id^='dropdown-toggle-'])
+$search-form-btn-form-control-vertical-align: top !default;
+$search-form-btn-form-control-float-xs: left !default;
+$search-form-advanced-search-button-border: 1px solid $oil !default;
@@ -803,24 +806,50 @@ $adv-search-links-sm-to-md-max-max-width: 400px !default;
// *****************************************************************
// ************ Active filters in header ***************************
// *****************************************************************
-// Variables for search-filter-remove in Header
+// Outer container for filter names and reset button;
+// we overwrite BS value 'display: flex;' so filters' container will fit
+// in searchbox without squashing right-hand menu;
+// Set this to 'flex' to maintain BS-theme behaviour
+$active-filters-outer-container-display: unset !default;
+// Remove left-padding of outer filters' container for alignment under 'Remove all' button
+$active-filters-outer-filters-container-padding-left: 0 !default;
+
+// Variables for 'Active filters' and 'Remove all filters' in Header
// Use orange and black for sufficient color contrast
$search-filter-remove-all-color: $black !default;
$search-filter-remove-all-bg: $brand-warning !default;
-$search-filter-remove-hover-bg: $brand-warning !default;
-$search-filter-remove-hover-color: $white !default;
+$search-filter-remove-text-decoration: none !default;
+
+
+// Give these the same look on focus/hover as 'Remove all'
+$search-filter-remove-hover-bg: $search-filter-remove-all-bg !default;
+$search-filter-remove-hover-color: $search-filter-remove-all-color !default;
$search-filter-values-remove-color: $white !default;
$search-filters-margin-bottom: 4px !default;
$search-filters-padding: .5rem 5px !default;
-$search-filter-remove-icon: '\f00d' !default;
+$search-filter-remove-button-vertical-align: top !default;
+$search-filter-remove-button-text-display: inline-block !default;
+$search-filter-remove-button-text-max-width: 200px !default;
+$search-filter-remove-button-text-overflow: hidden !default;
+$search-filter-remove-button-text-text-overflow: ellipsis !default;
+$search-filter-remove-button-text-white-space: nowrap !default;
+$search-filter-remove-icon: '\f00d' !default;
+$search-filter-remove-icon-hover-color: $red !default;
+$search-filter-remove-icon-vertical-align: top !default;
+$search-filter-remove-icon-in-dropdown-position: absolute !default;
+$search-filter-remove-icon-in-dropdown-distance-from-right: 1rem !default;
+// Unset the vertical alignment from BS to align dropdowns AND indiv. buttons
+// The relevant definition is '.searchForm .btn {vertical-align: top;}'
+$search-filter-dropdown-button-vertical-align: unset !default;
+$search-filter-dropdown-button-float: none !default;
// *****************************************************************
// ************ Breadcrumbs ****************************************
diff --git a/themes/finc/scss/components/_header-active-filters.scss b/themes/finc/scss/components/_header-active-filters.scss
index 1373f53e8be..11c7638ce98 100644
--- a/themes/finc/scss/components/_header-active-filters.scss
+++ b/themes/finc/scss/components/_header-active-filters.scss
@@ -1,4 +1,46 @@
// Use this file to style all active filters elements in header
+// The structure is like so:
+// <!-- Outer container -->
+// <div class="active-filters">
+// <!-- Reset all button -->
+// <a class="reset-filters-btn" ....
+// <!-- Outer container for all individual filters -->
+// <div class="filters">
+// <div class="title-value-pair">
+// <!-- Filtergroup title -->
+// <span class="filters-title">
+// <!-- Individual filters' outer container -->
+// <span class="filter-value filters-or">
+// <!-- Individual filter -->
+// <a class="search-filter-remove" ...
+
+.active-filters {
+ // Outer container for all filters and reset button
+ // overwrite BS values where necessary
+ display: $active-filters-outer-container-display;
+
+
+ // Outer container for all individual filters
+ .filters {
+ padding-left: $active-filters-outer-filters-container-padding-left;
+ }
+
+ // Individual filters' outer container
+ // Make this the same height as .reset-filters-btn and other navigation elements
+ // for better usability - keep '.filters' for specifity (overwriting BS3)
+ .filters .filter-value {
+ height: $navigation-element-default-height;
+ margin-bottom: $search-filters-margin-bottom;
+ padding: $search-filters-padding;
+
+ &:focus,
+ &:hover {
+ background: $search-filter-remove-hover-bg;
+ color: $search-filter-remove-hover-color;
+ }
+ }
+}
+
// This is the 'reset all'-button
.reset-filters-btn {
@@ -12,53 +54,93 @@
}
}
-.active-filters {
- // Colored block with filter name
- // Make same height as .reset-filters-btn and other navigation elements
- // for better usability - keep '.filters' for specifity (overwriting BS3)
- .filters .filter-value {
- height: $navigation-element-default-height;
- margin-bottom: $search-filters-margin-bottom;
- padding: $search-filters-padding;
- &:focus,
- &:hover {
+// Set focus and hover styles for individual filter items'
+// outer container ('.filters .filter-value') and filter items ('.search-filter-remove')
+.filters .filter-value,
+.search-filter-remove {
+ color: $search-filter-values-remove-color;
+ text-decoration: $search-filter-remove-text-decoration;
+
+ &:focus,
+ &:hover,
+ &:visited:focus,
+ &:visited:hover {
+ // Keep '.active-filters' for specifity to overwrite BS
+ .active-filters & {
background: $search-filter-remove-hover-bg;
color: $search-filter-remove-hover-color;
+ text-decoration: inherit;
+
}
}
- // Link wrapping X-icon in filter-value element
- .search-filter-remove {
- text-decoration: none;
- &:focus,
- &:hover {
- color: $search-filter-remove-hover-color;
- outline-color: $search-filter-remove-hover-color;
+ // Make this same color as un-visited item
+ &:visited {
+ // Keep '.active-filters' for specifity to overwrite BS
+ .active-filters & {
+ color: inherit;
+ text-decoration: inherit;
+ }
+ }
+}
+
+// Set color of individual filters when focus is on outer container
+.search-filter-remove,
+.search-filter-remove:visited {
- .filter-value:focus &,
- .filter-value:hover & {
- color: inherit;
- }
+ .filters .filter-value:focus &,
+ .filters .filter-value:hover & {
+ background: $search-filter-remove-hover-bg;
+ color: $search-filter-remove-hover-color;
+
+
+ // x-icon color when outer container is focussed
+ &::after {
+ color: $search-filter-remove-icon-hover-color;
}
}
}
-// set states for focussed link when the outer container is NOT focussed
-.filter-value:not(:focus),
-.filter-value:not(:hover) {
- .search-filter-remove {
- &:focus,
- &:hover {
- color: inherit;
- outline-color: $search-filter-values-remove-color;
+// This is the colored, button-like element with the 'x' icon
+.search-filter-remove {
+ // Align with text inside the element
+ vertical-align: $search-filter-remove-button-vertical-align;
+
+ .text {
+ // Create ellipsis for overlong filter text
+ display: $search-filter-remove-button-text-display;
+ max-width: $search-filter-remove-button-text-max-width;
+ overflow: $search-filter-remove-button-text-overflow;
+ text-overflow: $search-filter-remove-button-text-text-overflow;
+ white-space: $search-filter-remove-button-text-white-space;
+ }
+
+
+ // Set icon content
+ &::after {
+ content: $search-filter-remove-icon;
+ vertical-align: $search-filter-remove-icon-vertical-align;
+
+ // Move 'x' to the right of the buttons in dropdown
+ .search-filter-dropdown & {
+ position: $search-filter-remove-icon-in-dropdown-position;
+ right: $search-filter-remove-icon-in-dropdown-distance-from-right;
}
}
}
-// Set icon
-.search-filter-remove::after {
- content: $search-filter-remove-icon;
+
+// Style for dropdowns (activated when more than n item(s) are set in filters.phtml):
+// Unset the vertical alignment from BS to align dropdowns AND indiv. buttons
+// The relevant definition is '.searchForm .btn {vertical-align: top;}'
+.search-filter-dropdown {
+
+ button[id^='dropdown-toggle-'] {
+ // set 'float' to 'none' to make vertical align work
+ float: $search-filter-dropdown-button-float;
+ vertical-align: $search-filter-dropdown-button-vertical-align;
+ }
}
diff --git a/themes/finc/scss/components/_header-navbar.scss b/themes/finc/scss/components/_header-navbar.scss
index 8547541a6ac..2cffc9ceda3 100644
--- a/themes/finc/scss/components/_header-navbar.scss
+++ b/themes/finc/scss/components/_header-navbar.scss
@@ -165,6 +165,7 @@ header,
// Make right-hand header parts fit with search box on SM devices - see also .search.container
#header-collapse {
+
@media (min-width: $screen-sm-min) {
// Make smaller to fit with search box and right-hand nav-elements
flex: $header-menu-flex-sm-up;
diff --git a/themes/finc/scss/components/_search.scss b/themes/finc/scss/components/_search.scss
index 3dbcc09cbf3..528aeefad13 100644
--- a/themes/finc/scss/components/_search.scss
+++ b/themes/finc/scss/components/_search.scss
@@ -105,14 +105,15 @@
}
}
- // BUTTONS in search form
+ // BUTTONS, inputs and selects in search form
.btn,
.form-control {
- // align 'search type' and search button
- vertical-align: top;
+ // align 'search type' and search button:
+ // Pls. beware that the active-filters' buttons will also be affected by this (reset in 'header-active-filters.scss' -> button[id^='dropdown-toggle-'])
+ vertical-align: $search-form-btn-form-control-vertical-align;
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
- float: left;
+ float: $search-form-btn-form-control-float-xs;
}
}
diff --git a/themes/finc/templates/search/controls/limit.phtml b/themes/finc/templates/search/controls/limit.phtml
index b13ad15652a..50ffafe7d11 100644
--- a/themes/finc/templates/search/controls/limit.phtml
+++ b/themes/finc/templates/search/controls/limit.phtml
@@ -4,7 +4,7 @@
<?php /* finc: DO NOT use class 'form-inline' as it messes up the select box */
/* finc: remove classname search-result-limit */ ?>
<form class="limit-form" action="<?=$this->currentPath() . $this->results->getUrlQuery()->setLimit(null)?>" method="post">
- <label for="limit-form"><?=$this->transEsc('Results per page')?></label>
+ <label for="limit"><?=$this->transEsc('Results per page')?></label>
<div class="limit-inner">
<?php /* finc: DO NOT use class 'form-control' as it messes up the select box */ ?>
<select id="limit" name="limit" class="jumpMenu">
diff --git a/themes/finc/templates/search/filters.phtml b/themes/finc/templates/search/filters.phtml
index b5509926df0..6d365819d79 100644
--- a/themes/finc/templates/search/filters.phtml
+++ b/themes/finc/templates/search/filters.phtml
@@ -50,7 +50,12 @@
<?php foreach ($filterList as $field => $data): ?>
<div class="title-value-pair">
<span class="filters-title"><?=$this->transEsc($field)?>:</span>
- <?php if (count($data) > 3): ?>
+ <?php /* finc: set number of filters from one group for display in dropdown to '> 1'
+ so 2 and more filters from one group will be presented in a dropdown rather
+ than as a long chain of terms -
+ bootstrap3 has '<?php if (count($data) > 3): ?>'
+ CK */ ?>
+ <?php if (count($data) > 1): ?>
<div class="search-filter-dropdown dropdown">
<?php $dropdown = true; ?>
<?php $safeId = preg_replace('/[^a-zA-Z0-9]/', '', $field); ?>
@@ -88,13 +93,14 @@
<?=($index > 0 || 'NOT' === $value['operator']) ? $join : '' ?>
</span>
<span class="filter-value filters-<?=$operatorClass?>">
- <?php /* finc: include span in remove link for better UX */ ?>
+ <?php /* finc uses entire text + icon as link for larger interaction area; adds more detailed aria-label */ ?>
<?php
$removeLink = isset($this->urlQuery)
? $urlQuery->removeFacet($value['field'], $value['value'], $value['operator'])
: $this->searchMemory()->getEditLink($this->searchClassId, 'removeFacet', $value);
?>
- <a class="search-filter-remove" aria-label="<?=$this->translate('Remove filter') ?>" href="<?=$removeLink?>"><!--icon from css -->
+ <a class="search-filter-remove" aria-label="<?=$this->transEsc('clear_tag_filter') ?> – <?=$this->transEsc('page_reload_on_deselect_hint', ['%%filter_name%%' => $value['displayText']])?>"
+ href="<?=$removeLink?>">
<span class="text">
<?=$this->escapeHtml($value['displayText'])?>
</span>
@@ -125,7 +131,12 @@
<?php // Normal view ?>
<div class="active-filters hidden-xs">
<?php if ($resetLink && $options->getRetainFilterSetting()): ?>
- <a class="reset-filters-btn" href="<?=$resetLink?>"><?=$this->transEsc('reset_filters_button')?></a>
+ <?php /* finc adds verbose reload warning via aria-label */ ?>
+ <a class="reset-filters-btn" href="<?=$resetLink?>"
+ aria-label="<?=$this->transEsc('clear_tag_filter') ?> – <?=$this->transEsc('page_reload_on_deselect_all_hint', ['%%filter_name%%' => $value['displayText']])?>"
+ >
+ <?=$this->transEsc('reset_filters_button') ?>
+ </a>
<?php elseif ($advancedSearch): ?>
<p class="adv_search_filters"><?=$this->transEsc('adv_search_filters')?>:</p>
<?php endif; ?>
@@ -138,7 +149,11 @@
<div class="active-filters visible-xs">
<div class="filters-toggle-bar">
<?php if ($resetLink && $options->getRetainFilterSetting()): ?>
- <a class="reset-filters-btn" href="<?=$resetLink?>"><?=$this->transEsc('reset_filters_button')?></a>
+ <?php /* finc adds verbose reload warning via aria-label */ ?>
+ <a class="reset-filters-btn active" href="<?=$resetLink?>"
+ aria-label="<?=$this->transEsc('clear_tag_filter') ?> – <?=$this->transEsc('page_reload_on_deselect_all_hint', ['%%filter_name%%' => $value['displayText']])?>">
+ <?=$this->transEsc('reset_filters_button')?>
+ </a>
<?php endif; ?>
<div class="filters-toggle collapsed" data-toggle="collapse" data-target="#active-filters-mobile">
<?=$this->transEsc('show_filters_html', ['%%count%%' => $filterCount])?>
--
GitLab