Cool_Tools/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-09-24 19:38:27 +02:00
Code Issues Releases Wiki Activity

Fixed odd behavior in navigation tab behavior

Browse Source
This commit is contained in:
squidfunk 2018-01-11 21:47:16 +01:00 committed by Martin Donath
parent 7a0c464ed6
commit 3217754daa
6 changed files with 33 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
material/assets/javascripts/application.24b6416b.js
View File

File diff suppressed because one or more lines are too long

1
material/assets/javascripts/application.dda16324.js Normal file
View File

File diff suppressed because one or more lines are too long

2
material/base.html
View File

@ -167,7 +167,7 @@
{% endblock %}
</div>
{% block scripts %}
<script src="{{ base_url }}/assets/javascripts/application.24b6416b.js"></script>
<script src="{{ base_url }}/assets/javascripts/application.dda16324.js"></script>
{% if lang.t("search.language") != "en" %}
{% set languages = lang.t("search.language").split(",") %}
{% if languages | length and languages[0] != "" %}

6
material/partials/nav-item.html
View File

@ -9,11 +9,11 @@
{% else %}
<input class="md-toggle md-nav__toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}">
{% endif %}
<label class="md-nav__link" for="{{ path }}" tabindex="0">
<label class="md-nav__link" for="{{ path }}">
{{ nav_item.title }}
</label>
<nav class="md-nav" data-md-component="collapsible" data-md-level="{{ level }}">
<label class="md-nav__title" for="{{ path }}" tabindex="0">
<label class="md-nav__title" for="{{ path }}">
{{ nav_item.title }}
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -34,7 +34,7 @@
{% set toc_ = (toc_ | first).children %}
{% endif %}
{% if toc_ | first is defined %}
<label class="md-nav__link md-nav__link--active" for="toc" tabindex="0">
<label class="md-nav__link md-nav__link--active" for="toc">
{{ nav_item.title }}
</label>
{% endif %}

25
src/assets/javascripts/application.js
View File

@ -298,6 +298,31 @@ function initialize(config) { // eslint-disable-line func-style
})
})).listen()
/* Listener: handle tabbing context for better accessibility */
new Material.Event.Listener(document.body, "keydown", ev => {
if (ev.keyCode === 9) {
const labels = document.querySelectorAll(
"[data-md-component=navigation] .md-nav__link[for]:not([tabindex])")
Array.prototype.forEach.call(labels, label => {
label.tabIndex = 0
})
}
}).listen()
/* Listener: reset tabbing behavior */
new Material.Event.Listener(document.body, "click", () => {
const labels = document.querySelectorAll(
"[data-md-component=navigation] .md-nav__link[tabindex]")
Array.prototype.forEach.call(labels, label => {
label.removeAttribute("tabIndex")
})
}).listen()
document.body.addEventListener("click", () => {
if (document.body.dataset.mdState === "tabbing")
document.body.dataset.mdState = ""
})
/* Listener: close drawer when anchor links are clicked */
new Material.Event.MatchMedia("(max-width: 959px)",
new Material.Event.Listener("[data-md-component=navigation] [href^='#']",

6
src/partials/nav-item.html
View File

@ -40,12 +40,12 @@
{% endif %}
<!-- Expand active pages -->
<label class="md-nav__link" for="{{ path }}" tabindex="0">
<label class="md-nav__link" for="{{ path }}">
{{ nav_item.title }}
</label>
<nav class="md-nav" data-md-component="collapsible"
data-md-level="{{ level }}">
<label class="md-nav__title" for="{{ path }}" tabindex="0">
<label class="md-nav__title" for="{{ path }}">
{{ nav_item.title }}
</label>
<ul class="md-nav__list" data-md-scrollfix>
@ -77,7 +77,7 @@
<!-- Render table of contents, if not empty -->
{% if toc_ | first is defined %}
<label class="md-nav__link md-nav__link--active" for="toc" tabindex="0">
<label class="md-nav__link md-nav__link--active" for="toc">
{{ nav_item.title }}
</label>
{% endif %}