Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[FINNA-2369] Fix search dropdown menus for screen readers #3077

Open
wants to merge 10 commits into
base: dev
Choose a base branch
from
Open

[FINNA-2369] Fix search dropdown menus for screen readers #3077

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
cc18b70
Drodown attributes to change on click, added js translations and attr…
siiriylonen Nov 5, 2024
67a6804
Changed attributes to match other templates.
siiriylonen Nov 5, 2024
bff0b3d
Fixed an error.
siiriylonen Nov 5, 2024
29faa29
Change to resemble nav menu dropdowns.
siiriylonen Nov 6, 2024
c4900b3
Test fix and removed an attribute from icon options.
siiriylonen Nov 6, 2024
705fb0d
Chosen item on aria-label instead of description.
siiriylonen Nov 7, 2024
a2868cb
Focus on the clicked menu after option chosen.
siiriylonen Nov 8, 2024
cb5b2f9
Comment added.
siiriylonen Nov 8, 2024
d678783
Removed focus functions regarding view options.
siiriylonen Nov 21, 2024
b583fff
Moved the focus setting back where it was.
siiriylonen Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 24 additions & 7 deletions themes/finna2/js/finna-common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,14 +64,17 @@ finna.common = (function finnaCommon() {
*/
function initResultsEventHandler() {
VuFind.listen('results-load', () => {
setTimeout(
function focusHeading() {
const heading = document.getElementById("results-heading");
if (heading) {
heading.focus();
setTimeout(() => {
var storagedEl = window.sessionStorage.getItem('clickedMenu');
if (storagedEl) {
window.sessionStorage.removeItem('clickedMenu');
var focusedEl = document.querySelector(storagedEl);
if (focusedEl) {
focusedEl.focus();
}
},
200
}
},
200
);
});
VuFind.listen('results-loaded', () => {
Expand All @@ -91,16 +94,30 @@ finna.common = (function finnaCommon() {
};
link.addEventListener('click', function handleClick(event) {
event.preventDefault();
window.sessionStorage.setItem('clickedMenu', `${type}-dropdown a.dropdown-toggle`);
// 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) + ' ' + VuFind.translate('selected');
const spanEl = toggleEl.querySelector('span');
if (spanEl) {
spanEl.innerText = link.innerText;
}
}
const menuEl = dropdownEl.querySelector('.dropdown-menu');
if (menuEl) {
menuEl.querySelectorAll("li > a").forEach(element => {
if (element.ariaDescription) {
element.removeAttribute("aria-description");
}
if (element.innerText.trim() === toggleEl.innerText.trim()) {
element.ariaDescription = VuFind.translate('selected');
}
});
}
}
// Get relevant data from the link and change the hidden field accordingly:
const urlParts = link.getAttribute('href').split('?', 2);
Expand Down
10 changes: 10 additions & 0 deletions themes/finna2/templates/layout/finna-js-translations.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,16 @@ $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',
'sort_callnumber' => 'sort_callnumber',
'sort_author' => 'sort_author',
'sort_title' => 'sort_title',
'sort_last_indexed' => 'sort_last_indexed',

'radiusPrefix' => 'Radius',
'circleCaption' => 'Select Area',
'clearCaption' => 'Clear Selections',
Expand Down
4 changes: 2 additions & 2 deletions themes/finna2/templates/search/controls/limit.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,15 @@
<div class="dropdown">
<?php foreach ($limitList as $limitVal => $limitData): ?>
<?php if ($limitData['selected']): ?>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" 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') . ': ' . $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'])?>"><?=$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>
Expand Down
4 changes: 2 additions & 2 deletions themes/finna2/templates/search/controls/sort.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ if (!empty($list)): ?>
<?php $selectedFound = false; ?>
<?php foreach ($list as $sortType => $sortData): ?>
<?php if ($sortData['selected']): ?>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-label="<?= $this->transEsc('Sort') . ': ' . $this->transEsc($sortData['desc'])?>">
<a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown" aria-label="<?= $this->transEsc('Sort') . ': ' . $this->transEsc($sortData['desc']) . ' ' . $this->transEsc('selected')?>">
<span><?=$this->transEsc($sortData['desc'])?></span> <?=$this->icon('dropdown-open') ?>
</a>
<?php $selectedFound = true; ?>
Expand All @@ -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'])?>"><?=$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>
Expand Down
6 changes: 3 additions & 3 deletions themes/finna2/templates/search/controls/view.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<div class="view-options">
<?php foreach ($viewList as $viewType => $viewData): ?>
<div class="view-button <?= $viewData['selected'] ? 'selected' : '' ?>">
<a href="<?=$this->results->getUrlQuery()->setViewParam($viewType)?>" title="<?=$this->transEsc('Show As ' . $viewData['desc'])?>" aria-label="<?=$this->transEsc('Show As ' . $viewData['desc'])?>"><?= $this->icon('view-' . $viewType, 'icon-' . $viewType) ?></a>
<a href="<?=$this->results->getUrlQuery()->setViewParam($viewType)?>" role="button" aria-label="<?=$this->transEsc('show_as') . ': ' . $this->transEsc('Show As ' . $viewData['desc'])?>" <?php if ($viewData['selected']):?>aria-description="<?=$this->transEsc('selected')?>"<?php endif; ?>><?= $this->icon('view-' . $viewType, 'icon-' . $viewType) ?></a>
</div>
<?php endforeach; ?>
</div>
Expand All @@ -24,7 +24,7 @@
<div class="dropdown">
<?php foreach ($viewList as $viewType => $viewData): ?>
<?php if ($viewData['selected']): ?>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" 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') . ': ' . $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; ?>

Expand All @@ -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'])?>" >
<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>
Expand Down