From 17a23c5002e205e66ee826e1b674967e7ed1f3bc Mon Sep 17 00:00:00 2001
From: Geoffrey Spear <geoffspear@gmail.com>
Date: Wed, 12 Sep 2018 12:50:23 -0400
Subject: [PATCH] Accessibility improvements (#1222)
* Add aria-label attributes to search form inputs and selects
Guidelines:
WCAG 2.0 A F68
Section 508 1194.22 (n)
* Add title element to FacetList page
Guideline: https://www.w3.org/TR/WCAG20-TECHS/F25.html
* Add aria-label to initial similar items carousel
This widget has a label added by JS after it's clicked, but doesn't start with a label, which
is triggering WCAG 2.0 A F89 failure.
---
languages/en.ini | 2 ++
.../bootstrap3/templates/RecordTab/similaritemscarousel.phtml | 4 ++--
themes/bootstrap3/templates/eds/advanced.phtml | 4 ++--
themes/bootstrap3/templates/primo/advanced.phtml | 2 +-
themes/bootstrap3/templates/search/advanced/layout.phtml | 4 ++--
themes/bootstrap3/templates/search/facet-list.phtml | 1 +
themes/bootstrap3/templates/search/searchbox.phtml | 4 ++--
7 files changed, 12 insertions(+), 9 deletions(-)
diff --git a/languages/en.ini b/languages/en.ini
index 5b929ff933e..a2bc88fa69d 100644
--- a/languages/en.ini
+++ b/languages/en.ini
@@ -364,6 +364,7 @@ external_auth_heading = "Access to licensed material"
external_auth_login_message = "Login to access licensed material"
external_auth_unauthorized = "You are not authorized to access licensed material"
external_auth_unauthorized_desc = "Your login method does not provide access to licensed material. Please log out and then log in using another method."
+facet_list_for = "Facet list for %%field%%"
FAQs = "FAQs"
fav_delete = "Delete Selected Favorites"
fav_delete_deleting = "Your favorite(s) are being deleted."
@@ -897,6 +898,7 @@ search_match = "Match"
search_NOT = "NO Terms"
search_OR = "ANY Terms"
search_save_success = "Search saved successfully."
+search_terms = "Search terms"
search_unsave_success = "Saved search removed successfully."
seconds_abbrev = "s"
see all = "see all"
diff --git a/themes/bootstrap3/templates/RecordTab/similaritemscarousel.phtml b/themes/bootstrap3/templates/RecordTab/similaritemscarousel.phtml
index 0c6e3d56277..17c2652ffdd 100644
--- a/themes/bootstrap3/templates/RecordTab/similaritemscarousel.phtml
+++ b/themes/bootstrap3/templates/RecordTab/similaritemscarousel.phtml
@@ -41,10 +41,10 @@
</div>
<!-- Controls -->
- <a class="left carousel-control" href="#similar-items-carousel" role="button" data-slide="prev">
+ <a class="left carousel-control" href="#similar-items-carousel" role="button" data-slide="prev" aria-label="<?=$this->transEsc('Prev') ?>">
<span class="fa fa-chevron-left glyphicon-chevron-left" title="<?=$this->transEsc('Prev') ?>"></span>
</a>
- <a class="right carousel-control" href="#similar-items-carousel" role="button" data-slide="next">
+ <a class="right carousel-control" href="#similar-items-carousel" role="button" data-slide="next" aria-label="<?=$this->transEsc('Next') ?>">
<span class="fa fa-chevron-right glyphicon-chevron-right" title="<?=$this->transEsc('Next') ?>"></span>
</a>
</div>
diff --git a/themes/bootstrap3/templates/eds/advanced.phtml b/themes/bootstrap3/templates/eds/advanced.phtml
index 0c87a8b62e9..beb90d5f79f 100644
--- a/themes/bootstrap3/templates/eds/advanced.phtml
+++ b/themes/bootstrap3/templates/eds/advanced.phtml
@@ -22,9 +22,9 @@
<option value="OR"><?=$this->transEsc("OR")?></option>
<option value="NOT"><?=$this->transEsc("NOT")?></option>
</select>
- <input id="search_lookfor0_<?=$search ?>" name="lookfor0[]" class="adv-term-input form-control" type="text" value=""/>
+ <input id="search_lookfor0_<?=$search ?>" name="lookfor0[]" class="adv-term-input form-control" type="text" value="" aria-label="<?=$this->transEsc("search_terms")?>"/>
<span class="help-block hidden-xs"><?=$this->transEsc("in")?></span>
- <select id="search_type0_<?=$search ?>" name="type0[]" class="adv-term-type form-control">
+ <select id="search_type0_<?=$search ?>" name="type0[]" class="adv-term-type form-control" aria-label="<?=$this->transEsc("Search type")?>">
<?php foreach ($this->options->getAdvancedHandlers() as $searchVal => $searchDesc): ?>
<option value="<?=$this->escapeHtml($searchVal)?>"><?=$this->transEsc($searchDesc)?></option>
<?php endforeach; ?>
diff --git a/themes/bootstrap3/templates/primo/advanced.phtml b/themes/bootstrap3/templates/primo/advanced.phtml
index 4aa47b36d19..21db6623032 100644
--- a/themes/bootstrap3/templates/primo/advanced.phtml
+++ b/themes/bootstrap3/templates/primo/advanced.phtml
@@ -64,7 +64,7 @@
<option value="<?=$this->escapeHtmlAttr($searchVal)?>"<?=($currRow && $currRow->getOperator() == $searchVal)?' selected="selected"':''?>><?=$this->transEsc($searchDesc)?></option>
<?php endforeach; ?>
</select>
- <input id="search_lookfor<?=$i?>_<?=$j?>" type="text" value="<?=$currRow?$this->escapeHtmlAttr($currRow->getString()):''?>" size="30" name="lookfor<?=$i?>[]" class="form-control primo-adv-input"/>
+ <input id="search_lookfor<?=$i?>_<?=$j?>" type="text" value="<?=$currRow?$this->escapeHtmlAttr($currRow->getString()):''?>" size="30" name="lookfor<?=$i?>[]" class="form-control primo-adv-input" aria-label="<?=$this->transEsc("search_terms")?>"/>
</div>
<?php endfor; ?>
</div>
diff --git a/themes/bootstrap3/templates/search/advanced/layout.phtml b/themes/bootstrap3/templates/search/advanced/layout.phtml
index 87476abe8cb..06cd9f477ba 100644
--- a/themes/bootstrap3/templates/search/advanced/layout.phtml
+++ b/themes/bootstrap3/templates/search/advanced/layout.phtml
@@ -105,8 +105,8 @@
<div id="new_search_template">
<?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; ?>>
- <select class="adv-term-type form-control" name="type<?=$group ?>[]">
+ <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")?>">
<?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; ?>
diff --git a/themes/bootstrap3/templates/search/facet-list.phtml b/themes/bootstrap3/templates/search/facet-list.phtml
index b3bae437d46..181bca6ec2d 100644
--- a/themes/bootstrap3/templates/search/facet-list.phtml
+++ b/themes/bootstrap3/templates/search/facet-list.phtml
@@ -11,6 +11,7 @@
$searchAction .= urlencode($this->baseUriExtra);
$urlBase .= '&baseUriExtra=' . urlencode($this->baseUriExtra);
}
+ $this->headTitle($this->translate('facet_list_for', ['%%field%%' => $this->facetLabel]));
?>
<h2><?=$this->transEsc($this->facetLabel) ?></h2>
<?php if (count($this->sortOptions) > 1): ?>
diff --git a/themes/bootstrap3/templates/search/searchbox.phtml b/themes/bootstrap3/templates/search/searchbox.phtml
index 4d4d4ca1fed..78d57f6b44d 100644
--- a/themes/bootstrap3/templates/search/searchbox.phtml
+++ b/themes/bootstrap3/templates/search/searchbox.phtml
@@ -44,9 +44,9 @@
<form id="searchForm" class="searchForm navbar-form navbar-left flip" method="get" action="<?=$this->url($basicSearch)?>" name="searchForm" autocomplete="off">
<?= $this->context($this)->renderInContext('search/searchTabs', ['searchTabs' => $tabConfig['tabs']]); ?>
<?php $placeholder = $this->searchbox()->getPlaceholderText($tabConfig['selected']['id'] ?? null); ?>
- <input id="searchForm_lookfor" class="searchForm_lookfor form-control search-query<?php if($this->searchbox()->autocompleteEnabled($this->searchClassId)):?> autocomplete searcher:<?=$this->escapeHtmlAttr($this->searchClassId) ?><?php endif ?>" type="text" name="lookfor" value="<?=$this->escapeHtmlAttr($this->lookfor)?>"<?php if ($placeholder): ?> placeholder="<?=$this->transEsc($placeholder) ?>"<?php endif ?> />
+ <input id="searchForm_lookfor" class="searchForm_lookfor form-control search-query<?php if($this->searchbox()->autocompleteEnabled($this->searchClassId)):?> autocomplete searcher:<?=$this->escapeHtmlAttr($this->searchClassId) ?><?php endif ?>" type="text" name="lookfor" value="<?=$this->escapeHtmlAttr($this->lookfor)?>"<?php if ($placeholder): ?> placeholder="<?=$this->transEsc($placeholder) ?>"<?php endif ?> aria-label="<?=$this->transEsc("search_terms")?>" />
<?php if ($handlerCount > 1): ?>
- <select id="searchForm_type" class="searchForm_type form-control" name="type" data-native-menu="false">
+ <select id="searchForm_type" class="searchForm_type form-control" name="type" data-native-menu="false" aria-label="<?=$this->transEsc("Search type")?>">
<?php foreach ($handlers as $handler): ?>
<option value="<?=$this->escapeHtmlAttr($handler['value'])?>"<?=$handler['selected'] ? ' selected="selected"' : ''?>><?=$handler['indent'] ? '-- ' : ''?><?=$this->transEsc($handler['label'])?></option>
<?php endforeach; ?>
--
GitLab