A11y: Enhance pagination (#1093)

docs/documentation/components/pagination.html

@@ -42,129 +42,129 @@ variables:
 ---
 
 {% capture pagination_example %}
-<nav class="pagination">
+<nav class="pagination" role="navigation" aria-label="pagination">
   <a class="pagination-previous">Previous</a>
   <a class="pagination-next">Next page</a>
   <ul class="pagination-list">
     <li>
-      <a class="pagination-link">1</a>
+      <a class="pagination-link" aria-label="Goto page 1">1</a>
     </li>
     <li>
       <span class="pagination-ellipsis">&hellip;</span>
     </li>
     <li>
-      <a class="pagination-link">45</a>
+      <a class="pagination-link" aria-label="Goto page 45">45</a>
     </li>
     <li>
-      <a class="pagination-link is-current">46</a>
+      <a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
     </li>
     <li>
-      <a class="pagination-link">47</a>
+      <a class="pagination-link" aria-label="Goto page 47">47</a>
     </li>
     <li>
       <span class="pagination-ellipsis">&hellip;</span>
     </li>
     <li>
-      <a class="pagination-link">86</a>
+      <a class="pagination-link" aria-label="Goto page 86">86</a>
     </li>
   </ul>
 </nav>
 {% endcapture %}
 
 {% capture pagination_options_example %}
-<nav class="pagination">
+<nav class="pagination" role="navigation" aria-label="pagination">
   <a class="pagination-previous" title="This is the first page" disabled>Previous</a>
   <a class="pagination-next">Next page</a>
   <ul class="pagination-list">
     <li>
-      <a class="pagination-link is-current">1</a>
+      <a class="pagination-link is-current" aria-label="Page 1" aria-current="page">1</a>
     </li>
     <li>
-      <a class="pagination-link">2</a>
+      <a class="pagination-link" aria-label="Goto page 2">2</a>
     </li>
     <li>
-      <a class="pagination-link">3</a>
+      <a class="pagination-link" aria-label="Goto page 3">3</a>
     </li>
   </ul>
 </nav>
 {% endcapture %}
 
 {% capture pagination_centered_example %}
-<nav class="pagination is-centered">
+<nav class="pagination is-centered" role="navigation" aria-label="pagination">
   <a class="pagination-previous">Previous</a>
   <a class="pagination-next">Next page</a>
   <ul class="pagination-list">
-    <li><a class="pagination-link">1</a></li>
+    <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
     <li><span class="pagination-ellipsis">&hellip;</span></li>
-    <li><a class="pagination-link">45</a></li>
-    <li><a class="pagination-link is-current">46</a></li>
-    <li><a class="pagination-link">47</a></li>
+    <li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
+    <li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
+    <li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
     <li><span class="pagination-ellipsis">&hellip;</span></li>
-    <li><a class="pagination-link">86</a></li>
+    <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
   </ul>
 </nav>
 {% endcapture %}
 
 {% capture pagination_right_example %}
-<nav class="pagination is-right">
+<nav class="pagination is-right" role="navigation" aria-label="pagination">
   <a class="pagination-previous">Previous</a>
   <a class="pagination-next">Next page</a>
   <ul class="pagination-list">
-    <li><a class="pagination-link">1</a></li>
+    <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
     <li><span class="pagination-ellipsis">&hellip;</span></li>
-    <li><a class="pagination-link">45</a></li>
-    <li><a class="pagination-link is-current">46</a></li>
-    <li><a class="pagination-link">47</a></li>
+    <li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
+    <li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
+    <li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
     <li><span class="pagination-ellipsis">&hellip;</span></li>
-    <li><a class="pagination-link">86</a></li>
+    <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
   </ul>
 </nav>
 {% endcapture %}
 
 {% capture pagination_small_example %}
-<nav class="pagination is-small">
+<nav class="pagination is-small" role="navigation" aria-label="pagination">
   <a class="pagination-previous">Previous</a>
   <a class="pagination-next">Next page</a>
   <ul class="pagination-list">
-    <li><a class="pagination-link">1</a></li>
+    <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
     <li><span class="pagination-ellipsis">&hellip;</span></li>
-    <li><a class="pagination-link">45</a></li>
-    <li><a class="pagination-link is-current">46</a></li>
-    <li><a class="pagination-link">47</a></li>
+    <li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
+    <li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
+    <li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
     <li><span class="pagination-ellipsis">&hellip;</span></li>
-    <li><a class="pagination-link">86</a></li>
+    <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
   </ul>
 </nav>
 {% endcapture %}
 
 {% capture pagination_medium_example %}
-<nav class="pagination is-medium">
+<nav class="pagination is-medium" role="navigation" aria-label="pagination">
   <a class="pagination-previous">Previous</a>
   <a class="pagination-next">Next page</a>
   <ul class="pagination-list">
-    <li><a class="pagination-link">1</a></li>
+    <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
     <li><span class="pagination-ellipsis">&hellip;</span></li>
-    <li><a class="pagination-link">45</a></li>
-    <li><a class="pagination-link is-current">46</a></li>
-    <li><a class="pagination-link">47</a></li>
+    <li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
+    <li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
+    <li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
     <li><span class="pagination-ellipsis">&hellip;</span></li>
-    <li><a class="pagination-link">86</a></li>
+    <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
   </ul>
 </nav>
 {% endcapture %}
 
 {% capture pagination_large_example %}
-<nav class="pagination is-large">
+<nav class="pagination is-large" role="navigation" aria-label="pagination">
   <a class="pagination-previous">Previous</a>
   <a class="pagination-next">Next page</a>
   <ul class="pagination-list">
-    <li><a class="pagination-link">1</a></li>
+    <li><a class="pagination-link" aria-label="Goto page 1">1</a></li>
     <li><span class="pagination-ellipsis">&hellip;</span></li>
-    <li><a class="pagination-link">45</a></li>
-    <li><a class="pagination-link is-current">46</a></li>
-    <li><a class="pagination-link">47</a></li>
+    <li><a class="pagination-link" aria-label="Goto page 45">45</a></li>
+    <li><a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a></li>
+    <li><a class="pagination-link" aria-label="Goto page 47">47</a></li>
     <li><span class="pagination-ellipsis">&hellip;</span></li>
-    <li><a class="pagination-link">86</a></li>
+    <li><a class="pagination-link" aria-label="Goto page 86">86</a></li>
   </ul>
 </nav>
 {% endcapture %}