Accessibility label and role for pagination arrows. (#7252)

dart-lang · Dec 4, 2023 · c211529 · c211529
1 parent 8b2e418
commit c211529
Show file tree

Hide file tree

Showing 9 changed files with 22 additions and 16 deletions.
diff --git a/app/lib/frontend/templates/views/shared/pagination.dart b/app/lib/frontend/templates/views/shared/pagination.dart
@@ -22,6 +22,9 @@ d.Node paginationNode(PageLinks links) {
               : null,
           rel: 'prev nofollow',
           child: d.span(text: '«'),
+          attributes: {
+            'aria-label': 'previous page',
+          },
         ),
       ),
 
@@ -56,6 +59,9 @@ d.Node paginationNode(PageLinks links) {
               : null,
           rel: 'next nofollow',
           child: d.span(text: '»'),
+          attributes: {
+            'aria-label': 'next page',
+          },
         ),
       ),
     ],

diff --git a/app/test/frontend/golden/pagination_first.html b/app/test/frontend/golden/pagination_first.html
@@ -1,7 +1,7 @@
 <fragment>
   <ul class="pagination">
     <li class="-disabled">
-      <a rel="prev nofollow">
+      <a rel="prev nofollow" aria-label="previous page">
         <span>«</span>
       </a>
     </li>
@@ -36,7 +36,7 @@
       </a>
     </li>
     <li>
-      <a href="/packages?page=2" rel="next nofollow">
+      <a href="/packages?page=2" rel="next nofollow" aria-label="next page">
         <span>»</span>
       </a>
     </li>

diff --git a/app/test/frontend/golden/pagination_last.html b/app/test/frontend/golden/pagination_last.html
@@ -1,7 +1,7 @@
 <fragment>
   <ul class="pagination">
     <li>
-      <a href="/packages?page=9" rel="prev nofollow">
+      <a href="/packages?page=9" rel="prev nofollow" aria-label="previous page">
         <span>«</span>
       </a>
     </li>
@@ -36,7 +36,7 @@
       </a>
     </li>
     <li class="-disabled">
-      <a rel="next nofollow">
+      <a rel="next nofollow" aria-label="next page">
         <span>»</span>
       </a>
     </li>

diff --git a/app/test/frontend/golden/pagination_middle.html b/app/test/frontend/golden/pagination_middle.html
@@ -1,7 +1,7 @@
 <fragment>
   <ul class="pagination">
     <li>
-      <a href="/packages?page=9" rel="prev nofollow">
+      <a href="/packages?page=9" rel="prev nofollow" aria-label="previous page">
         <span>«</span>
       </a>
     </li>
@@ -61,7 +61,7 @@
       </a>
     </li>
     <li>
-      <a href="/packages?page=11" rel="next nofollow">
+      <a href="/packages?page=11" rel="next nofollow" aria-label="next page">
         <span>»</span>
       </a>
     </li>

diff --git a/app/test/frontend/golden/pagination_single.html b/app/test/frontend/golden/pagination_single.html
@@ -1,7 +1,7 @@
 <fragment>
   <ul class="pagination">
     <li class="-disabled">
-      <a rel="prev nofollow">
+      <a rel="prev nofollow" aria-label="previous page">
         <span>«</span>
       </a>
     </li>
@@ -11,7 +11,7 @@
       </a>
     </li>
     <li class="-disabled">
-      <a rel="next nofollow">
+      <a rel="next nofollow" aria-label="next page">
         <span>»</span>
       </a>
     </li>

diff --git a/app/test/frontend/golden/pkg_index_page.html b/app/test/frontend/golden/pkg_index_page.html
@@ -590,7 +590,7 @@ <h3 class="packages-title">
           </div>
           <ul class="pagination">
             <li class="-disabled">
-              <a rel="prev nofollow">
+              <a rel="prev nofollow" aria-label="previous page">
                 <span>«</span>
               </a>
             </li>
@@ -600,7 +600,7 @@ <h3 class="packages-title">
               </a>
             </li>
             <li class="-disabled">
-              <a rel="next nofollow">
+              <a rel="next nofollow" aria-label="next page">
                 <span>»</span>
               </a>
             </li>

diff --git a/app/test/frontend/golden/publisher_packages_page.html b/app/test/frontend/golden/publisher_packages_page.html
@@ -340,7 +340,7 @@ <h3 class="packages-title">
                   </div>
                   <ul class="pagination">
                     <li class="-disabled">
-                      <a rel="prev nofollow">
+                      <a rel="prev nofollow" aria-label="previous page">
                         <span>«</span>
                       </a>
                     </li>
@@ -350,7 +350,7 @@ <h3 class="packages-title">
                       </a>
                     </li>
                     <li class="-disabled">
-                      <a rel="next nofollow">
+                      <a rel="next nofollow" aria-label="next page">
                         <span>»</span>
                       </a>
                     </li>

diff --git a/app/test/frontend/golden/publisher_unlisted_packages_page.html b/app/test/frontend/golden/publisher_unlisted_packages_page.html
@@ -346,7 +346,7 @@ <h3 class="packages-title">
                   </div>
                   <ul class="pagination">
                     <li class="-disabled">
-                      <a rel="prev nofollow">
+                      <a rel="prev nofollow" aria-label="previous page">
                         <span>«</span>
                       </a>
                     </li>
@@ -356,7 +356,7 @@ <h3 class="packages-title">
                       </a>
                     </li>
                     <li class="-disabled">
-                      <a rel="next nofollow">
+                      <a rel="next nofollow" aria-label="next page">
                         <span>»</span>
                       </a>
                     </li>

diff --git a/app/test/frontend/golden/search_page.html b/app/test/frontend/golden/search_page.html
@@ -583,7 +583,7 @@ <h3 class="packages-title">
           </div>
           <ul class="pagination">
             <li class="-disabled">
-              <a rel="prev nofollow">
+              <a rel="prev nofollow" aria-label="previous page">
                 <span>«</span>
               </a>
             </li>
@@ -613,7 +613,7 @@ <h3 class="packages-title">
               </a>
             </li>
             <li>
-              <a href="/packages?q=foobar&amp;sort=top&amp;page=2" rel="next nofollow">
+              <a href="/packages?q=foobar&amp;sort=top&amp;page=2" rel="next nofollow" aria-label="next page">
                 <span>»</span>
               </a>
             </li>