From d2a4c74c3a260fd4347c220d6e62e4daf252da2c Mon Sep 17 00:00:00 2001
From: Chris Hallberg <crhallberg@gmail.com>
Date: Tue, 28 Apr 2020 13:29:21 -0400
Subject: [PATCH] Visual-only collapsing of header and facets.
- Removes need for "Toggle navigation" label.
- Changes how Bootstrap's .collapse works.
---
.../less/components/accessibility.less | 31 +++++++++++++++++++
themes/bootstrap3/templates/header.phtml | 5 ++-
2 files changed, 33 insertions(+), 3 deletions(-)
diff --git a/themes/bootstrap3/less/components/accessibility.less b/themes/bootstrap3/less/components/accessibility.less
index 8be4e1f1823..558308b9464 100644
--- a/themes/bootstrap3/less/components/accessibility.less
+++ b/themes/bootstrap3/less/components/accessibility.less
@@ -19,6 +19,37 @@ a {
}
.sr-only {
+ color: #000;
background-color: #fff;
+}
+
+/**
+ * instead of display: none, keep things sr accessible
+ * https://tailwindcss.com/docs/screen-readers/
+ */
+.collapse.collapse:not(.in) {
+ position: absolute;
+ display: block;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
color: #000;
+ background-color: #fff;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border-width: 0;
+}
+@media (min-width: 768px) {
+ .navbar-collapse.collapse:not(.in) {
+ position: static;
+ width: auto;
+ height: auto;
+ padding: 0;
+ margin: 0;
+ overflow: visible;
+ clip: auto;
+ white-space: normal;
+ }
}
diff --git a/themes/bootstrap3/templates/header.phtml b/themes/bootstrap3/templates/header.phtml
index f20e24f0a39..688b8844207 100644
--- a/themes/bootstrap3/templates/header.phtml
+++ b/themes/bootstrap3/templates/header.phtml
@@ -1,9 +1,8 @@
<?php $account = $this->auth()->getManager(); ?>
<div class="banner container navbar">
<div class="navbar-header">
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#header-collapse">
- <span class="sr-only">Toggle navigation</span>
- <i class="fa fa-bars" aria-hidden="true"></i>
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#header-collapse" aria-hidden="true">
+ <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand lang-<?=$this->layout()->userLang ?>" href="<?=$this->url('home')?>">VuFind</a>
</div>
--
GitLab