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 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) - 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) - 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 ### Bug Fixes

View file

@ -13,7 +13,10 @@
<li class="masthead__menu-item"><a href="{{ domain }}{{ link.url }}">{{ link.title }}</a></li> <li class="masthead__menu-item"><a href="{{ domain }}{{ link.url }}">{{ link.title }}</a></li>
{% endfor %} {% endfor %}
</ul> </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> <ul class="hidden-links hidden"></ul>
</nav> </nav>
</div> </div>

View file

@ -4,7 +4,7 @@ permalink: /docs/history/
excerpt: "Change log of enhancements and bug fixes made to the theme." excerpt: "Change log of enhancements and bug fixes made to the theme."
sidebar: sidebar:
nav: docs nav: docs
last_modified_at: 2017-10-04T08:07:18-04:00 last_modified_at: 2017-10-04T11:06:15-04:00
--- ---
## Unreleased ## 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 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) - 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) - 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 ### Bug Fixes

View file

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