jepler/circuitpython-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[a11y] Small updates to header: skip links, navigation color contrast & aria-labels

Browse source
This commit is contained in:
iain nash 2020-10-21 21:22:08 -04:00
parent a2ad211155
commit 7e91e10e82
4 changed files with 29 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
_includes/header.html
View file

@ -1,23 +1,24 @@
<header id="site-header">
{% assign current = page.url | downcase | split: '/' %}
<div class="top-navigation">
<nav class="top-navigation">
<div>
<div class="navigation">
<a class="skip-link" href="#main-content">Skip to main content</a>
<a {% if current[1] == 'contributing' %}class='active'{% endif %} href="{{ "/contributing" | relative_url }}">Contributing</a>
<a href="https://blog.adafruit.com/category/circuitpython">News</a>
<a {% if current[1] == 'awesome' %}class='active'{% endif %} href="{{ "/awesome" | relative_url }}">Awesome</a>
<a href="https://www.adafruitdaily.com/category/circuitpython">Newsletter</a>
<a href="https://forums.adafruit.com/viewforum.php?f=60">Help</a>
<span>
<a href="https://adafru.it/discord"><i class="fab fa-discord"></i></a>
<a href="{{ '/feed.rss' | relative_url }}" type="application/rss+xml"><i class="fas fa-rss-square"></i></a>
<a href="https://adafru.it/discord" aria-label="Discord"><i class="fab fa-discord"></i></a>
<a href="{{ '/feed.rss' | relative_url }}" type="application/rss+xml" aria-label="RSS Feed"><i class="fas fa-rss-square"></i></a>
</span>
</div>
</div>
</div>
</nav>
<div class="wrapper">
<div class="content">
<div class="site-brand">
<nav class="site-brand">
<div class="site-logo">
<a href="{{ "/" | relative_url }}">
<img src="{{ "/assets/images/logo.png" | relative_url }}"
@ -29,14 +30,14 @@
</a>
</div>
<div class="site-navigation">
<a {% if current[1] == 'downloads' %}class='active'{% endif %} href="{{ "/downloads" | relative_url }}">Downloads</a>
<a {% if current[1] == 'libraries' %}class='active'{% endif %} href="{{ "/libraries" | relative_url }}">Libraries</a>
<a {% if current[1] == 'blinka' %}class='active'{% endif %} href="{{ "/blinka" | relative_url }}">Blinka</a>
<a {% if current[1] == 'downloads' %}class="active" aria-current="page"{% endif %} href="{{ "/downloads" | relative_url }}">Downloads</a>
<a {% if current[1] == 'libraries' %}class="active" aria-current="page"{% endif %} href="{{ "/libraries" | relative_url }}">Libraries</a>
<a {% if current[1] == 'blinka' %}class="active" aria-current="page"{% endif %} href="{{ "/blinka" | relative_url }}">Blinka</a>
</div>
<div class="get-started">
<a href="https://learn.adafruit.com/welcome-to-circuitpython">Get Started</a>
</div>
</div>
</nav>
</div>
</div>
<div class="bottom-bar"></div>

4
_includes/header_mobile.html
View file

@ -14,13 +14,13 @@
<div class="menu-toggle">
<a href="#" id="mobile-menu-button">
<span class="sr-only">Open Mobile Menu</span>
<i class="fa fa-bars" aria-hidden='true'></i>
<i class="fa fa-bars" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="clear"></div>
<nav id="mobile-menu-contents" role="navigation" class="hidden"
aria-expanded='false' aria-label='Mobile Menu'>
aria-expanded="false" aria-label="Mobile Menu">
<ul>
<li><a {% if current[1] == 'downloads' %}class='active'{% endif %}
href="{{ "/downloads" | relative_url }}">Downloads</a></li>

2
_layouts/default.html
View file

@ -6,7 +6,7 @@
<body>
{% include header.html %}
{% include header_mobile.html %}
<div class="wrapper">
<div id="main-content" class="wrapper">
{{ content }}
</div>

19
assets/sass/layout/_header.scss
View file

@ -34,7 +34,7 @@
.top-navigation {
background-color: #151515;
padding-top: 10px;
.navigation {
display: flex;
align-items: flex-end;
@ -42,12 +42,25 @@
a {
font-size: 16px;
color: #999999;
color: #aaa;
&:hover {
color: #fff;
}
}
a.skip-link {
margin-left: 0;
position: absolute;
left: 10px;
top: 10px;
transform: translateY(-200%);
transition: transform 0.6s;
&:focus {
transform: translateY(0%);
}
}
&> a {
margin-left: 40px;
}
@ -94,7 +107,7 @@
a {
margin-left: 40px;
color: #999999;
color: #aaa;
&:hover {
color: #fff;