v7.9.4

Author: TriangleJuice

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+## 7.9.4 - 2025-07-07
+
+### Fixed
+
+- Improved the accessibility of the pagination by defining when the previous and next button are disabled
+
 ## 7.9.3 - 2025-07-04
 
 ### Fixed

packages/antwerp-ui/react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-ui/react",
-  "version": "7.9.3",
+  "version": "7.9.4",
   "license": "MIT",
   "main": "./index.js",
   "types": "./index.d.ts",

packages/antwerp-ui/react-components/src/lib/molecules/pagination/Pagination.tsx

@@ -97,14 +97,28 @@ export function Pagination({
     <nav role="navigation" aria-label={ariaLabel} data-qa={qa}>
       <ul className={paginationClass}>
         <li className="m-pagination__prev" key={'pagination__prev'}>
-          <a href={'#'} className={paginationPreviousClass} aria-label={ariaLabelPreviousPage} onClick={onPrev}>
+          <a
+            href={'#'}
+            className={paginationPreviousClass}
+            aria-label={ariaLabelPreviousPage}
+            aria-disabled={currentPage <= 1 ? 'true' : undefined}
+            tabIndex={currentPage <= 1 ? -1 : 0}
+            onClick={onPrev}
+          >
             <Icon name="arrow-left-1" />
           </a>
         </li>
         {display === 'text' && renderTextPagination(currentPage, totalPages, text, ariaLabelPage)}
         {display === 'numbers' && renderNumbersPagination(currentPage, totalPages, ariaLabelPage, pageChange)}
         <li className="m-pagination__next" key="pagination__next">
-          <a href={'#'} className={paginationNextClass} aria-label={ariaLabelNextPage} onClick={onNext}>
+          <a
+            href={'#'}
+            className={paginationNextClass}
+            aria-label={ariaLabelNextPage}
+            aria-disabled={currentPage >= totalPages ? 'true' : undefined}
+            tabIndex={currentPage >= totalPages ? -1 : 0}
+            onClick={onNext}
+          >
             <Icon name="arrow-right-1" />
           </a>
         </li>