Added aria labels to footer links

squidfunk · Jun 6, 2021 · 0dd4831 · 0dd4831
1 parent a201390
commit 0dd4831
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/material/partials/footer.html b/material/partials/footer.html
@@ -6,26 +6,28 @@
   {% 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>
           </div>
         </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>

diff --git a/src/partials/footer.html b/src/partials/footer.html
@@ -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>

diff --git a/src/partials/source-date.html b/src/partials/source-date.html
@@ -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" %}