steve/just-the-docs
1
0
Fork 0
mirror of https://github.com/snachodog/just-the-docs.git synced 2025-04-04 03:01:23 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 23 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/components/search_header.html
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>

6
_includes/components/sidebar.html
View File

@ -1,8 +1,8 @@
<div class="side-bar">
<div class="site-header">
<div class="site-header" role="banner">
<a href="{{ '/' | relative_url }}" class="site-title lh-tight">{% include title.html %}</a>
<a href="#" id="menu-button" class="site-button">
<svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-menu"></use></svg>
<button id="menu-button" class="site-button" aria-label="Open menu">
<svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-menu"></use></svg>
</a>
</div>
<nav aria-label="Main" id="site-nav" class="site-nav">

2
_includes/title.html
View File

@ -1,5 +1,5 @@
{% if site.logo %}
<div class="site-logo"></div>
<div class="site-logo" role="img" aria-label="{{ site.title }}"></div>
{% else %}
{{ site.title }}
{% endif %}

22
_layouts/default.html
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 %}

7
_sass/layout.scss
View File

@ -145,6 +145,13 @@
height: 100%;
padding: $gutter-spacing-sm;
align-items: center;
background-color: transparent;
border: none;
margin: 0;
text-align: inherit;
font: inherit;
border-radius: 0;
appearance: none;
}
@include mq(md) {