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

@@ -14,19 +14,19 @@ layout: table_wrappers
{% include components/header.html %}
<div id="main-content-wrap" class="main-content-wrap">
{% include components/breadcrumbs.html %}
<div id="main-content" class="main-content" role="main">
{% if site.heading_anchors != false %}
{% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#svg-link\"></use></svg>" anchorClass="anchor-heading" anchorAttrs="aria-labelledby=\"%html_id%\"" %}
{% else %}
{{ content }}
{% endif %}
{% if page.has_children == true and page.has_toc != false %}
{% include components/children_nav.html %}
{% endif %}
<div id="main-content" class="main-content">
<main>
{% if site.heading_anchors != false %}
{% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#svg-link\"></use></svg>" anchorClass="anchor-heading" anchorAttrs="aria-labelledby=\"%html_id%\"" %}
{% else %}
{{ content }}
{% endif %}
{% if page.has_children == true and page.has_toc != false %}
{% include components/children_nav.html %}
{% endif %}
</main>
{% include components/footer.html %}
</div>
</div>
{% if site.search_enabled != false %}