From 94d6211712b4e3528dbe598f76b8e29fdd83af9e Mon Sep 17 00:00:00 2001
From: ruizajtruss <ruizaj@truss.works>
Date: Thu, 9 May 2024 22:57:54 +0000
Subject: [PATCH] Issue #2916 - fixing a11y pagination component bug and
 provided icons with aria-labels

---
 src/components/Pagination/Pagination.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index 342b9fd28d..7c59676230 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -68,7 +68,8 @@ const PaginationPage = ({
 const PaginationOverflow = () => (
   <li
     className="usa-pagination__item usa-pagination__overflow"
-    role="presentation">
+    aria-label="ellipsis indicating non-visible pages"
+  >
     <span>…</span>
   </li>
 )
@@ -174,7 +175,7 @@ export const Pagination = ({
                 aria-label="Previous page"
                 data-testid="pagination-previous"
                 onClick={onClickPrevious}>
-                <Icon.NavigateBefore />
+                <Icon.NavigateBefore aria-label="Previous Arrow"/>
                 <span className="usa-pagination__link-text">Previous</span>
               </Button>
             ) : (
@@ -182,7 +183,7 @@ export const Pagination = ({
                 href={`${pathname}?page=${prevPage}`}
                 className="usa-pagination__link usa-pagination__previous-page"
                 aria-label="Previous page">
-                <Icon.NavigateBefore />
+                <Icon.NavigateBefore aria-label="Previous Arrow"/>
                 <span className="usa-pagination__link-text">Previous</span>
               </Link>
             )}
@@ -214,7 +215,7 @@ export const Pagination = ({
                 data-testid="pagination-next"
                 onClick={onClickNext}>
                 <span className="usa-pagination__link-text">Next</span>
-                <Icon.NavigateNext />
+                <Icon.NavigateNext aria-label="Next Arrow" />
               </Button>
             ) : (
               <Link
@@ -222,7 +223,7 @@ export const Pagination = ({
                 className="usa-pagination__link usa-pagination__next-page"
                 aria-label="Next page">
                 <span className="usa-pagination__link-text">Next</span>
-                <Icon.NavigateNext />
+                <Icon.NavigateNext aria-label="Next Arrow" />
               </Link>
             )}
           </li>