fix(doc): pagination semantics

number to aria-label go to page role navigation on navs
Orange-OpenSource · Feb 11, 2016 · a564410 · a564410
1 parent acf03dc
commit a564410
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 33 deletions.
diff --git a/docs-orange/_includes/boostwatch/pagination.html b/docs-orange/_includes/boostwatch/pagination.html
@@ -1,18 +1,18 @@
 <h2 id="pagination">Pagination</h2>
 <div class="row">
-    <nav>
+    <nav role="navigation">
         <ul class="pagination">
             <li class="page-item">
                 <a class="page-link disabled" href="#" aria-label="Previous">
                     <span aria-hidden="true" class="fa fa-chevron-left"></span>
                     <span class="sr-only">Previous</span>
                 </a>
             </li>
-            <li class="page-item"><a class="page-link active" href="#" aria-label="page numéro">1</a></li>
-            <li class="page-item"><a class="page-link" href="#" aria-label="page numéro">2</a></li>
-            <li class="page-item"><a class="page-link" href="#" aria-label="page numéro">3</a></li>
-            <li class="page-item"><a class="page-link" href="#" aria-label="page numéro">4</a></li>
-            <li class="page-item"><a class="page-link" href="#" aria-label="page numéro">5</a></li>
+            <li class="page-item"><a class="page-link active" href="#" aria-label="Got to page 1">1</a></li>
+            <li class="page-item"><a class="page-link" href="#" aria-label="Got to page 2">2</a></li>
+            <li class="page-item"><a class="page-link" href="#" aria-label="Got to page 3">3</a></li>
+            <li class="page-item"><a class="page-link" href="#" aria-label="Got to page 4">4</a></li>
+            <li class="page-item"><a class="page-link" href="#" aria-label="Got to page 5">5</a></li>
             <li class="page-item">
                 <a class="page-link" href="#" aria-label="Next">
                     <span aria-hidden="true" class="fa fa-chevron-right"></span>
@@ -24,19 +24,19 @@ <h2 id="pagination">Pagination</h2>
 </div>
 
 <div class="row">
-    <nav>
+    <nav role="navigation">
         <ul class="pagination">
             <li class="page-item">
             <a class="page-link page-item-labelled" href="#" aria-label="Previous">
                 <span aria-hidden="true" class="fa fa-chevron-left"></span>
                 <span>Back</span>
             </a>
             </li>
-            <li class="page-item"><a class="page-link" href="#" aria-label="page numéro">1</a></li>
-            <li class="page-item"><a class="page-link" href="#" aria-label="page numéro">2</a></li>
-            <li class="page-item"><a class="page-link" href="#" aria-label="page numéro">3</a></li>
-            <li class="page-item"><a class="page-link" href="#" aria-label="page numéro">4</a></li>
-            <li class="page-item"><a class="page-link active" href="#" aria-label="page numéro">5</a></li>
+            <li class="page-item"><a class="page-link" href="#" aria-label="Got to page 1">1</a></li>
+            <li class="page-item"><a class="page-link" href="#" aria-label="Got to page 2">2</a></li>
+            <li class="page-item"><a class="page-link" href="#" aria-label="Got to page 3">3</a></li>
+            <li class="page-item"><a class="page-link" href="#" aria-label="Got to page 4">4</a></li>
+            <li class="page-item"><a class="page-link active" href="#" aria-label="Got to page 5">5</a></li>
             <li class="page-item">
                 <a class="page-link page-item-labelled disabled" href="#" aria-label="Next">
                     <span>Next</span>

diff --git a/docs-orange/components/pagination.md b/docs-orange/components/pagination.md
@@ -16,19 +16,19 @@ Provide pagination links for your site or app with the multi-page pagination com
 Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
 
 {% example html %}
-<nav>
+<nav role="navigation">
   <ul class="pagination">
     <li class="page-item">
       <a class="page-link" href="#" aria-label="Previous">
         <span aria-hidden="true">&laquo;</span>
         <span class="sr-only">Previous</span>
       </a>
     </li>
-    <li class="page-item"><a class="page-link" href="#" aria-label="page number">1</a></li>
-    <li class="page-item"><a class="page-link" href="#" aria-label="page number">2</a></li>
-    <li class="page-item"><a class="page-link" href="#" aria-label="page number">3</a></li>
-    <li class="page-item"><a class="page-link" href="#" aria-label="page number">4</a></li>
-    <li class="page-item"><a class="page-link" href="#" aria-label="page number">5</a></li>
+    <li class="page-item"><a class="page-link" href="#" aria-label="Go to page 1">1</a></li>
+    <li class="page-item"><a class="page-link" href="#" aria-label="Go to page 2">2</a></li>
+    <li class="page-item"><a class="page-link" href="#" aria-label="Go to page 3">3</a></li>
+    <li class="page-item"><a class="page-link" href="#" aria-label="Go to page 4">4</a></li>
+    <li class="page-item"><a class="page-link" href="#" aria-label="Go to page 5">5</a></li>
     <li class="page-item">
       <a class="page-link" href="#" aria-label="Next">
         <span aria-hidden="true">&raquo;</span>
@@ -50,7 +50,7 @@ The `.disabled` class uses `pointer-events: none` to try to disable the link fun
 {% endcallout %}
 
 {% example html %}
-<nav>
+<nav role="navigation">
   <ul class="pagination">
     <li class="page-item ">
       <a class="page-link disabled" href="#" tabindex="-1" aria-label="Previous">
@@ -59,12 +59,12 @@ The `.disabled` class uses `pointer-events: none` to try to disable the link fun
       </a>
     </li>
     <li class="page-item ">
-      <a class="page-link active" href="#">1 <span class="sr-only">(current)</span></a>
+      <a class="page-link active" href="#" aria-label="Go to page 1">1 <span class="sr-only">(current)</span></a>
     </li>
-    <li class="page-item"><a class="page-link" href="#" aria-label="page number">2</a></li>
-    <li class="page-item"><a class="page-link" href="#" aria-label="page number">3</a></li>
-    <li class="page-item"><a class="page-link" href="#" aria-label="page number">4</a></li>
-    <li class="page-item"><a class="page-link" href="#" aria-label="page number">5</a></li>
+    <li class="page-item"><a class="page-link" href="#" aria-label="Go to page 2">2</a></li>
+    <li class="page-item"><a class="page-link" href="#" aria-label="Go to page 3">3</a></li>
+    <li class="page-item"><a class="page-link" href="#" aria-label="Go to page 4">4</a></li>
+    <li class="page-item"><a class="page-link" href="#" aria-label="Go to page 5">5</a></li>
     <li class="page-item">
       <a class="page-link" href="#" aria-label="Next">
         <span aria-hidden="true">&raquo;</span>
@@ -78,7 +78,7 @@ The `.disabled` class uses `pointer-events: none` to try to disable the link fun
 You can optionally swap out active or disabled anchors for `<span>`, or omit the anchor in the case of the prev/next arrows, to remove click functionality and prevent keyboard focus while retaining intended styles.
 
 {% example html %}
-<nav>
+<nav role="navigation">
   <ul class="pagination">
     <li class="page-item ">
       <span class="page-link disabled" aria-label="Previous">
@@ -97,17 +97,17 @@ You can optionally swap out active or disabled anchors for `<span>`, or omit the
 Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for additional sizes.
 
 {% example html %}
-<nav>
+<nav role="navigation">
   <ul class="pagination pagination-lg">
     <li class="page-item">
       <a class="page-link" href="#" aria-label="Previous">
         <span aria-hidden="true">&laquo;</span>
         <span class="sr-only">Previous</span>
       </a>
     </li>
-    <li class="page-item"><a class="page-link" href="#" aria-label="page number">1</a></li>
-    <li class="page-item"><a class="page-link" href="#" aria-label="page number">2</a></li>
-    <li class="page-item"><a class="page-link" href="#" aria-label="page number">3</a></li>
+    <li class="page-item"><a class="page-link" href="#" aria-label="Go to page 1">1</a></li>
+    <li class="page-item"><a class="page-link" href="#" aria-label="Go to page 2">2</a></li>
+    <li class="page-item"><a class="page-link" href="#" aria-label="Go to page 3">3</a></li>
     <li class="page-item">
       <a class="page-link" href="#" aria-label="Next">
         <span aria-hidden="true">&raquo;</span>
@@ -119,17 +119,17 @@ Fancy larger or smaller pagination? Add `.pagination-lg` or `.pagination-sm` for
 {% endexample %}
 
 {% example html %}
-<nav>
+<nav role="navigation">
   <ul class="pagination pagination-sm">
     <li class="page-item">
       <a class="page-link" href="#" aria-label="Previous">
         <span aria-hidden="true">&laquo;</span>
         <span class="sr-only">Previous</span>
       </a>
     </li>
-    <li class="page-item"><a class="page-link" href="#" aria-label="page number">1</a></li>
-    <li class="page-item"><a class="page-link" href="#" aria-label="page number">2</a></li>
-    <li class="page-item"><a class="page-link" href="#" aria-label="page number">3</a></li>
+    <li class="page-item"><a class="page-link" href="#" aria-label="Go to page 1">1</a></li>
+    <li class="page-item"><a class="page-link" href="#" aria-label="Go to page 2">2</a></li>
+    <li class="page-item"><a class="page-link" href="#" aria-label="Go to page 3">3</a></li>
     <li class="page-item">
       <a class="page-link" href="#" aria-label="Next">
         <span aria-hidden="true">&raquo;</span>