Improve pagination accessibility (#23962)

- Add `role="navigation"` An alternative is to wrap `<nav>` around, but that will shift the HTML structure - Add `aria-disabled="true"` for disabled items - Label previous/next page items with `aria-label` - Hide decoration arrows from screen-readers with `aria-hidden="true"` - Mark current page with `aria-current="page"`
laravel · Apr 25, 2018 · d7cf66e · d7cf66e
1 parent 0d18dc3
commit d7cf66e
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 29 deletions.
diff --git a/src/Illuminate/Pagination/resources/views/bootstrap-4.blade.php b/src/Illuminate/Pagination/resources/views/bootstrap-4.blade.php
@@ -1,24 +1,28 @@
 @if ($paginator->hasPages())
-    <ul class="pagination">
+    <ul class="pagination" role="navigation">
         {{-- Previous Page Link --}}
         @if ($paginator->onFirstPage())
-            <li class="page-item disabled"><span class="page-link">&lsaquo;</span></li>
+            <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
+                <span class="page-link" aria-hidden="true">&lsaquo;</span>
+            </li>
         @else
-            <li class="page-item"><a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev">&lsaquo;</a></li>
+            <li class="page-item">
+                <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">&lsaquo;</a>
+            </li>
         @endif
 
         {{-- Pagination Elements --}}
         @foreach ($elements as $element)
             {{-- "Three Dots" Separator --}}
             @if (is_string($element))
-                <li class="page-item disabled"><span class="page-link">{{ $element }}</span></li>
+                <li class="page-item disabled" aria-disabled="true"><span class="page-link">{{ $element }}</span></li>
             @endif
 
             {{-- Array Of Links --}}
             @if (is_array($element))
                 @foreach ($element as $page => $url)
                     @if ($page == $paginator->currentPage())
-                        <li class="page-item active"><span class="page-link">{{ $page }}</span></li>
+                        <li class="page-item active" aria-current="page"><span class="page-link">{{ $page }}</span></li>
                     @else
                         <li class="page-item"><a class="page-link" href="{{ $url }}">{{ $page }}</a></li>
                     @endif
@@ -28,9 +32,13 @@
 
         {{-- Next Page Link --}}
         @if ($paginator->hasMorePages())
-            <li class="page-item"><a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next">&rsaquo;</a></li>
+            <li class="page-item">
+                <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">&rsaquo;</a>
+            </li>
         @else
-            <li class="page-item disabled"><span class="page-link">&rsaquo;</span></li>
+            <li class="page-item disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
+                <span class="page-link" aria-hidden="true">&rsaquo;</span>
+            </li>
         @endif
     </ul>
 @endif
diff --git a/src/Illuminate/Pagination/resources/views/default.blade.php b/src/Illuminate/Pagination/resources/views/default.blade.php
@@ -1,24 +1,28 @@
 @if ($paginator->hasPages())
-    <ul class="pagination">
+    <ul class="pagination" role="navigation">
         {{-- Previous Page Link --}}
         @if ($paginator->onFirstPage())
-            <li class="disabled"><span>&lsaquo;</span></li>
+            <li class="disabled" aria-disabled="true" aria-label="@lang('pagination.previous')">
+                <span aria-hidden="true">&lsaquo;</span>
+            </li>
         @else
-            <li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">&lsaquo;</a></li>
+            <li>
+                <a href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')">&lsaquo;</a>
+            </li>
         @endif
 
         {{-- Pagination Elements --}}
         @foreach ($elements as $element)
             {{-- "Three Dots" Separator --}}
             @if (is_string($element))
-                <li class="disabled"><span>{{ $element }}</span></li>
+                <li class="disabled" aria-disabled="true"><span>{{ $element }}</span></li>
             @endif
 
             {{-- Array Of Links --}}
             @if (is_array($element))
                 @foreach ($element as $page => $url)
                     @if ($page == $paginator->currentPage())
-                        <li class="active"><span>{{ $page }}</span></li>
+                        <li class="active" aria-current="page"><span>{{ $page }}</span></li>
                     @else
                         <li><a href="{{ $url }}">{{ $page }}</a></li>
                     @endif
@@ -28,9 +32,13 @@
 
         {{-- Next Page Link --}}
         @if ($paginator->hasMorePages())
-            <li><a href="{{ $paginator->nextPageUrl() }}" rel="next">&rsaquo;</a></li>
+            <li>
+                <a href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')">&rsaquo;</a>
+            </li>
         @else
-            <li class="disabled"><span>&rsaquo;</span></li>
+            <li class="disabled" aria-disabled="true" aria-label="@lang('pagination.next')">
+                <span aria-hidden="true">&rsaquo;</span>
+            </li>
         @endif
     </ul>
 @endif
diff --git a/src/Illuminate/Pagination/resources/views/semantic-ui.blade.php b/src/Illuminate/Pagination/resources/views/semantic-ui.blade.php
@@ -1,24 +1,24 @@
 @if ($paginator->hasPages())
-    <div class="ui pagination menu">
+    <div class="ui pagination menu" role="navigation">
         {{-- Previous Page Link --}}
         @if ($paginator->onFirstPage())
-            <a class="icon item disabled"> <i class="left chevron icon"></i> </a>
+            <a class="icon item disabled" aria-disabled="true" aria-label="@lang('pagination.previous')"> <i class="left chevron icon"></i> </a>
         @else
-            <a class="icon item" href="{{ $paginator->previousPageUrl() }}" rel="prev"> <i class="left chevron icon"></i> </a>
+            <a class="icon item" href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="@lang('pagination.previous')"> <i class="left chevron icon"></i> </a>
         @endif
 
         {{-- Pagination Elements --}}
         @foreach ($elements as $element)
             {{-- "Three Dots" Separator --}}
             @if (is_string($element))
-                <a class="icon item disabled">{{ $element }}</a>
+                <a class="icon item disabled" aria-disabled="true">{{ $element }}</a>
             @endif
 
             {{-- Array Of Links --}}
             @if (is_array($element))
                 @foreach ($element as $page => $url)
                     @if ($page == $paginator->currentPage())
-                        <a class="item active" href="{{ $url }}">{{ $page }}</a>
+                        <a class="item active" href="{{ $url }}" aria-current="page">{{ $page }}</a>
                     @else
                         <a class="item" href="{{ $url }}">{{ $page }}</a>
                     @endif
@@ -28,9 +28,9 @@
 
         {{-- Next Page Link --}}
         @if ($paginator->hasMorePages())
-            <a class="icon item" href="{{ $paginator->nextPageUrl() }}" rel="next"> <i class="right chevron icon"></i> </a>
+            <a class="icon item" href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="@lang('pagination.next')"> <i class="right chevron icon"></i> </a>
         @else
-            <a class="icon item disabled"> <i class="right chevron icon"></i> </a>
+            <a class="icon item disabled" aria-disabled="true" aria-label="@lang('pagination.next')"> <i class="right chevron icon"></i> </a>
         @endif
     </div>
 @endif
diff --git a/src/Illuminate/Pagination/resources/views/simple-bootstrap-4.blade.php b/src/Illuminate/Pagination/resources/views/simple-bootstrap-4.blade.php
@@ -1,17 +1,25 @@
 @if ($paginator->hasPages())
-    <ul class="pagination">
+    <ul class="pagination" role="navigation">
         {{-- Previous Page Link --}}
         @if ($paginator->onFirstPage())
-            <li class="page-item disabled"><span class="page-link">@lang('pagination.previous')</span></li>
+            <li class="page-item disabled" aria-disabled="true">
+                <span class="page-link">@lang('pagination.previous')</span>
+            </li>
         @else
-            <li class="page-item"><a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev">@lang('pagination.previous')</a></li>
+            <li class="page-item">
+                <a class="page-link" href="{{ $paginator->previousPageUrl() }}" rel="prev">@lang('pagination.previous')</a>
+            </li>
         @endif
 
         {{-- Next Page Link --}}
         @if ($paginator->hasMorePages())
-            <li class="page-item"><a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next">@lang('pagination.next')</a></li>
+            <li class="page-item">
+                <a class="page-link" href="{{ $paginator->nextPageUrl() }}" rel="next">@lang('pagination.next')</a>
+            </li>
         @else
-            <li class="page-item disabled"><span class="page-link">@lang('pagination.next')</span></li>
+            <li class="page-item disabled" aria-disabled="true">
+                <span class="page-link">@lang('pagination.next')</span>
+            </li>
         @endif
     </ul>
 @endif
diff --git a/src/Illuminate/Pagination/resources/views/simple-default.blade.php b/src/Illuminate/Pagination/resources/views/simple-default.blade.php
@@ -1,8 +1,8 @@
 @if ($paginator->hasPages())
-    <ul class="pagination">
+    <ul class="pagination" role="navigation">
         {{-- Previous Page Link --}}
         @if ($paginator->onFirstPage())
-            <li class="disabled"><span>@lang('pagination.previous')</span></li>
+            <li class="disabled" aria-disabled="true"><span>@lang('pagination.previous')</span></li>
         @else
             <li><a href="{{ $paginator->previousPageUrl() }}" rel="prev">@lang('pagination.previous')</a></li>
         @endif
@@ -11,7 +11,7 @@
         @if ($paginator->hasMorePages())
             <li><a href="{{ $paginator->nextPageUrl() }}" rel="next">@lang('pagination.next')</a></li>
         @else
-            <li class="disabled"><span>@lang('pagination.next')</span></li>
+            <li class="disabled" aria-disabled="true"><span>@lang('pagination.next')</span></li>
         @endif
     </ul>
 @endif