Merge pull request #953 from DFE-Digital/feature/Accessibility

Feature/accessibility-pagination
DFE-Digital · Dec 12, 2023 · ccdaa86 · ccdaa86
2 parents 203a746 + 4473a77
commit ccdaa86
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 28 deletions.
diff --git a/Dfe.PrepareConversions/Dfe.PrepareConversions/Pages/Shared/_Pagination.cshtml b/Dfe.PrepareConversions/Dfe.PrepareConversions/Pages/Shared/_Pagination.cshtml
@@ -1,34 +1,58 @@
 @model IPagination
+@{
+    var pagesToDisplay = new List<int>() { 1, Model.CurrentPage, Model.TotalPages };
+    if (Model.HasPreviousPage)
+        pagesToDisplay.Add(Model.PreviousPage);
+    if (Model.HasNextPage)
+        pagesToDisplay.Add(Model.NextPage);
+}
 
 <nav class="moj-pagination" id="pagination-label" aria-label="pagination">
    <p class="govuk-visually-hidden" aria-labelledby="pagination-label">Pagination navigation</p>
+    <ul class="moj-pagination__list">
+        @if (Model.HasPreviousPage)
+        {
+            <li class="moj-pagination__item  moj-pagination__item--prev">
+                <a class="moj-pagination__link" asp-page="/ProjectList/Index" asp-route-currentPage="@Model.PreviousPage" test-id="previousPage">Previous<span class="govuk-visually-hidden"> set of pages</span></a>
+            </li>
+        }
+        @for (var pageIdx = 0; pageIdx < Model.TotalPages; pageIdx++)
+        {
+            var pageNumber = pageIdx + 1;
+            var isCurrentPage = Model.CurrentPage == pageNumber;
+            var markAsSelected = isCurrentPage ? "moj-pagination__item--active" : "";
 
-   <ul class="moj-pagination__list">
-      @if (Model.HasPreviousPage)
-      {
-         <li class="moj-pagination__item  moj-pagination__item--prev">
-            <a class="moj-pagination__link" asp-page="/ProjectList/Index" asp-route-currentPage="@Model.PreviousPage" test-id="previousPage">Previous<span class="govuk-visually-hidden"> set of pages</span></a>
-         </li>
+            var ariaLabel = isCurrentPage ? $"Current page, page {pageNumber}" : $"Go to page {pageNumber}";
 
-         @for (var i = Model.StartingPage; i < Model.CurrentPage; i++)
-         {
-            var current = i;
-            <li class="moj-pagination__item">
-               <a asp-page="/ProjectList/Index" asp-route-currentPage="@current" class="moj-pagination__link">@current</a>
-            </li>
-         }
-      }
+            if (pagesToDisplay.Contains(pageNumber))
+            {
+                if (Model.HasPreviousPage && Model.PreviousPage == pageNumber && ((Model.PreviousPage - 1) > 1))
+                {
+                    <li class="moj-pagination__item">
+                        <span class="govuk-pagination__item govuk-pagination__item--ellipses" aria-hidden="true">&ctdot;</span>
+                    </li>
+                }
+
+                <li class="moj-pagination__item @markAsSelected">
+                    <a id="@pageNumber" asp-page="/ProjectList/Index" asp-route-currentPage="@pageNumber" class="moj-pagination__link"
+                    aria-label="@ariaLabel">@pageNumber</a>
+                </li>
 
-      <li class="moj-pagination__item moj-pagination__item--active">@Model.CurrentPage</li>
+                if (Model.HasNextPage && Model.NextPage == pageNumber && ((Model.NextPage + 1) < Model.TotalPages))
+                {
+                    <li class="moj-pagination__item">
+                        <span class="govuk-pagination__item govuk-pagination__item--ellipses" aria-hidden="true">&ctdot;</span>
+                    </li>
+                }
 
-      @if (Model.HasNextPage)
-      {
-         <li class="moj-pagination__item">
-            <a asp-page="/ProjectList/Index" asp-route-currentPage="@Model.NextPage" class="moj-pagination__link">@Model.NextPage</a>
-         </li>
-         <li class="moj-pagination__item  moj-pagination__item--next">
-            <a class="moj-pagination__link" asp-page="/ProjectList/Index" asp-route-currentPage="@Model.NextPage" test-id="nextPage">Next<span class="govuk-visually-hidden"> set of pages</span></a>
-         </li>
-      }
-   </ul>
+            }
+        }
+
+        @if (Model.HasNextPage)
+        {
+            <li class="moj-pagination__item  moj-pagination__item--next">
+                <a class="moj-pagination__link" asp-page="/ProjectList/Index" asp-route-currentPage="@Model.NextPage" test-id="nextPage">Next<span class="govuk-visually-hidden"> set of pages</span></a>
+            </li>
+        }
+    </ul>
 </nav>
diff --git a/Dfe.PrepareConversions/Dfe.PrepareConversions/Pages/Shared/_ProjectListFilters.cshtml b/Dfe.PrepareConversions/Dfe.PrepareConversions/Pages/Shared/_ProjectListFilters.cshtml
@@ -36,7 +36,7 @@
                         </span>
                      </legend>
 
-                     <div id="filter-project-region-hint" class="govuk-hint">
+                     <div id="filter-project-region-hint" aria-label="Select all that apply" class="govuk-hint">
                         Select all that apply.
                      </div>
 
@@ -68,7 +68,7 @@
                         </span>
                      </legend>
 
-                     <div id="filter-project-status-hint" class="govuk-hint">
+                     <div id="filter-project-status-hint" aria-label="Select all that apply" class="govuk-hint">
                         Select all that apply.
                      </div>
 
@@ -100,7 +100,7 @@
                         </span>
                      </legend>
 
-                     <div id="filter-delivery-officer-hint" class="govuk-hint">
+                     <div id="filter-delivery-officer-hint" aria-label="Select all that apply" class="govuk-hint">
                         Select all that apply.
                      </div>
 

diff --git a/Dfe.PrepareConversions/Dfe.PrepareConversions/ViewModels/IPagination.cs b/Dfe.PrepareConversions/Dfe.PrepareConversions/ViewModels/IPagination.cs
@@ -9,4 +9,5 @@ public interface IPagination
    int PreviousPage { get; }
    int CurrentPage { get; }
    int NextPage { get; }
+   public int TotalPages { get; }
 }
diff --git a/Dfe.PrepareConversions/Dfe.PrepareConversions/ViewModels/PaginatedPageModel.cs b/Dfe.PrepareConversions/Dfe.PrepareConversions/ViewModels/PaginatedPageModel.cs
@@ -18,4 +18,7 @@ public abstract class PaginatedPageModel : PageModel, IPagination
    public int StartingPage => CurrentPage > 5 ? CurrentPage - 5 : 1;
    public int PreviousPage => CurrentPage - 1;
    public int NextPage => CurrentPage + 1;
+   public int TotalPages => Paging.RecordCount % PageSize == 0
+    ? Paging.RecordCount / PageSize
+    : (Paging.RecordCount / PageSize) + 1;
 }