Improve accessibility of navigation menu button

Add `type` and label text.

Fixes #1099
This commit is contained in:
Michael Rose 2017-10-04 11:10:41 -04:00
parent 3282387b42
commit aeebfaa87c
4 changed files with 29 additions and 21 deletions

View file

@ -7,6 +7,7 @@
- Add note about Staticman GitHub compatibility. [#1273](https://github.com/mmistakes/minimal-mistakes/issues/1273)
- Add missing Brazilian Portuguese translations to `ui-text.yml`. [#1278](https://github.com/mmistakes/minimal-mistakes/pull/1278)
- Update font stack documentation. [#1292](https://github.com/mmistakes/minimal-mistakes/pull/1292)
- Improve accessibility of navigation menu button. [#1099](https://github.com/mmistakes/minimal-mistakes/issues/1099)
### Bug Fixes

View file

@ -13,7 +13,10 @@
<li class="masthead__menu-item"><a href="{{ domain }}{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
<button><div class="navicon"></div></button>
<button type="button">
<span class="visually-hidden">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle Menu" }}</span>
<div class="navicon"></div>
</button>
<ul class="hidden-links hidden"></ul>
</nav>
</div>

View file

@ -4,7 +4,7 @@ permalink: /docs/history/
excerpt: "Change log of enhancements and bug fixes made to the theme."
sidebar:
nav: docs
last_modified_at: 2017-10-04T08:07:18-04:00
last_modified_at: 2017-10-04T11:06:15-04:00
---
## Unreleased
@ -16,6 +16,7 @@ last_modified_at: 2017-10-04T08:07:18-04:00
- Add note about Staticman GitHub compatibility. [#1273](https://github.com/mmistakes/minimal-mistakes/issues/1273)
- Add missing Brazilian Portuguese translations to `ui-text.yml`. [#1278](https://github.com/mmistakes/minimal-mistakes/pull/1278)
- Update font stack documentation. [#1292](https://github.com/mmistakes/minimal-mistakes/pull/1292)
- Improve accessibility of navigation menu button. [#1099](https://github.com/mmistakes/minimal-mistakes/issues/1099)
### Bug Fixes

View file

@ -1,21 +1,24 @@
<div class="masthead">
<div class="masthead__inner-wrap">
<div class="masthead__menu">
<nav id="site-nav" class="greedy-nav">
<a class="site-title" href="{{ '/' | absolute_url }}">{{ site.title }}</a>
<ul class="visible-links">
{% for link in site.data.navigation.main %}
{% if link.url contains 'http' %}
{% assign domain = '' %}
{% else %}
{% assign domain = site.url | append: site.baseurl %}
{% endif %}
<li class="masthead__menu-item"><a href="{{ domain }}{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
<button><div class="navicon"></div></button>
<ul class="hidden-links hidden"></ul>
</nav>
<div class="masthead__inner-wrap">
<div class="masthead__menu">
<nav id="site-nav" class="greedy-nav">
<a class="site-title" href="{{ '/' | absolute_url }}">{{ site.title }}</a>
<ul class="visible-links">
{% for link in site.data.navigation.main %}
{% if link.url contains 'http' %}
{% assign domain = '' %}
{% else %}
{% assign domain = site.url | append: site.baseurl %}
{% endif %}
<li class="masthead__menu-item"><a href="{{ domain }}{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
<button type="button">
<span class="visually-hidden">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle Menu" }}</span>
<div class="navicon"></div>
</button>
<ul class="hidden-links hidden"></ul>
</nav>
</div>
</div>
</div>
</div>
</div>