Issue #2916 - fixing a11y pagination component bug and provided icons…

… with aria-labels
trussworks · May 9, 2024 · 94d6211 · 94d6211
1 parent a7ca245
commit 94d6211
Showing 1 changed file with 6 additions and 5 deletions.
diff --git 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,15 +175,15 @@ 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>
             ) : (
               <Link
                 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,15 +215,15 @@ 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
                 href={`${pathname}?page=${nextPage}`}
                 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>