1
0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-11-24 07:30:12 +01:00

Added aria labels to footer links

This commit is contained in:
squidfunk 2021-06-06 14:29:01 +02:00
parent a20139019f
commit 0dd483121a
3 changed files with 13 additions and 7 deletions

View File

@ -6,14 +6,15 @@
{% if page.previous_page or page.next_page %}
<nav class="md-footer__inner md-grid" aria-label="{{ lang.t('footer.title') }}">
{% if page.previous_page %}
<a href="{{ page.previous_page.url | url }}" class="md-footer__link md-footer__link--prev" rel="prev">
{% set direction = lang.t("footer.previous") %}
<a href="{{ page.previous_page.url | url }}" class="md-footer__link md-footer__link--prev" aria-label="{{ direction }}: {{ page.previous_page.title }}" rel="prev">
<div class="md-footer__button md-icon">
{% include ".icons/material/arrow-left.svg" %}
</div>
<div class="md-footer__title">
<div class="md-ellipsis">
<span class="md-footer__direction">
{{ lang.t("footer.previous") }}
{{ direction }}
</span>
{{ page.previous_page.title }}
</div>
@ -21,11 +22,12 @@
</a>
{% endif %}
{% if page.next_page %}
<a href="{{ page.next_page.url | url }}" class="md-footer__link md-footer__link--next" rel="next">
{% set direction = lang.t("footer.next") %}
<a href="{{ page.next_page.url | url }}" class="md-footer__link md-footer__link--next" aria-label="{{ direction }}: {{ page.next_page.title }}" rel="next">
<div class="md-footer__title">
<div class="md-ellipsis">
<span class="md-footer__direction">
{{ lang.t("footer.next") }}
{{ direction }}
</span>
{{ page.next_page.title }}
</div>

View File

@ -34,9 +34,11 @@
<!-- Link to previous page -->
{% if page.previous_page %}
{% set direction = lang.t("footer.previous") %}
<a
href="{{ page.previous_page.url | url }}"
class="md-footer__link md-footer__link--prev"
aria-label="{{ direction }}: {{ page.previous_page.title }}"
rel="prev"
>
<div class="md-footer__button md-icon">
@ -45,7 +47,7 @@
<div class="md-footer__title">
<div class="md-ellipsis">
<span class="md-footer__direction">
{{ lang.t("footer.previous") }}
{{ direction }}
</span>
{{ page.previous_page.title }}
</div>
@ -55,15 +57,17 @@
<!-- Link to next page -->
{% if page.next_page %}
{% set direction = lang.t("footer.next") %}
<a
href="{{ page.next_page.url | url }}"
class="md-footer__link md-footer__link--next"
aria-label="{{ direction }}: {{ page.next_page.title }}"
rel="next"
>
<div class="md-footer__title">
<div class="md-ellipsis">
<span class="md-footer__direction">
{{ lang.t("footer.next") }}
{{ direction }}
</span>
{{ page.next_page.title }}
</div>

View File

@ -20,5 +20,5 @@
IN THE SOFTWARE.
-->
<!-- Kept for backward compatibility. This file wil be removed in v8 -->
<!-- Kept for backward compatibility. This file will be removed in v8 -->
{% include "partials/source-file.html" %}