mirror of
https://github.com/snachodog/just-the-docs.git
synced 2025-04-22 02:52:23 -06:00
0ca69334b0
This follows up from #1259 and closes #1261. Basically, this PR accomplishes the two items discussed in the issue: 1. for all anchors that are *actually* buttons (i.e., have `href="#"`), I've replaced them with a semantic `<button>` - under the hood, I've made a `.btn-reset` class pulling out the reset from #1259, so there's no visual change 2. for anchors that are ["toggle buttons"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#toggle_buttons) (the mobile menu nav, sidebar children/grandchildren toggles), I've added an `aria-pressed` property that is updated as the button is clicked I've also slightly modified some of the `aria-label`s to make them more consistent. Observe that we *shouldn't* update these as the button is clicked; screen readers use the `aria-pressed` property to add an annotation to each button. To test this, - the sidebar children and grandchildren can be done on the deploy preview: - open an arbitrary page; observe that the sidebar children/grandchildren dropdown ticks now have a proper `aria-label` and `aria-pressed`, as well as otherwise work as intended - toggle one of the buttons; observe the `aria-pressed` role changing as this is done - open a grandchild page; observe that the `aria-pressed` has a correct default wrt whether or not the page is active - the mobile menu can be done on the deploy preview; on a smaller viewport, observe the correct `aria-pressed` - two features require local changes to test: - the `site.search.button` needs to be enabled in the `_config.yml`. To test this, locally clone the repo, change the flag, and observe that the button still works as intended + has no visual regressions. - the collections feature is a bit more complicated. To test this, locally clone the repo, add an arbitrary collection and changes to `_config.yml`, and observe the same behaviour for the sidebar children/grandchildren above
72 lines
3.3 KiB
HTML
72 lines
3.3 KiB
HTML
<div class="side-bar">
|
|
<div class="site-header" role="banner">
|
|
<a href="{{ '/' | relative_url }}" class="site-title lh-tight">{% include title.html %}</a>
|
|
<button id="menu-button" class="site-button btn-reset" aria-label="Toggle menu" aria-pressed="false">
|
|
<svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-menu"></use></svg>
|
|
</a>
|
|
</div>
|
|
<nav aria-label="Main" id="site-nav" class="site-nav">
|
|
{% assign pages_top_size = site.html_pages
|
|
| where_exp:"item", "item.title != nil"
|
|
| where_exp:"item", "item.parent == nil"
|
|
| where_exp:"item", "item.nav_exclude != true"
|
|
| size %}
|
|
{% if pages_top_size > 0 %}
|
|
{% include nav.html pages=site.html_pages key=nil %}
|
|
{% endif %}
|
|
{%- if site.nav_external_links -%}
|
|
<ul class="nav-list">
|
|
{%- for node in site.nav_external_links -%}
|
|
<li class="nav-list-item external">
|
|
<a href="{{ node.url | absolute_url }}" class="nav-list-link external">
|
|
{{ node.title }}
|
|
{% unless node.hide_icon %}<svg viewBox="0 0 24 24" aria-labelledby="svg-external-link-title"><use xlink:href="#svg-external-link"></use></svg>{% endunless %}
|
|
</a>
|
|
</li>
|
|
{%- endfor -%}
|
|
</ul>
|
|
{%- endif -%}
|
|
{% if site.just_the_docs.collections %}
|
|
{% assign collections_size = site.just_the_docs.collections | size %}
|
|
{% for collection_entry in site.just_the_docs.collections %}
|
|
{% assign collection_key = collection_entry[0] %}
|
|
{% assign collection_value = collection_entry[1] %}
|
|
{% assign collection = site[collection_key] %}
|
|
{% if collection_value.nav_exclude != true %}
|
|
{% if collections_size > 1 or pages_top_size > 0 %}
|
|
{% if collection_value.nav_fold == true %}
|
|
<ul class="nav-list nav-category-list">
|
|
<li class="nav-list-item{% if page.collection == collection_key %} active{% endif %}">
|
|
{%- if collection.size > 0 -%}
|
|
<button class="nav-list-expander btn-reset" aria-label="Toggle collection {{ collection_value.name }}" aria-pressed="{% if page.collection == collection_key %}true{% else %}false{% endif %}">
|
|
<svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg>
|
|
</button>
|
|
{%- endif -%}
|
|
<div class="nav-category">{{ collection_value.name }}</div>
|
|
{% include nav.html pages=collection key=collection_key %}
|
|
</li>
|
|
</ul>
|
|
{% else %}
|
|
<div class="nav-category">{{ collection_value.name }}</div>
|
|
{% include nav.html pages=collection key=collection_key %}
|
|
{% endif %}
|
|
{% else %}
|
|
{% include nav.html pages=collection key=collection_key %}
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
</nav>
|
|
|
|
{% capture nav_footer_custom %}
|
|
{%- include nav_footer_custom.html -%}
|
|
{% endcapture %}
|
|
{% if nav_footer_custom != "" %}
|
|
{{ nav_footer_custom }}
|
|
{% else %}
|
|
<footer class="site-footer">
|
|
This site uses <a href="https://github.com/just-the-docs/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.
|
|
</footer>
|
|
{% endif %}
|
|
</div>
|