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

@ -13,9 +13,12 @@
<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>
</div> </div>
</div> </div>