Change to resemble nav menu dropdowns.

NatLibFi · Nov 6, 2024 · 29faa29 · 29faa29
1 parent bff0b3d
commit 29faa29
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 11 deletions.
diff --git a/themes/finna2/js/finna-common.js b/themes/finna2/js/finna-common.js
@@ -93,12 +93,11 @@ finna.common = (function finnaCommon() {
         event.preventDefault();
         // Update button text:
         const dropdownEl = link.closest('.dropdown');
-        const dropdownLabel = type === 'sort' ? 'Sort' : 'Results per page';
         if (dropdownEl) {
           const toggleEl = dropdownEl.querySelector('.dropdown-toggle');
           if (toggleEl) {
-            toggleEl.ariaLabel = VuFind.translate(dropdownLabel) + ': ' + VuFind.translate(link.innerText);
             const spanEl = toggleEl.querySelector('span');
+            toggleEl.ariaDescription = VuFind.translate(link.innerText) + ' ' + VuFind.translate('selected');
             if (spanEl) {
               spanEl.innerText = link.innerText;
             }
@@ -109,7 +108,7 @@ finna.common = (function finnaCommon() {
               if (element.ariaDescription) {
                 element.removeAttribute("aria-description");
               }
-              if (element.getAttribute('aria-label') === toggleEl.ariaLabel) {
+              if (element.innerText.trim() === toggleEl.innerText.trim()) {
                 element.ariaDescription = VuFind.translate('selected');
               }
             });

diff --git a/themes/finna2/templates/layout/finna-js-translations.phtml b/themes/finna2/templates/layout/finna-js-translations.phtml
@@ -21,8 +21,6 @@ $this->jsTranslations()->addStrings(
         'show_filters' => 'show_filters',
         'hide_filters' => 'hide_filters',
 
-        'Sort' => 'Sort',
-        'Results per page' => 'Results per page',
         'sort_relevance' => 'sort_relevance',
         'sort_year' => 'sort_year',
         'sort_year asc' => 'sort_year asc',

diff --git a/themes/finna2/templates/search/controls/limit.phtml b/themes/finna2/templates/search/controls/limit.phtml
@@ -8,15 +8,15 @@
       <div class="dropdown">
         <?php foreach ($limitList as $limitVal => $limitData): ?>
           <?php if ($limitData['selected']): ?>
-          <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown" aria-label="<?=$this->transEscAttr('Results per page') . ': ' . $this->transEscAttr($limitData['desc'])?>">
+          <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown" aria-label="<?=$this->transEscAttr('Results per page')?>" aria-description="<?=$this->transEscAttr($limitData['desc']) . ' ' . $this->transEsc('selected')?>">
             <span><?=$this->transEsc($limitData['desc'])?></span> <?=$this->icon('dropdown-open') ?>
           </a>
           <?php endif; ?>
         <?php endforeach; ?>
         <ul class="dropdown-menu" role="menu" aria-labelledby="limit-label">
           <?php foreach ($limitList as $limitVal => $limitData): ?>
           <li>
-            <a href="Results<?=$this->results->getUrlQuery()->setLimit($limitVal)?>" role="menuitem" aria-label="<?=$this->transEscAttr('Results per page') . ': ' . $this->transEscAttr($limitData['desc'])?>" <?php if ($limitData['selected']):?>aria-description="<?=$this->transEsc('selected')?>"<?php endif;?>><?=$this->transEsc($limitData['desc'])?></a>
+            <a href="Results<?=$this->results->getUrlQuery()->setLimit($limitVal)?>" role="menuitem" <?php if ($limitData['selected']):?>aria-description="<?=$this->transEsc('selected')?>"<?php endif;?>><?=$this->transEsc($limitData['desc'])?></a>
           <?php endforeach; ?>
           </li>
         </ul>

diff --git a/themes/finna2/templates/search/controls/sort.phtml b/themes/finna2/templates/search/controls/sort.phtml
@@ -9,7 +9,7 @@ if (!empty($list)): ?>
         <?php $selectedFound = false; ?>
         <?php foreach ($list as $sortType => $sortData): ?>
           <?php if ($sortData['selected']): ?>
-            <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown" aria-label="<?= $this->transEsc('Sort') . ': ' . $this->transEsc($sortData['desc'])?>">
+            <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown" aria-label="<?= $this->transEsc('Sort')?>" aria-description="<?=$this->transEsc($sortData['desc']) . ' ' . $this->transEsc('selected')?>">
               <span><?=$this->transEsc($sortData['desc'])?></span> <?=$this->icon('dropdown-open') ?>
             </a>
             <?php $selectedFound = true; ?>
@@ -23,7 +23,7 @@ if (!empty($list)): ?>
         <ul class="dropdown-menu" role="menu" aria-labelledby="sort-label">
           <?php foreach ($list as $sortType => $sortData): ?>
           <li>
-            <a href="Results<?=isset($sortData['url']) ? $this->escapeHtmlAttr($sortData['url']) : $this->results->getUrlQuery()->setSort($sortType)?>" role="menuitem" aria-label="<?= $this->transEsc('Sort') . ': ' . $this->transEsc($sortData['desc'])?>" <?php if ($sortData['selected']):?>aria-description="<?=$this->transEsc('selected')?>"<?php endif;?>><?=$this->transEsc($sortData['desc'])?></a>
+            <a href="Results<?=isset($sortData['url']) ? $this->escapeHtmlAttr($sortData['url']) : $this->results->getUrlQuery()->setSort($sortType)?>" role="menuitem" <?php if ($sortData['selected']):?>aria-description="<?=$this->transEsc('selected')?>"<?php endif;?>><?=$this->transEsc($sortData['desc'])?></a>
           <?php endforeach; ?>
           </li>
         </ul>

diff --git a/themes/finna2/templates/search/controls/view.phtml b/themes/finna2/templates/search/controls/view.phtml
@@ -24,7 +24,7 @@
       <div class="dropdown">
         <?php foreach ($viewList as $viewType => $viewData): ?>
           <?php if ($viewData['selected']): ?>
-            <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown" aria-label="<?=$this->transEsc('show_as') . ': ' . $this->transEsc('Show As ' . $viewData['desc'])?>"><?=$this->icon('view-' . $viewType, 'icon-' . $viewType) ?> <span class="<?=($isCollection ?? false) ? 'hidden-xs hidden-sm' : '' ?>"><?=$this->transEsc('Show As ' . $viewData['desc'])?></span> <?=$this->icon('dropdown-open') ?></a>
+            <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown" aria-label="<?=$this->transEsc('show_as')?>"  aria-description="<?=$this->transEsc('Show As ' . $viewData['desc']). ' ' . $this->transEsc('selected')?>"><?=$this->icon('view-' . $viewType, 'icon-' . $viewType) ?> <span class="<?=($isCollection ?? false) ? 'hidden-xs hidden-sm' : '' ?>"><?=$this->transEsc('Show As ' . $viewData['desc'])?></span> <?=$this->icon('dropdown-open') ?></a>
           <?php endif; ?>
         <?php endforeach; ?>
 
@@ -41,7 +41,7 @@
               }
             ?>
             <li>
-              <a href="<?=$viewUrl?>" title="<?=$this->transEsc($viewData['desc'])?>" role="menuitem" aria-label="<?=$this->transEsc('show_as') . ': ' . $this->transEsc('Show As ' . $viewData['desc'])?>" <?php if ($viewData['selected']):?>aria-description="<?=$this->transEsc('selected')?>"<?php endif; ?>>
+              <a href="<?=$viewUrl?>" role="menuitem" <?php if ($viewData['selected']):?>aria-description="<?=$this->transEsc('selected')?>"<?php endif;?>>
                 <?=$this->icon('view-' . $viewType, 'icon-' . $viewType) ?> <?=$this->transEsc('Show As ' . $viewData['desc'])?>
               </a>
             </li>