From 8d4c1deb153d3a08a553dd76164ae2f5264ea097 Mon Sep 17 00:00:00 2001
From: Cotes Chung <11371340+cotes2020@users.noreply.github.com>
Date: Tue, 27 Oct 2020 16:20:22 +0800
Subject: [PATCH] Improve web accessibility

- Add associated label to form elements.
- Add discernible name to links.
---
 _data/contact.yml             |  3 ++
 _includes/post-paginator.html | 63 +++++++++++++++++------------------
 _includes/post-sharing.html   |  2 +-
 _includes/sidebar.html        |  2 +-
 _includes/topbar.html         |  5 +--
 _layouts/default.html         |  2 +-
 tabs/categories.md            |  5 +--
 7 files changed, 42 insertions(+), 40 deletions(-)

diff --git a/_data/contact.yml b/_data/contact.yml
index c6f6460..88f9a6b 100644
--- a/_data/contact.yml
+++ b/_data/contact.yml
@@ -21,11 +21,14 @@
 
 # Uncomment and complete the url below to enable more contact options
 # -
+#   type: mastodon
 #   icon: 'fab fa-mastodon'   # icons powered by <https://fontawesome.com/>
 #   url:  ''                  # Fill with your mastodon account page
 # -
+#   type: linkedin
 #   icon: 'fab fa-linkedin'   # icons powered by <https://fontawesome.com/>
 #   url:  ''                  # Fill with your Linkedin homepage
 # -
+#   type: stack-overflow
 #   icon: 'fab fa-stack-overflow'
 #   url:  ''                  # Fill with your stackoverflow homepage
diff --git a/_includes/post-paginator.html b/_includes/post-paginator.html
index 238367d..cfc53ec 100644
--- a/_includes/post-paginator.html
+++ b/_includes/post-paginator.html
@@ -10,17 +10,15 @@
 <ul class="pagination mt-4 mb-0 pl-lg-2">
   <!-- left arrow -->
   {% if paginator.previous_page %}
-  <li class="page-item">
-    <a class="page-link btn-box-shadow" href="{{ site.baseurl }}{{ paginator.previous_page_path }}">
+    {% assign prev_url = paginator.previous_page_path | relative_url %}
+  {% else %}
+    {% assign prev_url = "#" %}
+  {% endif %}
+  <li class="page-item {% unless paginator.previous_page %}disabled{% endunless %}">
+    <a class="page-link btn-box-shadow" href="{{ prev_url }}" aria-label="previous-page">
       <i class="fas fa-angle-left"></i>
     </a>
   </li>
-  {% else %}
-  <li class="page-item disabled">
-    <a class="page-link btn-box-shadow" href="#"><i class="fas fa-angle-left"></i></a>
-  </li>
-  {% endif %}
-  <!-- endof left arrow -->
 
   <!-- page numbers -->
   {% assign left_ellipsis = false %}
@@ -51,38 +49,37 @@
     {% endif %}
 
     {% if show %}
-        <!-- show number -->
-        <li class="page-item {% if i == paginator.page %} active{% endif %}">
-          <a class="page-link btn-box-shadow" href="{{ site.baseurl }}/{% if i > 1%}page{{ i }}/{% endif %}">{{ i }}</a>
+      <!-- show number -->
+      <li class="page-item {% if i == paginator.page %} active{% endif %}">
+        <a class="page-link btn-box-shadow" href="{{ site.baseurl }}/{% if i > 1%}page{{ i }}/{% endif %}">{{ i }}</a>
+      </li>
+    {% else %}
+      <!-- hide number -->
+      {% if i < pre and left_ellipsis == false %}
+        <li class="page-item disabled">
+          <span class="page-link btn-box-shadow">...</span>
         </li>
-      {% else %}
-        <!-- hide number -->
-        {% if i < pre and left_ellipsis == false %}
-          <li class="page-item disabled">
-            <span class="page-link btn-box-shadow">...</span>
-          </li>
-          {% assign left_ellipsis = true %}
-        {% elsif i > next and right_ellipsis == false %}
-          <li class="page-item disabled">
-            <span class="page-link btn-box-shadow">...</span>
-          </li>
-          {% assign right_ellipsis = true %}
-        {% endif %}
+        {% assign left_ellipsis = true %}
+      {% elsif i > next and right_ellipsis == false %}
+        <li class="page-item disabled">
+          <span class="page-link btn-box-shadow">...</span>
+        </li>
+        {% assign right_ellipsis = true %}
       {% endif %}
+    {% endif %}
 
   {% endfor %}
 
   <!-- right arrow -->
-  {% if paginator.next_page %}
-  <li class="page-item">
-    <a class="page-link btn-box-shadow" href="{{ site.baseurl }}{{ paginator.next_page_path }}">
+  {% if paginator.next_page_path %}
+    {% assign next_url = paginator.next_page_path | relative_url %}
+  {% else %}
+    {% assign next_url = "#" %}
+  {% endif %}
+  <li class="page-item {% unless paginator.next_page_path %}disabled{% endunless %}">
+    <a class="page-link btn-box-shadow" href="{{ next_url }}" aria-label="next-page">
       <i class="fas fa-angle-right"></i>
     </a>
   </li>
-  {% else %}
-  <li class="page-item disabled">
-    <a class="page-link btn-box-shadow" href="#"><i class="fas fa-angle-right"></i></a>
-  </li>
-  {% endif %}
 
-</ul> <!-- .pagination -->
\ No newline at end of file
+</ul> <!-- .pagination -->
diff --git a/_includes/post-sharing.html b/_includes/post-sharing.html
index 889dd48..04e41ee 100644
--- a/_includes/post-sharing.html
+++ b/_includes/post-sharing.html
@@ -16,7 +16,7 @@
     {% for share in site.data.share.platforms %}
       {% assign link = share.link | replace: 'TITLE', title | replace: 'URL', url %}
         <a href="{{ link }}" data-toggle="tooltip" data-placement="top"
-          title="{{ share.type }}" target="_blank" rel="noopener">
+          title="{{ share.type }}" target="_blank" rel="noopener" aria-label="{{ share.type }}">
           <i class="fa-fw {{ share.icon }}"></i>
         </a>
     {% endfor %}
diff --git a/_includes/sidebar.html b/_includes/sidebar.html
index 7a3a90f..1e9e4a1 100644
--- a/_includes/sidebar.html
+++ b/_includes/sidebar.html
@@ -81,7 +81,7 @@
     {% endcapture %}
 
     {% if url != '' %}
-    <a href="{{ url }}" {% unless entry.noblank %}target="_blank" rel="noopener"{% endunless %}>
+    <a href="{{ url }}" aria-label="{{ entry.type }}" {% unless entry.noblank %}target="_blank" rel="noopener"{% endunless %}>
       <i class="{{ entry.icon }}"></i>
     </a>
     {% endif %}
diff --git a/_includes/topbar.html b/_includes/topbar.html
index 5995e8f..1d4f144 100644
--- a/_includes/topbar.html
+++ b/_includes/topbar.html
@@ -41,10 +41,11 @@
     <i id="search-trigger" class="fas fa-search fa-fw"></i>
     <span id="search-wrapper" class="align-items-center">
       <i class="fas fa-search fa-fw"></i>
-      <input class="form-control" id="search-input" type="search" placeholder="{{ site.data.label.search_hint }}...">
+      <input class="form-control" id="search-input" type="search"
+        aria-label="search" placeholder="{{ site.data.label.search_hint }}...">
       <i class="fa fa-times-circle fa-fw" id="search-cleaner"></i>
     </span>
     <span id="search-cancel" >Cancel</span>
   </div>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/_layouts/default.html b/_layouts/default.html
index 1c3b610..03047bf 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -48,7 +48,7 @@ layout: compress
 
     <div id="mask"></div>
 
-    <a id="back-to-top" href="#" class="btn btn-lg btn-box-shadow" role="button">
+    <a id="back-to-top" href="#" aria-label="back-to-top" class="btn btn-lg btn-box-shadow" role="button">
       <i class="fas fa-angle-up"></i>
     </a>
 
diff --git a/tabs/categories.md b/tabs/categories.md
index d621bfb..4287e34 100644
--- a/tabs/categories.md
+++ b/tabs/categories.md
@@ -64,8 +64,9 @@ type: categories
 
       <!-- arrow -->
       {% if sub_categories_size > 0%}
-      <a href="#{{ LIST_PREFIX }}{{ group_index }}" data-toggle="collapse" aria-expanded="true"
-          class="category-trigger hide-border-bottom">
+      <a href="#{{ LIST_PREFIX }}{{ group_index }}" data-toggle="collapse" 
+        aria-expanded="true" aria-label="{{ HEAD_PREFIX }}{{ group_index }}-trigger" 
+        class="category-trigger hide-border-bottom">
         <i class="fas fa-fw fa-angle-down"></i>
       </a>
       {% else %}