From d7cf66e4fb37a0120bf6a31712e5dd686506883e Mon Sep 17 00:00:00 2001
From: Ng Yik Phang <ngyikp@gmail.com>
Date: Wed, 25 Apr 2018 22:32:32 +0800
Subject: [PATCH] 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"`
---
 .../resources/views/bootstrap-4.blade.php     | 22 +++++++++++++------
 .../resources/views/default.blade.php         | 22 +++++++++++++------
 .../resources/views/semantic-ui.blade.php     | 14 ++++++------
 .../views/simple-bootstrap-4.blade.php        | 18 ++++++++++-----
 .../resources/views/simple-default.blade.php  |  6 ++---
 5 files changed, 53 insertions(+), 29 deletions(-)

diff --git a/src/Illuminate/Pagination/resources/views/bootstrap-4.blade.php b/src/Illuminate/Pagination/resources/views/bootstrap-4.blade.php
index 516af9648d93..044bbaa4a541 100644
--- 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
index ae3b6bbcf9b6..e59847a3f553 100644
--- 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
index c6e0d2109af4..ef0dbb184c63 100644
--- 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
index a9a18d32a3f8..cc30c9b25b5e 100644
--- 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
index 18016092d2b0..bdf2fe883cb2 100644
--- 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