fix: announcing next and previous button in pagination and pagination…

…Nav (#16794) * fix: announcing next and previous button in pagination and paginationNav * fix: small fix
carbon-design-system · Jun 17, 2024 · 10bf793 · 10bf793
1 parent d380f14
commit 10bf793
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 0 deletions.
diff --git a/packages/react/src/components/Pagination/Pagination.tsx b/packages/react/src/components/Pagination/Pagination.tsx
@@ -405,6 +405,7 @@ const Pagination = React.forwardRef(function Pagination(
             kind="ghost"
             className={backButtonClasses}
             label={backwardText}
+            aria-label={backwardText}
             onClick={decrementPage}
             ref={backBtnRef}>
             <CaretLeft />
@@ -415,6 +416,7 @@ const Pagination = React.forwardRef(function Pagination(
             kind="ghost"
             className={forwardButtonClasses}
             label={forwardText}
+            aria-label={forwardText}
             onClick={incrementPage}
             ref={forwardBtnRef}>
             <CaretRight />

diff --git a/packages/react/src/components/PaginationNav/PaginationNav.tsx b/packages/react/src/components/PaginationNav/PaginationNav.tsx
@@ -445,6 +445,7 @@ const PaginationNav = React.forwardRef<HTMLElement, PaginationNavProps>(
         <ul className={`${prefix}--pagination-nav__list`}>
           <DirectionButton
             direction="backward"
+            aria-label={t('carbon.pagination-nav.previous')}
             label={t('carbon.pagination-nav.previous')}
             disabled={backwardButtonDisabled}
             onClick={jumpToPrevious}
@@ -516,6 +517,7 @@ const PaginationNav = React.forwardRef<HTMLElement, PaginationNavProps>(
 
           <DirectionButton
             direction="forward"
+            aria-label={t('carbon.pagination-nav.next')}
             label={t('carbon.pagination-nav.next')}
             disabled={forwardButtonDisabled}
             onClick={jumpToNext}