From dce0bb4424502920f115a5c7883d70e4a28ad76f Mon Sep 17 00:00:00 2001
From: Alexander Purr <purr@ub.uni-leipzig.de>
Date: Wed, 18 Oct 2023 16:04:50 +0200
Subject: [PATCH] refs #24792 [fid_adlr] remove inline script
* move chevron-down into svg
* move inline script into js head script section
** on delegate keydown to click
** move focus
** remove legacy lang switcher
* close menu toggler on escape
* remove debugger
---
themes/fid_adlr/images/chevron-down.svg | 1 +
themes/fid_adlr/scss/components/_forms.scss | 3 +-
themes/fid_adlr/templates/header.phtml | 29 ++++++++++++++-----
.../templates/search/searchTabs.phtml | 7 ++++-
4 files changed, 30 insertions(+), 10 deletions(-)
create mode 100644 themes/fid_adlr/images/chevron-down.svg
diff --git a/themes/fid_adlr/images/chevron-down.svg b/themes/fid_adlr/images/chevron-down.svg
new file mode 100644
index 00000000000..21fc7eaa023
--- /dev/null
+++ b/themes/fid_adlr/images/chevron-down.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="12px" y="0px" width="24px" height="3px" viewBox="0 0 6 3" enable-background="new 0 0 6 3" xml:space="preserve"><polygon points="5.992,0 2.992,3 -0.008,0 "/></svg>
\ No newline at end of file
diff --git a/themes/fid_adlr/scss/components/_forms.scss b/themes/fid_adlr/scss/components/_forms.scss
index 8d2ca3de318..74581ba96e5 100644
--- a/themes/fid_adlr/scss/components/_forms.scss
+++ b/themes/fid_adlr/scss/components/_forms.scss
@@ -38,8 +38,7 @@ form {
select,
#advSearchForm select {
- // FIXME: change background-image to chevron-down as svg
- background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
+ background-image: url('../images/chevron-down.svg');
}
// Change Autocomplete styles in Chrome
diff --git a/themes/fid_adlr/templates/header.phtml b/themes/fid_adlr/templates/header.phtml
index ed0a9e8863d..64fb2120537 100644
--- a/themes/fid_adlr/templates/header.phtml
+++ b/themes/fid_adlr/templates/header.phtml
@@ -142,8 +142,7 @@
data-toggle="dropdown"
tabindex="3"
aria-controls="langmenu"
- aria-expanded="false"
- onkeydown="forceFocus('#langmenu li a')">
+ aria-expanded="false">
<span class="sr-only">Toggle language</span>
<span class="decorate"><?= $this->layout()->userLang ?></span>
<i class="icon icon-chevron-down" aria-hidden="true"></i>
@@ -154,8 +153,7 @@
<?php foreach ($this->layout()->allLangs as $langCode => $langName): ?>
<li<?= $this->layout()->userLang == $langCode ? ' class="active"' : '' ?>>
<?php $fullLangName = $this->displayLanguageOption($langName); ?>
- <a class="btn" href="#"
- <?= $this->layout()->userLang != $langCode ? 'onClick="document.langForm.mylang.value=\'' . $langCode . '\';document.langForm.submit()"' : '' ?>>
+ <a class="btn" href="<?=$this->escapeHtmlAttr($this->url()->addQueryParameters(['lng' => $langCode])) ?>" rel="nofollow">
<?= $fullLangName ? ($this->layout()->userLang != $langCode ? $this->transEsc($fullLangName) : $fullLangName) : $langCode ?>
</a>
</li>
@@ -173,7 +171,6 @@
<div>
<a class="navbar-header-link collapsed"
id="submenuToggler"
- onkeydown='clickElementOnKeyDown(event, "#submenuToggler"); forceFocus(".submenu-collapse li a")'
tabindex="4"
data-toggle="collapse"
data-target="header, #submenu, #language-dropdown, #register-menu">
@@ -229,8 +226,7 @@
<li class="visible-xs visible-sm visible-md submenu-additionals-lang" >
<?php foreach ($this->layout()->allLangs as $langCode => $langName): ?>
<?php $fullLangName = $this->displayLanguageOption($langName); ?>
- <a href="#"
- <?= $this->layout()->userLang != $langCode ? 'onClick="document.langForm.mylang.value=\'' . $langCode . '\';document.langForm.submit()"' : '' ?>>
+ <a href="<?=$this->escapeHtmlAttr($this->url()->addQueryParameters(['lng' => $langCode])) ?>" rel="nofollow">
<span <?= $this->layout()->userLang == $langCode ? ' class="active"' : '' ?>><?= $fullLangName ? ($this->layout()->userLang != $langCode ? $this->transEsc($fullLangName) : $fullLangName) : $langCode ?></span>
</a>
<?php endforeach; ?>
@@ -298,6 +294,25 @@
$('#language-dropdown').collapse('hide');
}
});
+
+ // #17913, catch keydown and move focus
+ $('#quickfilter-language').on('keydown', function(){
+ forceFocus('#langmenu li a')
+ });
+
+ // #17913, catch keydown: delegate click and move focus
+ $("#submenuToggler").on('keydown', function(){
+ clickElementOnKeyDown(event, "#submenuToggler");
+ forceFocus(".submenu-collapse li a");
+ });
+
+ // #24792 handle esc for closing toggler
+ $("#submenu .submenu-collapse").on('keydown', function() {
+ if (event.key === 'Escape') {
+ document.getElementById("submenuToggler").click();
+ forceFocus("#submenuToggler");
+ }
+ });
});
function clickElementOnKeyDown(event, elementId) {
diff --git a/themes/fid_adlr/templates/search/searchTabs.phtml b/themes/fid_adlr/templates/search/searchTabs.phtml
index 5bf70f6e630..faf2d9e0ace 100644
--- a/themes/fid_adlr/templates/search/searchTabs.phtml
+++ b/themes/fid_adlr/templates/search/searchTabs.phtml
@@ -45,7 +45,7 @@
<?php endif; ?>
/>
<?php $id = "filter-" . str_replace(' ', '', $tab['label']); ?>
- <label tabindex="0" onkeydown="clickElementOnKeyDown(event, '#<?=$id?>');" for="<?=$id?>"><?= $this->transEsc($tab['label']) ?></label>
+ <label tabindex="0" for="<?=$id?>"><?= $this->transEsc($tab['label']) ?></label>
<?php elseif ($block = $this->permission()->getAlternateContent($tab['permission'])): ?>
<input type="radio" id="filter-<?= str_replace(' ', '', $tab['label']) . '_permission_denied' ?>" disabled />
<label tabindex="0" for="filter-<?= str_replace(' ', '', $tab['label']) . '_permission_denied' ?>"><?=$block?></label>
@@ -88,6 +88,11 @@
return true;
});
+
+ // #17913; delegate keydown on filter-option-lable as click event to real input
+ $(".filter-option label").on('keydown', function() {
+ clickElementOnKeyDown(event, '#' + $(this).attr('for'));
+ });
});
JS;
?>
--
GitLab