mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
Improved accessibility of sidebar navigation
This commit is contained in:
parent
5b35b7df57
commit
f8f44f5837
File diff suppressed because one or more lines are too long
8
material/assets/javascripts/bundle.029f727b.min.js.map
Normal file
8
material/assets/javascripts/bundle.029f727b.min.js.map
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -240,7 +240,7 @@
|
||||
</script>
|
||||
{% endblock %}
|
||||
{% block scripts %}
|
||||
<script src="{{ 'assets/javascripts/bundle.2a903f2a.min.js' | url }}"></script>
|
||||
<script src="{{ 'assets/javascripts/bundle.029f727b.min.js' | url }}"></script>
|
||||
{% for path in config.extra_javascript %}
|
||||
<script src="{{ path | url }}"></script>
|
||||
{% endfor %}
|
||||
|
@ -13,12 +13,13 @@
|
||||
{% set class = class ~ " md-nav__item--section" %}
|
||||
{% endif %}
|
||||
<li class="{{ class }} md-nav__item--nested">
|
||||
{% set expanded = "navigation.expand" in features %}
|
||||
{% set active = nav_item.active or expanded %}
|
||||
{% set checked = "checked" if nav_item.active %}
|
||||
{% if "navigation.expand" in features and not checked %}
|
||||
<input class="md-nav__toggle md-toggle md-toggle--indeterminate" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}" checked>
|
||||
{% else %}
|
||||
<input class="md-nav__toggle md-toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}" {{ checked }}>
|
||||
{% if expanded and not checked %}
|
||||
{% set indeterminate = "md-toggle--indeterminate" %}
|
||||
{% endif %}
|
||||
<input class="md-nav__toggle md-toggle {{ indeterminate }}" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}" {{ checked }}>
|
||||
{% set indexes = [] %}
|
||||
{% if "navigation.indexes" in features %}
|
||||
{% for nav_item in nav_item.children %}
|
||||
@ -28,7 +29,7 @@
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% if not indexes %}
|
||||
<label class="md-nav__link" for="{{ path }}">
|
||||
<label class="md-nav__link" for="{{ path }}" tabindex="0" aria-expanded="{{ nav_item.active | tojson }}">
|
||||
{{ nav_item.title }}
|
||||
<span class="md-nav__icon md-icon"></span>
|
||||
</label>
|
||||
|
@ -43,6 +43,8 @@ import {
|
||||
import { configuration, feature } from "./_"
|
||||
import {
|
||||
at,
|
||||
getActiveElement,
|
||||
getElement,
|
||||
getOptionalElement,
|
||||
requestJSON,
|
||||
setLocation,
|
||||
@ -186,6 +188,18 @@ keyboard$
|
||||
if (typeof next !== "undefined")
|
||||
setLocation(next)
|
||||
break
|
||||
|
||||
/* Expand navigation, see https://bit.ly/3ZjG5io */
|
||||
case "Enter":
|
||||
const active = getActiveElement()
|
||||
if (active instanceof HTMLLabelElement) {
|
||||
const id = `[id="${active.htmlFor}"]`
|
||||
const input = getElement<HTMLInputElement>(id)
|
||||
active.setAttribute(
|
||||
"aria-expanded",
|
||||
`${input.checked = !input.checked}`
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
@ -41,26 +41,23 @@
|
||||
|
||||
<!-- Render item with nested items -->
|
||||
<li class="{{ class }} md-nav__item--nested">
|
||||
{% set expanded = "navigation.expand" in features %}
|
||||
{% set active = nav_item.active or expanded %}
|
||||
|
||||
<!-- Determine checked and indeterminate state -->
|
||||
{% set checked = "checked" if nav_item.active %}
|
||||
{% if expanded and not checked %}
|
||||
{% set indeterminate = "md-toggle--indeterminate" %}
|
||||
{% endif %}
|
||||
|
||||
<!-- Active checkbox expands items contained within nested section -->
|
||||
{% set checked = "checked" if nav_item.active %}
|
||||
{% if "navigation.expand" in features and not checked %}
|
||||
<input
|
||||
class="md-nav__toggle md-toggle md-toggle--indeterminate"
|
||||
data-md-toggle="{{ path }}"
|
||||
type="checkbox"
|
||||
id="{{ path }}"
|
||||
checked
|
||||
/>
|
||||
{% else %}
|
||||
<input
|
||||
class="md-nav__toggle md-toggle"
|
||||
data-md-toggle="{{ path }}"
|
||||
type="checkbox"
|
||||
id="{{ path }}"
|
||||
{{ checked }}
|
||||
/>
|
||||
{% endif %}
|
||||
<input
|
||||
class="md-nav__toggle md-toggle {{ indeterminate }}"
|
||||
data-md-toggle="{{ path }}"
|
||||
type="checkbox"
|
||||
id="{{ path }}"
|
||||
{{ checked }}
|
||||
/>
|
||||
|
||||
<!-- Determine all nested items that are index pages -->
|
||||
{% set indexes = [] %}
|
||||
@ -74,7 +71,12 @@
|
||||
|
||||
<!-- Render toggle to expand nested items -->
|
||||
{% if not indexes %}
|
||||
<label class="md-nav__link" for="{{ path }}">
|
||||
<label
|
||||
class="md-nav__link"
|
||||
for="{{ path }}"
|
||||
tabindex="0"
|
||||
aria-expanded="{{ nav_item.active | tojson }}"
|
||||
>
|
||||
{{ nav_item.title }}
|
||||
<span class="md-nav__icon md-icon"></span>
|
||||
</label>
|
||||
|
Loading…
Reference in New Issue
Block a user