From 29baab987c0ab4f8ff8e06d11e2efde0df6bb916 Mon Sep 17 00:00:00 2001
From: Thijn <thijn@conduction.nl>
Date: Tue, 10 Feb 2026 13:21:58 +0100
Subject: [PATCH] WOO-458 - fixed WCAG compliance issue

---
 README.md                                | 1 +
 package.json                             | 2 +-
 src/components/Pagination/Pagination.tsx | 4 ++--
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 0e88612..eb12a78 100644
--- a/README.md
+++ b/README.md
@@ -4,6 +4,7 @@
 
 - **Version 2.2 (breaking changes from 2.1.x)**
 
+  - 2.2.56: Fixed WCAG issue in Pagination by adding aria labels to buttons
   - 2.2.55: 
     - Updated Logo to accept aria-label for accessibility.
     - Fixed bug in DisplaySwitch where layoutClassName is added even when empty.
diff --git a/package.json b/package.json
index 217824b..0f83061 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.2.55",
+  "version": "2.2.56",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index aa241ce..8cf7716 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -73,12 +73,12 @@ export const Pagination: React.FC<PaginationProps> = ({
       previousAriaLabel={ariaLabels.previousPage}
       ariaLabelBuilder={(currentPage) => `${ariaLabels.page} ${currentPage}`}
       nextLabel={
-        <Button tabIndex={-1} className={styles.button}>
+        <Button tabIndex={-1} className={styles.button} aria-label={ariaLabels.nextPage}>
           <FontAwesomeIcon icon={faChevronRight} />
         </Button>
       }
       previousLabel={
-        <Button tabIndex={-1} className={styles.button}>
+        <Button tabIndex={-1} className={styles.button} aria-label={ariaLabels.previousPage}>
           <FontAwesomeIcon icon={faChevronLeft} />
         </Button>
       }