From: Muhannad Abdelrazek <muhnad.abdelrazek@gmail.com>
Date: Mon, 21 Aug 2017 12:00:30 +0000 (+0200)
Subject: A11y: Enhance pagination (#1093)
X-Git-Tag: 0.5.2~47
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=267adc64d809f13275f4cc389354c8f3a934bba0;p=thirdparty%2Fbulma.git

A11y: Enhance pagination (#1093)
---

diff --git a/docs/documentation/components/pagination.html b/docs/documentation/components/pagination.html
index 139762478..4b926620c 100644
--- a/docs/documentation/components/pagination.html
+++ b/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 %}