just-the-docs/_includes/components/search_header.html
Joel Hawksley cffe2f1b29
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>
2023-05-31 13:35:56 -07:00

10 lines
596 B
HTML

{% capture search_placeholder %}{% include search_placeholder_custom.html %}{% endcapture %}
<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>
</div>
<div id="search-results" class="search-results"></div>
</div>