Add ARIA roles and labels to search, header, logo, mobile menu button, and main content (#1259)

This PR fixes several Axe errors I found while working on https://viewcomponent.org/. I did not see any visual regressions on my deploy, but I'd encourage testing with other sites.

---------

Co-authored-by: Lindsey Wild <35239154+lindseywild@users.noreply.github.com>
This commit is contained in:
Joel Hawksley
2023-05-31 14:35:56 -06:00
committed by GitHub
parent 3618253d15
commit cffe2f1b29
5 changed files with 23 additions and 16 deletions

View File

@@ -1,6 +1,6 @@
{% capture search_placeholder %}{% include search_placeholder_custom.html %}{% endcapture %}
<div class="search">
<div class="search" role="search">
<div class="search-input-wrap">
<input type="text" id="search-input" class="search-input" tabindex="0" placeholder="{{ search_placeholder | strip_html | strip }}" aria-label="{{ search_placeholder | strip_html| strip }}" autocomplete="off">
<label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label>