From 3ea026f771472fbbe54289c76bea7fbbb6898501 Mon Sep 17 00:00:00 2001
From: Claas Kazzer <kazzer@uni-leipzig.de>
Date: Wed, 23 Feb 2022 15:51:03 +0100
Subject: [PATCH] refs #21242 [fid_adlr] adds basic accessibility changes to
adv search template
* adds basic XS and SM styles for adv search
* corrects top margin on SM
* corrects top margins again
* corrects focus highlighting on X buttons on SM
* sets focus border for SM up
* extends magenta bordered focus highlight to XS
---
themes/fid_adlr/scss/_customVariables.scss | 1 +
themes/fid_adlr/scss/compiled.scss | 42 +++++++++++++
.../templates/search/advanced/layout.phtml | 63 ++++++++++++++-----
3 files changed, 89 insertions(+), 17 deletions(-)
diff --git a/themes/fid_adlr/scss/_customVariables.scss b/themes/fid_adlr/scss/_customVariables.scss
index 46a9602eeed..19a4d818272 100644
--- a/themes/fid_adlr/scss/_customVariables.scss
+++ b/themes/fid_adlr/scss/_customVariables.scss
@@ -214,6 +214,7 @@ $transition-duration: .1s;
//// FORM ELEMENTS
//$select-bg-color: $ghost !default;
$form-group-margin-top: 50px;
+$adv-search-form-X-top-margin: 31px;
//// BORDERS
//$border-color: $iron !default;
diff --git a/themes/fid_adlr/scss/compiled.scss b/themes/fid_adlr/scss/compiled.scss
index 1c067419a5a..2fc0ef7c13e 100644
--- a/themes/fid_adlr/scss/compiled.scss
+++ b/themes/fid_adlr/scss/compiled.scss
@@ -747,6 +747,24 @@ input[type='password']:hover {
outline-offset: 0;
}
+// keep .adv-search for specifity to override bootstrap3 theme - CK
+.adv-search .adv-term-remove {
+ // finc defines margin-top as 26px
+ margin-top: $adv-search-form-X-top-margin;
+
+ @media (max-width: $screen-sm-max) {
+ // match border width of other items
+ border-width: 3px;
+ margin-left: 3px;
+ padding: .25em 1.2em 8px .5em;
+ }
+
+ @media (min-width: $screen-sm-min) {
+ border: 3px solid transparent;
+ padding-top: 6px;
+ }
+}
+
.adv-term-remove:focus,
.adv-term-remove:hover,
.close:focus,
@@ -754,6 +772,29 @@ input[type='password']:hover {
outline: none;
}
+.adv-term-remove:focus,
+.adv-term-remove:hover {
+ border-color: $brand-danger;
+
+ @media (min-width: $screen-sm-min) {
+ padding-bottom: 3px;
+ }
+}
+
+// 'Uebereinstimmung mit'-select bxx
+.adv-group-match select {
+ margin-top: 4px;
+}
+
+// keep .adv-search for specifity to override bootstrap3 theme - CK
+.adv-search .adv-term-type {
+ // lend same appearance as on XS - or it will look sloppy, CK
+ @media (max-width: $screen-sm-max) {
+ // this is the max-width value for .form-control on XS
+ max-width: em(400px);
+ }
+}
+
input[type='radio']:focus,
input[type='radio']:hover {
cursor: pointer;
@@ -1533,6 +1574,7 @@ header {
@include search-filter-styles(false, false);
}
}
+
// ++++ SEARCH TABS - END
// ++++ SEARCH BOX - END
diff --git a/themes/fid_adlr/templates/search/advanced/layout.phtml b/themes/fid_adlr/templates/search/advanced/layout.phtml
index 8f743d9a2a2..6b1897d99ab 100644
--- a/themes/fid_adlr/templates/search/advanced/layout.phtml
+++ b/themes/fid_adlr/templates/search/advanced/layout.phtml
@@ -1,5 +1,7 @@
<!-- finc: search - advanced - layout -->
<?php
+// Set page title.
+$this->headTitle($this->translate('Advanced Search'));
// Disable top search box -- this page has a special layout.
$this->layout()->searchbox = false;
@@ -74,7 +76,12 @@ if (isset($searchDetails) && is_object($searchDetails)) {
<input type="hidden" name="sort" value="<?=$this->escapeHtmlAttr($lastSort)?>" />
<?php endif; ?>
<div class="clearfix">
- <h2 class="pull-left flip"><?=$this->transEsc('Advanced Search')?></h2>
+ <span class="offcanvas-toggler">
+ <a class="search-filter-toggle btn btn-primary visible-xs" href="#myresearch-sidebar" data-toggle="offcanvas" aria-label="<?=$this->transEsc('sidebar_expand')?>">
+ <?=$this->transEsc('offcanvas-toggler-search-tips')?>
+ </a>
+ </span>
+ <h1 class="pull-left flip"><?=$this->transEsc('Advanced Search')?></h1>
<div id="groupJoin" class="form-inline pull-right flip">
<label for="groupJoinOptions"><?=$this->transEsc("search_match")?>:</label>
<select id="groupJoinOptions" name="join" class="form-control">
@@ -85,7 +92,8 @@ if (isset($searchDetails) && is_object($searchDetails)) {
</div>
<?php /* finc: keep icon inside link for consistent functionality */ ?>
<span id="groupPlaceHolder" class="hidden">
- <a href="javascript:void(0);" onClick="addGroup();return false"><i class="fa fa-plus" aria-hidden="true"> </i> <?= $this->transEsc('add_search_group') ?></a>
+ <a href="javascript:void(0);" onClick="addGroup();return false" role="button">
+ <i class="fa fa-plus" aria-hidden="true"> </i> <?= $this->transEsc('add_search_group') ?></a>
</span>
<?php /* fallback to a fixed set of search groups/fields if JavaScript is turned off */ ?>
<div class="no-js">
@@ -96,21 +104,41 @@ if (isset($searchDetails) && is_object($searchDetails)) {
<?php if($group == 0): ?>
<div id="new_group_template">
<?php endif; ?>
- <div id="group<?=$group ?>" class="adv-group">
+ <div id="group<?=$group?>" class="adv-group" role="group" aria-label="<?=$this->transEsc('adv_search_searchgroup')?> <?=$group?>">
<div class="adv-group-terms">
- <label class="adv-group-label"><?=$this->transEsc("adv_search_label")?>:</label>
+ <?php /* remove label in favor of more detailed labelling */ /* <label class="adv-group-label" for="search_lookfor<?=$group ?>_0"><?=$this->transEsc("adv_search_label")?>:</label> */ ?>
<?php for($search=0 ; $search<3 || (isset($setQueries[$group]) && $search<count($setQueries[$group])) ; $search++): ?>
<?php if($group == 0 && $search == 0): ?>
<div id="new_search_template">
+ <?php else: ?>
<?php endif; ?>
<div id="search<?=$group.'_'.$search ?>" class="adv-search">
- <input name="lookfor<?=$group ?>[]" id="search_lookfor<?=$group . '_' . $search ?>" class="adv-term-input form-control" type="text"<?php if (isset($setQueries[$group][$search])): ?> value="<?=$this->escapeHtml($setQueries[$group][$search]->getString())?>"<?php endif; ?> aria-label="<?=$this->transEsc("search_terms")?>">
- <select class="adv-term-type form-control" name="type<?=$group ?>[]" aria-label="<?=$this->transEsc("Search type")?>">
+ <fieldset>
+ <legend class="sr-only">
+ <?=$this->transEsc("adv_search_searchfield")?> <?=$search + 1?>
+ </legend>
+ <div class="adv-input">
+ <label for="search_lookfor<?=$group . '_' . $search?>">
+ <?=$this->transEsc("search_terms")?>:
+ </label>
+ <input name="lookfor<?=$group ?>[]" id="search_lookfor<?=$group . '_' . $search ?>" class="adv-term-input form-control" type="text"<?php if (isset($setQueries[$group][$search])): ?> value="<?=$this->escapeHtml($setQueries[$group][$search]->getString())?>"<?php endif; ?>>
+ </div>
+
+ <div class="adv-select">
+ <label for="type<?=$group . '_' . $search?>"><?=$this->transEsc("Search type")?>:</label>
+ <select id="type<?=$group . '_' . $search?>" class="adv-term-type form-control" name="type<?=$group?>[]">
<?php foreach ($this->options->getAdvancedHandlers() as $searchVal => $searchDesc): ?>
<option value="<?=$this->escapeHtml($searchVal)?>"<?php if(isset($setQueries[$group][$search]) && $searchVal == $setQueries[$group][$search]->getHandler()):?> selected<?php endif;?>><?=$this->transEsc($searchDesc)?></option>
<?php endforeach; ?>
</select>
- <a href="javascript:void(0);" class="adv-term-remove hidden">×</a>
+ </div>
+
+ <a href="javascript:void(0);" class="adv-term-remove hidden">
+ <span class="sr-only"><?=$this->transEsc("remove")?></span>
+ <i class="fa fa-times" aria-hidden="true"></i>
+ </a>
+ </fieldset>
+
</div>
<?php if($group == 0 && $search == 0): ?>
</div>
@@ -119,21 +147,21 @@ if (isset($searchDetails) && is_object($searchDetails)) {
*/ ?>
<span class="float-left">
<span class="search_place_holder hidden" aria-hidden="true"></span>
- <a href="javascript:void(0);" class="add_search_link hidden">
+ <a href="javascript:void(0);" class="add_search_link hidden" role="button">
<i class="fa fa-plus" aria-hidden="true"></i> <?=$this->transEsc("add_search")?></a>
</span>
<?php endif; ?>
<?php endfor; ?>
</div>
<div class="adv-group-match">
- <label class="search_bool"><?=$this->transEsc("search_match")?>: </label>
- <select name="bool<?=$group ?>[]" id="search_bool<?=$group ?>" class="form-control">
+ <label class="search_bool" for="search_bool<?=$group ?>"><?=$this->transEsc("search_match")?>: </label>
+ <select id="search_bool<?=$group?>" name="bool<?=$group?>[]" class="form-control">
<option value="AND"<?php if(isset($setSearchGroups[$group]) && 'AND' == $setSearchGroups[$group]):?> selected<?php endif;?>><?=$this->transEsc("search_AND")?></option>
<option value="OR"<?php if(isset($setSearchGroups[$group]) && 'OR' == $setSearchGroups[$group]):?> selected<?php endif;?>><?=$this->transEsc("search_OR")?></option>
<option value="NOT"<?php if(isset($setSearchGroups[$group]) && 'NOT' == $setSearchGroups[$group]):?> selected<?php endif;?>><?=$this->transEsc("search_NOT")?></option>
</select>
</div>
- <a href="javascript:void(0);" class="adv-group-close hidden"><i class="fa fa-close"></i> <?=$this->transEsc("del_search")?></a>
+ <a href="javascript:void(0);" class="adv-group-close hidden" role="button"><i class="fa fa-close"></i> <?=$this->transEsc("del_search")?></a>
</div>
<?php if($group == 0): ?>
</div>
@@ -143,26 +171,27 @@ if (isset($searchDetails) && is_object($searchDetails)) {
</div>
<?php /* finc: introduce 'fnd-btn'-class to swap submit and clear buttons for consistency */ ?>
<div class="adv-submit">
- <input class="clear-btn btn btn-primary" type="button" value="<?=$this->transEsc('Clear')?>">
- <input class="fnd-btn btn btn-primary" type="submit" value="<?= $this->transEsc('Find')?>">
+ <input class="clear-btn btn btn-primary" type="button" value="<?=$this->transEsc('Clear')?>" aria-label="<?=$this->transEsc('Clear')?>">
+ <input class="fnd-btn btn btn-primary" type="submit" value="<?= $this->transEsc('Find')?>" aria-label="<?= $this->transEsc('Find')?>">
</div>
<?php if (isset($this->extraAdvancedControls)): ?>
<div class="clearfix">
<?=$this->extraAdvancedControls ?>
</div>
<div class="adv-submit margin-t">
- <input class="clear-btn btn btn-primary" type="button" value="<?=$this->transEsc('Clear')?>">
- <input class="fnd-btn btn btn-primary" type="submit" value="<?= $this->transEsc('Find')?>">
+ <input class="clear-btn btn btn-primary" type="button" value="<?=$this->transEsc('Clear')?>" aria-label="<?=$this->transEsc('Clear')?>">
+ <input class="fnd-btn btn btn-primary" type="submit" value="<?= $this->transEsc('Find')?>" aria-label="<?= $this->transEsc('Find')?>">
</div>
<?php endif; ?>
</div>
<div class="<?=$this->layoutClass('sidebar')?>">
+ <button class="close-offcanvas btn btn-primary" data-toggle="offcanvas"><?=$this->transEsc('navigate_back') ?></button>
<?php if ($hasDefaultsApplied): ?>
<input type="hidden" name="dfApplied" value="1" />
<?php endif ?>
<?php if (!empty($searchFilters)): ?>
- <h4><?=$this->transEsc("adv_search_filters")?></h4>
+ <h2><?=$this->transEsc("adv_search_filters")?></h2>
<div class="facet-group">
<label class="checkbox">
<input type="checkbox" checked="checked" class="checkbox-select-all"/>
@@ -178,7 +207,7 @@ if (isset($searchDetails) && is_object($searchDetails)) {
</div>
<?php endforeach; ?>
<?php endif; ?>
- <h4><?=$this->transEsc("Search Tips")?></h4>
+ <h2><?=$this->transEsc("Search Tips")?></h2>
<div class="facet-group">
<a class="facet help-link" data-lightbox href="<?=$this->url('help-home')?>?topic=advsearch&_=<?=time() ?>"><?=$this->transEsc("Help with Advanced Search")?></a>
<a class="facet help-link" data-lightbox href="<?=$this->url('help-home')?>?topic=search&_=<?=time() ?>"><?=$this->transEsc("Help with Search Operators")?></a>
--
GitLab