Merge pull request #11903 from creative-commoners/pulls/6/sr-pagination

ENH Improve screen reader support of pagination

Author: GuySartorelli

lang/en.yml

@@ -203,6 +203,9 @@ en:
     Page: Page
     Previous: Previous
     View: View
+    Pagination: Pagination
+    PaginationForTitle: Pagination for {title}
+    InputTitle: 'Current page, currently {current} of {total}'
   SilverStripe\Forms\GridField\GridFieldViewButton:
     VIEW: View
   SilverStripe\Forms\HTMLEditor\TinyMCEConfig:

src/Forms/GridField/GridFieldPaginator.php

@@ -283,7 +283,13 @@ public function getTemplateParameters(GridField $gridField)
                 'LastPage' => $lastPage,
                 'FirstShownRecord' => $firstShownRecord,
                 'LastShownRecord' => $lastShownRecord,
-                'NumRecords' => $totalRows
+                'NumRecords' => $totalRows,
+                'InputTitle' => _t(
+                    __CLASS__ . '.InputTitle',
+                    'Current page, currently {current} of {total}',
+                    ['current' => $state->currentPage, 'total' => $totalPages]
+                ),
+                'AriaLabel' => $this->getAriaLabel($gridField),
             ]);
         }
     }
@@ -325,4 +331,25 @@ public function getItemsPerPage()
     {
         return $this->itemsPerPage;
     }
+
+    /**
+    * An accessible ARIA label using the GridField's title or model name.
+     */
+    private function getAriaLabel(GridField $gridField): string
+    {
+        $title = $gridField->Title();
+        if (!$title) {
+            try {
+                $modelClass = $gridField->getModelClass();
+                $title = $modelClass::singleton()->i18n_plural_name();
+            } catch (LogicException) {
+                return _t(__CLASS__ . '.Pagination', 'Pagination');
+            }
+        }
+        return _t(
+            __CLASS__ . '.PaginationForTitle',
+            'Pagination for {title}',
+            ['title' => $title]
+        );
+    }
 }

templates/SilverStripe/Forms/GridField/GridFieldPaginator_Row.ss

@@ -2,16 +2,22 @@
 	<td class="grid-field__paginator bottom-all" colspan="$Colspan">
 		<% if $OnlyOnePage %>
 		<% else %>
-			<div class="grid-field__paginator__controls datagrid-pagination">
+			<nav aria-label="$AriaLabel"
+			     class="grid-field__paginator__controls datagrid-pagination"
+			>
 				$FirstPage $PreviousPage
 				<span class="pagination-page-number">
 					<%t SilverStripe\\Forms\\GridField\\GridFieldPaginator.Page 'Page' %>
-					<input class="text no-change-track" title="Current page" value="$CurrentPageNum" data-skip-autofocus="true" />
+					<input class="text no-change-track"
+						   title="$InputTitle"
+						   value="$CurrentPageNum"
+						   data-skip-autofocus="true"
+					/>
 					<%t SilverStripe\\Forms\\GridField\\GridFieldPaginator.OF 'of' is 'Example: View 1 of 2' %>
 					$NumPages
 				</span>
 				$NextPage $LastPage
-			</div>
+			</nav>
 		<% end_if %>
 		<span class="grid-field__paginator_numbers pagination-records-number">
 			<%t SilverStripe\\Forms\\GridField\\GridFieldPaginator.View 'View' is 'Verb. Example: View 1 of 2' %>