From 9cea4e9d4305072e0a7254c5f85dee9032473f07 Mon Sep 17 00:00:00 2001
From: BalbinaK <balbuhhha@gmail.com>
Date: Mon, 12 Feb 2024 15:22:37 +0100
Subject: [PATCH 01/13] fix(pagination): use styled anchors instead of Button
 Pill

---
 packages/pagination/src/FirstPage.tsx | 17 ++++++-----------
 packages/pagination/src/NextPage.tsx  | 22 +++++++---------------
 packages/pagination/src/Page.tsx      | 14 ++++----------
 packages/pagination/src/PrevPage.tsx  | 17 ++++++-----------
 4 files changed, 23 insertions(+), 47 deletions(-)

diff --git a/packages/pagination/src/FirstPage.tsx b/packages/pagination/src/FirstPage.tsx
index 2a65c7b4a..e6b4cefb4 100644
--- a/packages/pagination/src/FirstPage.tsx
+++ b/packages/pagination/src/FirstPage.tsx
@@ -1,4 +1,4 @@
-import { Button } from '../../button/src/index.js';
+import { classNames } from "@chbphone55/classnames";
 import { i18n } from '@lingui/core';
 import { pagination as ccPagination } from '@warp-ds/css/component-classes';
 import { usePagination } from './PaginationContainer.js';
@@ -24,10 +24,7 @@ type FirstPageProps = {
   onClick: (event: React.UIEvent<HTMLElement>) => void;
 };
 
-const FirstPage = React.forwardRef<
-  React.AnchorHTMLAttributes<HTMLAnchorElement>,
-  FirstPageProps
->(({ className, ...props }, ref) => {
+const FirstPage = (({ className, ...props }: FirstPageProps) => {
   const { currentPage } = usePagination();
 
   if (currentPage <= 2) {
@@ -42,16 +39,14 @@ const FirstPage = React.forwardRef<
   });
 
   return (
-    <Button
-      pill
-      ref={ref}
+    <a
       {...props}
       aria-label={ariaLabel}
-      className={className}
+      className={classNames(className, ccPagination.button, ccPagination.icon)}
       rel="start"
     >
-      <IconChevronDoubleLeft16 className={ccPagination.icon} />
-    </Button>
+      <IconChevronDoubleLeft16 />
+    </a>
   );
 });
 
diff --git a/packages/pagination/src/NextPage.tsx b/packages/pagination/src/NextPage.tsx
index b20767d71..2430f384f 100644
--- a/packages/pagination/src/NextPage.tsx
+++ b/packages/pagination/src/NextPage.tsx
@@ -1,4 +1,3 @@
-import { Button } from '../../button/src/index.js';
 import { classNames } from "@chbphone55/classnames";
 import { i18n } from '@lingui/core';
 import { pagination as ccPagination } from '@warp-ds/css/component-classes';
@@ -30,10 +29,7 @@ type NextPageProps = {
   onClick: (event: React.UIEvent<HTMLElement>) => void;
 };
 
-const NextPage = React.forwardRef<
-  React.AnchorHTMLAttributes<HTMLAnchorElement>,
-  NextPageProps
->(({ children, className, ...props }, ref) => {
+const NextPage = (({ children, className, ...props }: NextPageProps) => {
   const { currentPage, lastPage } = usePagination();
 
   if (currentPage >= lastPage) {
@@ -59,26 +55,22 @@ const NextPage = React.forwardRef<
   return (
     <>
       {currentPage <= 1 && (
-        <Button
-          link
+        <a
           {...props}
-          ref={ref}
           rel="next nofollow"
           className={classNames(ccPagination.firstPageButton, className)}
         >
           <span className={ccPagination.firstPageLabel}>{label}</span>
-        </Button>
+        </a>
       )}
-      <Button
-        pill
+      <a
         aria-label={ariaLabel}
         {...props}
-        ref={ref}
         rel="next nofollow"
-        className={classNames(ccPagination.nextPage, className)}
+        className={classNames(className, ccPagination.button, ccPagination.icon)}
       >
-        <IconChevronRight16 className={ccPagination.icon} />
-      </Button>
+        <IconChevronRight16 />
+      </a>
     </>
   );
 });
diff --git a/packages/pagination/src/Page.tsx b/packages/pagination/src/Page.tsx
index 35eae98c0..c20de220a 100644
--- a/packages/pagination/src/Page.tsx
+++ b/packages/pagination/src/Page.tsx
@@ -1,4 +1,3 @@
-import { Button } from '../../button/src/index.js';
 import { classNames } from "@chbphone55/classnames";
 import { i18n } from '@lingui/core';
 import { pagination as ccPagination } from '@warp-ds/css/component-classes';
@@ -27,10 +26,7 @@ export type PageProps = {
   onClick: (event: React.UIEvent<HTMLElement>) => void;
 };
 
-const Page = React.forwardRef<
-  React.AnchorHTMLAttributes<HTMLAnchorElement>,
-  PageProps
->(({ page = 0, className, currentPage, ...props }, ref) => {
+const Page = (({ page = 0, className, currentPage, ...props }: PageProps) => {
   if (page < 1) {
     return null;
   }
@@ -46,19 +42,17 @@ const Page = React.forwardRef<
   });
 
   return (
-    <Button
-      pill
+    <a
       aria-label={ariaLabel}
       {...props}
-      ref={ref}
       rel="nofollow"
       aria-current={isCurrentPage ? 'page' : undefined}
-      className={classNames(className, ccPagination.defaultPage, {
+      className={classNames(className, ccPagination.defaultPage, ccPagination.button, {
         [ccPagination.active]: isCurrentPage,
       })}
     >
       {page}
-    </Button>
+    </a>
   );
 });
 
diff --git a/packages/pagination/src/PrevPage.tsx b/packages/pagination/src/PrevPage.tsx
index 03f96a378..ac52c231c 100644
--- a/packages/pagination/src/PrevPage.tsx
+++ b/packages/pagination/src/PrevPage.tsx
@@ -1,4 +1,4 @@
-import { Button } from '../../button/src/index.js';
+import { classNames } from "@chbphone55/classnames";
 import { i18n } from '@lingui/core';
 import { pagination as ccPagination } from '@warp-ds/css/component-classes';
 import { usePagination } from './PaginationContainer.js';
@@ -24,10 +24,7 @@ type PrevPageProps = {
   onClick: (event: React.UIEvent<HTMLElement>) => void;
 };
 
-const PrevPage = React.forwardRef<
-  React.AnchorHTMLAttributes<HTMLAnchorElement>,
-  PrevPageProps
->(({ className, ...props }, ref) => {
+const PrevPage = (({ className, ...props }: PrevPageProps) => {
   const { currentPage } = usePagination();
 
   if (currentPage <= 1) {
@@ -42,16 +39,14 @@ const PrevPage = React.forwardRef<
   });
 
   return (
-    <Button
-      pill
+    <a
       aria-label={ariaLabel}
       {...props}
-      ref={ref}
-      className={className}
+      className={classNames(className, ccPagination.button, ccPagination.icon)}
       rel="prev nofollow"
     >
-      <IconChevronLeft16 className={ccPagination.icon} />
-    </Button>
+      <IconChevronLeft16 />
+    </a>
   );
 });
 

From 36e11ae25bb1a0e9873974b681963cc015ae72d6 Mon Sep 17 00:00:00 2001
From: BalbinaK <balbuhhha@gmail.com>
Date: Tue, 13 Feb 2024 09:15:03 +0100
Subject: [PATCH 02/13] Use Button link wrapper around NextPage span

---
 packages/pagination/src/NextPage.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/pagination/src/NextPage.tsx b/packages/pagination/src/NextPage.tsx
index 2430f384f..666369984 100644
--- a/packages/pagination/src/NextPage.tsx
+++ b/packages/pagination/src/NextPage.tsx
@@ -1,4 +1,5 @@
-import { classNames } from "@chbphone55/classnames";
+import { Button } from '../../button/src/index.js';
+import { classNames } from '@chbphone55/classnames';
 import { i18n } from '@lingui/core';
 import { pagination as ccPagination } from '@warp-ds/css/component-classes';
 import { usePagination } from './PaginationContainer.js';
@@ -55,13 +56,14 @@ const NextPage = (({ children, className, ...props }: NextPageProps) => {
   return (
     <>
       {currentPage <= 1 && (
-        <a
+        <Button
+          link
           {...props}
           rel="next nofollow"
           className={classNames(ccPagination.firstPageButton, className)}
         >
           <span className={ccPagination.firstPageLabel}>{label}</span>
-        </a>
+        </Button>
       )}
       <a
         aria-label={ariaLabel}

From edc54a9a50969822118acf82b5f8313ae5e83c6d Mon Sep 17 00:00:00 2001
From: BalbinaK <balbuhhha@gmail.com>
Date: Tue, 13 Feb 2024 11:12:49 +0100
Subject: [PATCH 03/13] Don't change background/text color on active button
 hover

---
 packages/pagination/src/Page.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/pagination/src/Page.tsx b/packages/pagination/src/Page.tsx
index c20de220a..94b86f683 100644
--- a/packages/pagination/src/Page.tsx
+++ b/packages/pagination/src/Page.tsx
@@ -47,9 +47,7 @@ const Page = (({ page = 0, className, currentPage, ...props }: PageProps) => {
       {...props}
       rel="nofollow"
       aria-current={isCurrentPage ? 'page' : undefined}
-      className={classNames(className, ccPagination.defaultPage, ccPagination.button, {
-        [ccPagination.active]: isCurrentPage,
-      })}
+      className={classNames(className, ccPagination.button, [isCurrentPage ? ccPagination.active : ccPagination.notActive])}
     >
       {page}
     </a>

From 85ebf5edb8a3d8cf0b3ace97dde229ce4cf875b3 Mon Sep 17 00:00:00 2001
From: BalbinaK <balbuhhha@gmail.com>
Date: Tue, 13 Feb 2024 12:00:16 +0100
Subject: [PATCH 04/13] fix: set role=button on lins that look like buttons

---
 packages/pagination/src/FirstPage.tsx | 1 +
 packages/pagination/src/NextPage.tsx  | 1 +
 packages/pagination/src/Page.tsx      | 1 +
 packages/pagination/src/PrevPage.tsx  | 1 +
 4 files changed, 4 insertions(+)

diff --git a/packages/pagination/src/FirstPage.tsx b/packages/pagination/src/FirstPage.tsx
index e6b4cefb4..d181d6a8e 100644
--- a/packages/pagination/src/FirstPage.tsx
+++ b/packages/pagination/src/FirstPage.tsx
@@ -44,6 +44,7 @@ const FirstPage = (({ className, ...props }: FirstPageProps) => {
       aria-label={ariaLabel}
       className={classNames(className, ccPagination.button, ccPagination.icon)}
       rel="start"
+      role="button"
     >
       <IconChevronDoubleLeft16 />
     </a>
diff --git a/packages/pagination/src/NextPage.tsx b/packages/pagination/src/NextPage.tsx
index 666369984..e9502bc3b 100644
--- a/packages/pagination/src/NextPage.tsx
+++ b/packages/pagination/src/NextPage.tsx
@@ -69,6 +69,7 @@ const NextPage = (({ children, className, ...props }: NextPageProps) => {
         aria-label={ariaLabel}
         {...props}
         rel="next nofollow"
+        role="button"
         className={classNames(className, ccPagination.button, ccPagination.icon)}
       >
         <IconChevronRight16 />
diff --git a/packages/pagination/src/Page.tsx b/packages/pagination/src/Page.tsx
index 94b86f683..a2143568d 100644
--- a/packages/pagination/src/Page.tsx
+++ b/packages/pagination/src/Page.tsx
@@ -46,6 +46,7 @@ const Page = (({ page = 0, className, currentPage, ...props }: PageProps) => {
       aria-label={ariaLabel}
       {...props}
       rel="nofollow"
+      role="button"
       aria-current={isCurrentPage ? 'page' : undefined}
       className={classNames(className, ccPagination.button, [isCurrentPage ? ccPagination.active : ccPagination.notActive])}
     >
diff --git a/packages/pagination/src/PrevPage.tsx b/packages/pagination/src/PrevPage.tsx
index ac52c231c..d52adf7f5 100644
--- a/packages/pagination/src/PrevPage.tsx
+++ b/packages/pagination/src/PrevPage.tsx
@@ -44,6 +44,7 @@ const PrevPage = (({ className, ...props }: PrevPageProps) => {
       {...props}
       className={classNames(className, ccPagination.button, ccPagination.icon)}
       rel="prev nofollow"
+      role="button"
     >
       <IconChevronLeft16 />
     </a>

From 46269c64081b9db41f009b65f6c8a66d5922d663 Mon Sep 17 00:00:00 2001
From: BalbinaK <balbuhhha@gmail.com>
Date: Tue, 13 Feb 2024 12:08:29 +0100
Subject: [PATCH 05/13] chore: restore ref prop and type it as
 Ref<HTMLAnchorElement>

---
 packages/pagination/src/FirstPage.tsx | 8 ++++++--
 packages/pagination/src/NextPage.tsx  | 9 +++++++--
 packages/pagination/src/Page.tsx      | 8 ++++++--
 packages/pagination/src/PrevPage.tsx  | 8 ++++++--
 4 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/packages/pagination/src/FirstPage.tsx b/packages/pagination/src/FirstPage.tsx
index d181d6a8e..e9045a213 100644
--- a/packages/pagination/src/FirstPage.tsx
+++ b/packages/pagination/src/FirstPage.tsx
@@ -3,7 +3,7 @@ import { i18n } from '@lingui/core';
 import { pagination as ccPagination } from '@warp-ds/css/component-classes';
 import { usePagination } from './PaginationContainer.js';
 import IconChevronDoubleLeft16 from '@warp-ds/icons/react/chevron-double-left-16';
-import React from 'react';
+import React, { Ref } from 'react';
 
 type FirstPageProps = {
   /**
@@ -24,7 +24,10 @@ type FirstPageProps = {
   onClick: (event: React.UIEvent<HTMLElement>) => void;
 };
 
-const FirstPage = (({ className, ...props }: FirstPageProps) => {
+const FirstPage = React.forwardRef<
+  React.AnchorHTMLAttributes<HTMLAnchorElement>,
+  FirstPageProps
+>(({ className, ...props }, ref) => {
   const { currentPage } = usePagination();
 
   if (currentPage <= 2) {
@@ -40,6 +43,7 @@ const FirstPage = (({ className, ...props }: FirstPageProps) => {
 
   return (
     <a
+      ref={ref as Ref<HTMLAnchorElement>}
       {...props}
       aria-label={ariaLabel}
       className={classNames(className, ccPagination.button, ccPagination.icon)}
diff --git a/packages/pagination/src/NextPage.tsx b/packages/pagination/src/NextPage.tsx
index e9502bc3b..48f308b16 100644
--- a/packages/pagination/src/NextPage.tsx
+++ b/packages/pagination/src/NextPage.tsx
@@ -4,7 +4,7 @@ import { i18n } from '@lingui/core';
 import { pagination as ccPagination } from '@warp-ds/css/component-classes';
 import { usePagination } from './PaginationContainer.js';
 import IconChevronRight16 from '@warp-ds/icons/react/chevron-right-16';
-import React from 'react';
+import React, { Ref } from 'react';
 
 type NextPageProps = {
   /**
@@ -30,7 +30,10 @@ type NextPageProps = {
   onClick: (event: React.UIEvent<HTMLElement>) => void;
 };
 
-const NextPage = (({ children, className, ...props }: NextPageProps) => {
+const NextPage = React.forwardRef<
+  React.AnchorHTMLAttributes<HTMLAnchorElement>,
+  NextPageProps
+>(({ children, className, ...props }, ref) => {
   const { currentPage, lastPage } = usePagination();
 
   if (currentPage >= lastPage) {
@@ -59,6 +62,7 @@ const NextPage = (({ children, className, ...props }: NextPageProps) => {
         <Button
           link
           {...props}
+          ref={ref}
           rel="next nofollow"
           className={classNames(ccPagination.firstPageButton, className)}
         >
@@ -68,6 +72,7 @@ const NextPage = (({ children, className, ...props }: NextPageProps) => {
       <a
         aria-label={ariaLabel}
         {...props}
+        ref={ref as Ref<HTMLAnchorElement>}
         rel="next nofollow"
         role="button"
         className={classNames(className, ccPagination.button, ccPagination.icon)}
diff --git a/packages/pagination/src/Page.tsx b/packages/pagination/src/Page.tsx
index a2143568d..37527ac06 100644
--- a/packages/pagination/src/Page.tsx
+++ b/packages/pagination/src/Page.tsx
@@ -1,7 +1,7 @@
 import { classNames } from "@chbphone55/classnames";
 import { i18n } from '@lingui/core';
 import { pagination as ccPagination } from '@warp-ds/css/component-classes';
-import React from 'react';
+import React, { Ref } from 'react';
 
 export type PageProps = {
   /**
@@ -26,7 +26,10 @@ export type PageProps = {
   onClick: (event: React.UIEvent<HTMLElement>) => void;
 };
 
-const Page = (({ page = 0, className, currentPage, ...props }: PageProps) => {
+const Page = React.forwardRef<
+  React.AnchorHTMLAttributes<HTMLAnchorElement>,
+  PageProps
+>(({ page = 0, className, currentPage, ...props }, ref) => {
   if (page < 1) {
     return null;
   }
@@ -45,6 +48,7 @@ const Page = (({ page = 0, className, currentPage, ...props }: PageProps) => {
     <a
       aria-label={ariaLabel}
       {...props}
+      ref={ref as Ref<HTMLAnchorElement>}
       rel="nofollow"
       role="button"
       aria-current={isCurrentPage ? 'page' : undefined}
diff --git a/packages/pagination/src/PrevPage.tsx b/packages/pagination/src/PrevPage.tsx
index d52adf7f5..3493e0241 100644
--- a/packages/pagination/src/PrevPage.tsx
+++ b/packages/pagination/src/PrevPage.tsx
@@ -3,7 +3,7 @@ import { i18n } from '@lingui/core';
 import { pagination as ccPagination } from '@warp-ds/css/component-classes';
 import { usePagination } from './PaginationContainer.js';
 import IconChevronLeft16 from '@warp-ds/icons/react/chevron-left-16';
-import React from 'react';
+import React, { Ref } from 'react';
 
 type PrevPageProps = {
   /**
@@ -24,7 +24,10 @@ type PrevPageProps = {
   onClick: (event: React.UIEvent<HTMLElement>) => void;
 };
 
-const PrevPage = (({ className, ...props }: PrevPageProps) => {
+const PrevPage = React.forwardRef<
+  React.AnchorHTMLAttributes<HTMLAnchorElement>,
+  PrevPageProps
+>(({ className, ...props }, ref) => {
   const { currentPage } = usePagination();
 
   if (currentPage <= 1) {
@@ -42,6 +45,7 @@ const PrevPage = (({ className, ...props }: PrevPageProps) => {
     <a
       aria-label={ariaLabel}
       {...props}
+      ref={ref as Ref<HTMLAnchorElement>}
       className={classNames(className, ccPagination.button, ccPagination.icon)}
       rel="prev nofollow"
       role="button"

From 29c78a6c6cb66978a1d717d3f5fcd877ec20ddeb Mon Sep 17 00:00:00 2001
From: BalbinaK <balbuhhha@gmail.com>
Date: Tue, 13 Feb 2024 12:09:23 +0100
Subject: [PATCH 06/13] chore(deps): update @warp-ds/css to 1.8.1

---
 package.json   | 2 +-
 pnpm-lock.yaml | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index a92453e4f..d8d059b0b 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,7 @@
     "@chbphone55/classnames": "2.0.0",
     "@lingui/core": "4.7.0",
     "@warp-ds/core": "1.0.2",
-    "@warp-ds/css": "1.8.0",
+    "@warp-ds/css": "1.8.1",
     "@warp-ds/icons": "2.0.0",
     "@warp-ds/uno": "1.8.0",
     "react-focus-lock": "2.9.7",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fdf5e46b6..6378daa7f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,8 +15,8 @@ dependencies:
     specifier: 1.0.2
     version: 1.0.2
   '@warp-ds/css':
-    specifier: 1.8.0
-    version: 1.8.0
+    specifier: 1.8.1
+    version: 1.8.1
   '@warp-ds/icons':
     specifier: 2.0.0
     version: 2.0.0
@@ -6293,8 +6293,8 @@ packages:
       '@floating-ui/dom': 0.5.4
     dev: false
 
-  /@warp-ds/css@1.8.0:
-    resolution: {integrity: sha512-nT7oYC45jkmQM7wCW0462fFty/wL//pZqGaXCXXw893JwA0B/2q3S+N0tP4y+KMQA4tYBd98mg7Pjd01Ooshcg==}
+  /@warp-ds/css@1.8.1:
+    resolution: {integrity: sha512-NoI3ZycFEMdKTp1noZmJ8IFhBJzFIeTYzG/2x8VrDJ83t244DayfKxyMl0c6sEGRsakvMUJOEBe6LlH8vwpNMw==}
     dependencies:
       '@warp-ds/tokenizer': 0.0.3
       '@warp-ds/uno': 1.8.0

From 647097c00aa849c660494e1847715cf24ad8c247 Mon Sep 17 00:00:00 2001
From: BalbinaK <balbuhhha@gmail.com>
Date: Tue, 13 Feb 2024 12:54:59 +0100
Subject: [PATCH 07/13] test(pagination): fix test when two Next page buttons
 are rendered

'Next page' aria-label was missing from the Button with chevron because aria-label is not passed to <a> JSX element in Button component. Now that we've replaced Button with <a>, the aria-label is present and so we have multiple elements with 'button' role and 'Next page' label when Pagination is in first page view.
---
 tests/components/PaginationTest.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/components/PaginationTest.tsx b/tests/components/PaginationTest.tsx
index a3b42e35f..96798fd88 100644
--- a/tests/components/PaginationTest.tsx
+++ b/tests/components/PaginationTest.tsx
@@ -30,8 +30,8 @@ describe('Pagination component', () => {
     });
 
     it('calls on change function on click of next page', () => {
-        expect(screen.getByRole('button', { name: 'Next page' })).toHaveTextContent('Next page');
-        fireEvent.click(screen.getByRole('button', { name: 'Next page' }));
+        expect(screen.getAllByRole('button', { name: 'Next page' })[0]).toHaveTextContent('Next page');
+        fireEvent.click(screen.getAllByRole('button', { name: 'Next page' })[0]);
 
         expect(onChangeFunction).toHaveBeenCalledTimes(1);
         expect(onChangeFunction).toHaveBeenCalledWith(1);

From d6f149fec46903b9860ce8aaad1d86b32931415e Mon Sep 17 00:00:00 2001
From: BalbinaK <balbuhhha@gmail.com>
Date: Tue, 13 Feb 2024 13:38:24 +0100
Subject: [PATCH 08/13] fix: aria-label on each Page includes actual page
 number

---
 packages/pagination/src/Page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/pagination/src/Page.tsx b/packages/pagination/src/Page.tsx
index 37527ac06..3f033e8ee 100644
--- a/packages/pagination/src/Page.tsx
+++ b/packages/pagination/src/Page.tsx
@@ -39,7 +39,7 @@ const Page = React.forwardRef<
   const ariaLabel = props['aria-label'] ?? i18n._({
     id: 'pagination.aria.page',
     message: 'Page {currentPage}',
-    values: { currentPage },
+    values: { currentPage: page },
     comment:
       'Default screenreader message for page button in the pagination component',
   });

From 2a41ec8aadfb957898dfacfce8e4829840f76ba1 Mon Sep 17 00:00:00 2001
From: BalbinaK <balbuhhha@gmail.com>
Date: Tue, 13 Feb 2024 14:51:09 +0100
Subject: [PATCH 09/13] Revert "fix: set role=button on lins that look like
 buttons"

This reverts commit 85ebf5edb8a3d8cf0b3ace97dde229ce4cf875b3.
---
 packages/pagination/src/FirstPage.tsx | 1 -
 packages/pagination/src/NextPage.tsx  | 1 -
 packages/pagination/src/Page.tsx      | 1 -
 packages/pagination/src/PrevPage.tsx  | 1 -
 4 files changed, 4 deletions(-)

diff --git a/packages/pagination/src/FirstPage.tsx b/packages/pagination/src/FirstPage.tsx
index e9045a213..9ec1bda1d 100644
--- a/packages/pagination/src/FirstPage.tsx
+++ b/packages/pagination/src/FirstPage.tsx
@@ -48,7 +48,6 @@ const FirstPage = React.forwardRef<
       aria-label={ariaLabel}
       className={classNames(className, ccPagination.button, ccPagination.icon)}
       rel="start"
-      role="button"
     >
       <IconChevronDoubleLeft16 />
     </a>
diff --git a/packages/pagination/src/NextPage.tsx b/packages/pagination/src/NextPage.tsx
index 48f308b16..dbd2e5412 100644
--- a/packages/pagination/src/NextPage.tsx
+++ b/packages/pagination/src/NextPage.tsx
@@ -74,7 +74,6 @@ const NextPage = React.forwardRef<
         {...props}
         ref={ref as Ref<HTMLAnchorElement>}
         rel="next nofollow"
-        role="button"
         className={classNames(className, ccPagination.button, ccPagination.icon)}
       >
         <IconChevronRight16 />
diff --git a/packages/pagination/src/Page.tsx b/packages/pagination/src/Page.tsx
index 3f033e8ee..bd84f6f3f 100644
--- a/packages/pagination/src/Page.tsx
+++ b/packages/pagination/src/Page.tsx
@@ -50,7 +50,6 @@ const Page = React.forwardRef<
       {...props}
       ref={ref as Ref<HTMLAnchorElement>}
       rel="nofollow"
-      role="button"
       aria-current={isCurrentPage ? 'page' : undefined}
       className={classNames(className, ccPagination.button, [isCurrentPage ? ccPagination.active : ccPagination.notActive])}
     >
diff --git a/packages/pagination/src/PrevPage.tsx b/packages/pagination/src/PrevPage.tsx
index 3493e0241..ee29bb2ba 100644
--- a/packages/pagination/src/PrevPage.tsx
+++ b/packages/pagination/src/PrevPage.tsx
@@ -48,7 +48,6 @@ const PrevPage = React.forwardRef<
       ref={ref as Ref<HTMLAnchorElement>}
       className={classNames(className, ccPagination.button, ccPagination.icon)}
       rel="prev nofollow"
-      role="button"
     >
       <IconChevronLeft16 />
     </a>

From 421acda51f8735d3c0984d4379919dc7e490fab5 Mon Sep 17 00:00:00 2001
From: BalbinaK <balbuhhha@gmail.com>
Date: Wed, 14 Feb 2024 13:37:52 +0100
Subject: [PATCH 10/13] fix: show Page 1 text for first page when on mobile

---
 packages/pagination/src/CurrentPage.tsx |  2 +-
 packages/pagination/src/NextPage.tsx    | 28 +------------------------
 2 files changed, 2 insertions(+), 28 deletions(-)

diff --git a/packages/pagination/src/CurrentPage.tsx b/packages/pagination/src/CurrentPage.tsx
index d28b2e464..1c672fd2a 100644
--- a/packages/pagination/src/CurrentPage.tsx
+++ b/packages/pagination/src/CurrentPage.tsx
@@ -15,7 +15,7 @@ const CurrentPage = React.forwardRef<HTMLDivElement, CurrentPageProps>(
   ({ children, className, ...props }, ref) => {
     const { currentPage } = usePagination();
 
-    if (currentPage <= 1) {
+    if (currentPage < 1) {
       return null;
     }
 
diff --git a/packages/pagination/src/NextPage.tsx b/packages/pagination/src/NextPage.tsx
index dbd2e5412..f3dca5945 100644
--- a/packages/pagination/src/NextPage.tsx
+++ b/packages/pagination/src/NextPage.tsx
@@ -1,4 +1,3 @@
-import { Button } from '../../button/src/index.js';
 import { classNames } from '@chbphone55/classnames';
 import { i18n } from '@lingui/core';
 import { pagination as ccPagination } from '@warp-ds/css/component-classes';
@@ -12,11 +11,6 @@ type NextPageProps = {
    */
   'aria-label'?: string;
 
-  /**
-   * Butto label to render on mobile
-   */
-  children?: React.ReactNode;
-
   /** Additional CSS class for the element. */
   className?: string;
 
@@ -33,7 +27,7 @@ type NextPageProps = {
 const NextPage = React.forwardRef<
   React.AnchorHTMLAttributes<HTMLAnchorElement>,
   NextPageProps
->(({ children, className, ...props }, ref) => {
+>(({ className, ...props }, ref) => {
   const { currentPage, lastPage } = usePagination();
 
   if (currentPage >= lastPage) {
@@ -47,28 +41,8 @@ const NextPage = React.forwardRef<
       'Default screenreader message for next page button in the pagination component',
   });
 
-  const label =
-    children ??
-    i18n._({
-      id: 'pagination.button.next-page',
-      message: 'Next page',
-      comment:
-        'Default message for next page button in the pagination component',
-    });
-
   return (
     <>
-      {currentPage <= 1 && (
-        <Button
-          link
-          {...props}
-          ref={ref}
-          rel="next nofollow"
-          className={classNames(ccPagination.firstPageButton, className)}
-        >
-          <span className={ccPagination.firstPageLabel}>{label}</span>
-        </Button>
-      )}
       <a
         aria-label={ariaLabel}
         {...props}

From c5be75c01cf5f9305392f9c4f388f33d459bf68a Mon Sep 17 00:00:00 2001
From: BalbinaK <balbuhhha@gmail.com>
Date: Wed, 14 Feb 2024 15:06:35 +0100
Subject: [PATCH 11/13] Add accessible labels to icon links and fix tests

---
 package.json                                  |  4 +-
 packages/pagination/src/FirstPage.tsx         | 17 ++++++--
 packages/pagination/src/NextPage.tsx          | 17 ++++++--
 packages/pagination/src/Page.tsx              |  4 +-
 .../pagination/src/PaginationContainer.tsx    |  2 +-
 packages/pagination/src/PrevPage.tsx          | 29 +++++++++----
 .../pagination/src/locales/en/messages.mjs    |  2 +-
 .../pagination/src/locales/en/messages.po     | 35 +++++++++-------
 .../pagination/src/locales/fi/messages.mjs    |  2 +-
 .../pagination/src/locales/fi/messages.po     | 42 ++++++++++++-------
 .../pagination/src/locales/nb/messages.mjs    |  2 +-
 .../pagination/src/locales/nb/messages.po     | 42 ++++++++++++-------
 pnpm-lock.yaml                                | 42 ++++++++-----------
 tests/components/PaginationTest.tsx           |  8 ++--
 14 files changed, 149 insertions(+), 99 deletions(-)

diff --git a/package.json b/package.json
index d8d059b0b..d71e9c799 100644
--- a/package.json
+++ b/package.json
@@ -109,9 +109,9 @@
     "@chbphone55/classnames": "2.0.0",
     "@lingui/core": "4.7.0",
     "@warp-ds/core": "1.0.2",
-    "@warp-ds/css": "1.8.1",
+    "@warp-ds/css": "1.8.2-next.2",
     "@warp-ds/icons": "2.0.0",
-    "@warp-ds/uno": "1.8.0",
+    "@warp-ds/uno": "1.8.1",
     "react-focus-lock": "2.9.7",
     "resize-observer-polyfill": "1.5.1",
     "scroll-doctor": "2.0.2"
diff --git a/packages/pagination/src/FirstPage.tsx b/packages/pagination/src/FirstPage.tsx
index 9ec1bda1d..5f3473ed3 100644
--- a/packages/pagination/src/FirstPage.tsx
+++ b/packages/pagination/src/FirstPage.tsx
@@ -38,18 +38,29 @@ const FirstPage = React.forwardRef<
     id: 'pagination.aria.first-page',
     message: 'First page',
     comment:
-      'Default screenreader message for first page button in the pagination component',
+      'Default screenreader message for first page link in the pagination component',
   });
 
+  const iconSuffix =
+    i18n._({
+      id: 'pagination.aria.icon-suffix',
+      message: 'icon',
+      comment:
+        'Suffix added at the end of icon titles when img semantics are lost on an html element',
+    });
+
   return (
     <a
       ref={ref as Ref<HTMLAnchorElement>}
       {...props}
-      aria-label={ariaLabel}
-      className={classNames(className, ccPagination.button, ccPagination.icon)}
+      className={classNames(className, ccPagination.link, ccPagination.icon)}
       rel="start"
     >
+      <span className={ccPagination.a11y}>
+        {ariaLabel},
+      </span>
       <IconChevronDoubleLeft16 />
+      <span className={ccPagination.a11y}>{iconSuffix}</span>
     </a>
   );
 });
diff --git a/packages/pagination/src/NextPage.tsx b/packages/pagination/src/NextPage.tsx
index f3dca5945..c37572db9 100644
--- a/packages/pagination/src/NextPage.tsx
+++ b/packages/pagination/src/NextPage.tsx
@@ -38,19 +38,30 @@ const NextPage = React.forwardRef<
     id: 'pagination.aria.next-page',
     message: 'Next page',
     comment:
-      'Default screenreader message for next page button in the pagination component',
+      'Default screenreader message for next page link in the pagination component',
   });
 
+  const iconSuffix =
+    i18n._({
+      id: 'pagination.aria.icon-suffix',
+      message: 'icon',
+      comment:
+        'Suffix added at the end of icon titles when img semantics are lost on an html element',
+    });
+
   return (
     <>
       <a
-        aria-label={ariaLabel}
         {...props}
         ref={ref as Ref<HTMLAnchorElement>}
         rel="next nofollow"
-        className={classNames(className, ccPagination.button, ccPagination.icon)}
+        className={classNames(className, ccPagination.link, ccPagination.icon)}
       >
+        <span className={ccPagination.a11y}>
+          {ariaLabel},
+        </span>
         <IconChevronRight16 />
+        <span className={ccPagination.a11y}>{iconSuffix}</span>
       </a>
     </>
   );
diff --git a/packages/pagination/src/Page.tsx b/packages/pagination/src/Page.tsx
index bd84f6f3f..903932f6a 100644
--- a/packages/pagination/src/Page.tsx
+++ b/packages/pagination/src/Page.tsx
@@ -41,7 +41,7 @@ const Page = React.forwardRef<
     message: 'Page {currentPage}',
     values: { currentPage: page },
     comment:
-      'Default screenreader message for page button in the pagination component',
+      'Default screenreader message for page link in the pagination component',
   });
 
   return (
@@ -51,7 +51,7 @@ const Page = React.forwardRef<
       ref={ref as Ref<HTMLAnchorElement>}
       rel="nofollow"
       aria-current={isCurrentPage ? 'page' : undefined}
-      className={classNames(className, ccPagination.button, [isCurrentPage ? ccPagination.active : ccPagination.notActive])}
+      className={classNames(className, ccPagination.link, [isCurrentPage ? ccPagination.active : ccPagination.notActive])}
     >
       {page}
     </a>
diff --git a/packages/pagination/src/PaginationContainer.tsx b/packages/pagination/src/PaginationContainer.tsx
index a64f4293e..0ad53409f 100644
--- a/packages/pagination/src/PaginationContainer.tsx
+++ b/packages/pagination/src/PaginationContainer.tsx
@@ -83,7 +83,7 @@ const PaginationContainer = React.forwardRef<
         aria-labelledby={ariaLabelledBy}
         ref={ref}
       >
-        <h1 className={ccPagination.heading} id={ariaLabelledBy}>
+        <h1 className={ccPagination.a11y} id={ariaLabelledBy}>
           {ariaLabel}
         </h1>
         <PaginationContext.Provider value={context}>
diff --git a/packages/pagination/src/PrevPage.tsx b/packages/pagination/src/PrevPage.tsx
index ee29bb2ba..2ccabab3d 100644
--- a/packages/pagination/src/PrevPage.tsx
+++ b/packages/pagination/src/PrevPage.tsx
@@ -34,22 +34,35 @@ const PrevPage = React.forwardRef<
     return null;
   }
 
-  const ariaLabel = i18n._({
-    id: 'pagination.aria.prev-page',
-    message: 'Previous page',
-    comment:
-      'Default screenreader message for previous page button in the pagination component',
-  });
+  const ariaLabel = 
+    props['aria-label'] ??
+    i18n._({
+      id: 'pagination.aria.prev-page',
+      message: 'Previous page',
+      comment:
+        'Default screenreader message for previous page link in the pagination component',
+    });
+
+  const iconSuffix =
+    i18n._({
+      id: 'pagination.aria.icon-suffix',
+      message: 'icon',
+      comment:
+        'Suffix added at the end of icon titles when img semantics are lost on an html element',
+    });
 
   return (
     <a
-      aria-label={ariaLabel}
       {...props}
       ref={ref as Ref<HTMLAnchorElement>}
-      className={classNames(className, ccPagination.button, ccPagination.icon)}
+      className={classNames(className, ccPagination.link, ccPagination.icon)}
       rel="prev nofollow"
     >
+      <span className={ccPagination.a11y}>
+        {ariaLabel},
+      </span>
       <IconChevronLeft16 />
+      <span className={ccPagination.a11y}>{iconSuffix}</span>
     </a>
   );
 });
diff --git a/packages/pagination/src/locales/en/messages.mjs b/packages/pagination/src/locales/en/messages.mjs
index a0551862a..60f27b866 100644
--- a/packages/pagination/src/locales/en/messages.mjs
+++ b/packages/pagination/src/locales/en/messages.mjs
@@ -1 +1 @@
-/*eslint-disable*/export const messages=JSON.parse("{\"pagination.aria.first-page\":\"First page\",\"pagination.aria.next-page\":\"Next page\",\"pagination.button.next-page\":\"Next page\",\"pagination.label.current-page\":[\"Page \",[\"currentPage\"]],\"pagination.aria.page\":[\"Page \",[\"currentPage\"]],\"pagination.aria.pagination\":\"Pages\",\"pagination.aria.prev-page\":\"Previous page\"}");
\ No newline at end of file
+/*eslint-disable*/export const messages=JSON.parse("{\"pagination.aria.first-page\":\"First page\",\"pagination.aria.icon-suffix\":\"icon\",\"pagination.aria.next-page\":\"Next page\",\"pagination.label.current-page\":[\"Page \",[\"currentPage\"]],\"pagination.aria.page\":[\"Page \",[\"currentPage\"]],\"pagination.aria.pagination\":\"Pages\",\"pagination.aria.prev-page\":\"Previous page\"}");
\ No newline at end of file
diff --git a/packages/pagination/src/locales/en/messages.po b/packages/pagination/src/locales/en/messages.po
index f997f1c85..26768287b 100644
--- a/packages/pagination/src/locales/en/messages.po
+++ b/packages/pagination/src/locales/en/messages.po
@@ -14,45 +14,48 @@ msgstr ""
 "Plural-Forms: \n"
 "X-Crowdin-SourceKey: msgstr\n"
 
-#. Default screenreader message for first page button in the pagination component
+#. Default screenreader message for first page link in the pagination component
 #. js-lingui-explicit-id
-#: packages/pagination/src/react/FirstPage.tsx:36
+#: packages/pagination/src/FirstPage.tsx:37
 msgid "pagination.aria.first-page"
 msgstr "First page"
 
-#. Default screenreader message for next page button in the pagination component
+#. Suffix added at the end of icon titles when img semantics are lost on an html element
+#. Suffix added at the end of icon titles when img semantics are lost on an html element
+#. Suffix added at the end of icon titles when img semantics are lost on an html element
 #. js-lingui-explicit-id
-#: packages/pagination/src/react/NextPage.tsx:42
-msgid "pagination.aria.next-page"
-msgstr "Next page"
+#: packages/pagination/src/FirstPage.tsx:45
+#: packages/pagination/src/NextPage.tsx:45
+#: packages/pagination/src/PrevPage.tsx:47
+msgid "pagination.aria.icon-suffix"
+msgstr "icon"
 
-#. Default message for next page button in the pagination component
+#. Default screenreader message for next page link in the pagination component
 #. js-lingui-explicit-id
-#: packages/pagination/src/react/NextPage.tsx:51
-msgid "pagination.button.next-page"
+#: packages/pagination/src/NextPage.tsx:37
+msgid "pagination.aria.next-page"
 msgstr "Next page"
 
 #. Default message for current page label in the pagination component
 #. js-lingui-explicit-id
-#: packages/pagination/src/react/CurrentPage.tsx:23
+#: packages/pagination/src/CurrentPage.tsx:24
 msgid "pagination.label.current-page"
 msgstr "Page {currentPage}"
 
-#. Default screenreader message for page button in the pagination component
+#. Default screenreader message for page link in the pagination component
 #. js-lingui-explicit-id
-#: packages/pagination/src/react/Page.tsx:43
+#: packages/pagination/src/Page.tsx:39
 msgid "pagination.aria.page"
 msgstr "Page {currentPage}"
 
 #. Default screenreader message for pagination container in the pagination component
 #. js-lingui-explicit-id
-#: packages/pagination/src/react/PaginationContainer.tsx:68
+#: packages/pagination/src/PaginationContainer.tsx:69
 msgid "pagination.aria.pagination"
 msgstr "Pages"
 
-#. Default screenreader message for previous page button in the pagination component
+#. Default screenreader message for previous page link in the pagination component
 #. js-lingui-explicit-id
-#: packages/pagination/src/react/PrevPage.tsx:36
+#: packages/pagination/src/PrevPage.tsx:39
 msgid "pagination.aria.prev-page"
 msgstr "Previous page"
-
diff --git a/packages/pagination/src/locales/fi/messages.mjs b/packages/pagination/src/locales/fi/messages.mjs
index eee362b38..ccce8ef07 100644
--- a/packages/pagination/src/locales/fi/messages.mjs
+++ b/packages/pagination/src/locales/fi/messages.mjs
@@ -1 +1 @@
-/*eslint-disable*/export const messages=JSON.parse("{\"pagination.aria.first-page\":\"Ensimmäinen sivu\",\"pagination.aria.next-page\":\"Seuraava sivu\",\"pagination.button.next-page\":\"Seuraava sivu\",\"pagination.label.current-page\":[\"Sivu \",[\"currentPage\"]],\"pagination.aria.page\":[\"Sivu \",[\"currentPage\"]],\"pagination.aria.pagination\":\"Sivut\",\"pagination.aria.prev-page\":\"Edellinen sivu\"}");
\ No newline at end of file
+/*eslint-disable*/export const messages=JSON.parse("{\"pagination.aria.first-page\":\"Ensimmäinen sivu\",\"pagination.aria.icon-suffix\":\"kuvake\",\"pagination.aria.next-page\":\"Seuraava sivu\",\"pagination.label.current-page\":[\"Sivu \",[\"currentPage\"]],\"pagination.aria.page\":[\"Sivu \",[\"currentPage\"]],\"pagination.aria.pagination\":\"Sivut\",\"pagination.aria.prev-page\":\"Edellinen sivu\",\"pagination.button.next-page\":\"Seuraava sivu\"}");
\ No newline at end of file
diff --git a/packages/pagination/src/locales/fi/messages.po b/packages/pagination/src/locales/fi/messages.po
index a0cf28a1f..d37b57249 100644
--- a/packages/pagination/src/locales/fi/messages.po
+++ b/packages/pagination/src/locales/fi/messages.po
@@ -15,46 +15,56 @@ msgstr ""
 "X-Crowdin-Project-ID: 141\n"
 "X-Crowdin-Language: fi\n"
 "X-Crowdin-File-ID: 15506\n"
+"PO-Revision-Date: \n"
 
-#. Default screenreader message for first page button in the pagination component
+#. Default message for next page button in the pagination component
 #. js-lingui-explicit-id
-#: packages/pagination/src/react/FirstPage.tsx:36
+#: packages/pagination/src/react/NextPage.tsx:51
+#~ msgid "pagination.button.next-page"
+#~ msgstr "Seuraava sivu"
+
+#. Default screenreader message for first page link in the pagination component
+#. js-lingui-explicit-id
+#: packages/pagination/src/FirstPage.tsx:37
 msgid "pagination.aria.first-page"
 msgstr "Ensimmäinen sivu"
 
-#. Default screenreader message for next page button in the pagination component
+#. Suffix added at the end of icon titles when img semantics are lost on an html element
+#. Suffix added at the end of icon titles when img semantics are lost on an html element
+#. Suffix added at the end of icon titles when img semantics are lost on an html element
 #. js-lingui-explicit-id
-#: packages/pagination/src/react/NextPage.tsx:42
-msgid "pagination.aria.next-page"
-msgstr "Seuraava sivu"
+#: packages/pagination/src/FirstPage.tsx:45
+#: packages/pagination/src/NextPage.tsx:45
+#: packages/pagination/src/PrevPage.tsx:47
+msgid "pagination.aria.icon-suffix"
+msgstr "kuvake"
 
-#. Default message for next page button in the pagination component
+#. Default screenreader message for next page link in the pagination component
 #. js-lingui-explicit-id
-#: packages/pagination/src/react/NextPage.tsx:51
-msgid "pagination.button.next-page"
+#: packages/pagination/src/NextPage.tsx:37
+msgid "pagination.aria.next-page"
 msgstr "Seuraava sivu"
 
 #. Default message for current page label in the pagination component
 #. js-lingui-explicit-id
-#: packages/pagination/src/react/CurrentPage.tsx:23
+#: packages/pagination/src/CurrentPage.tsx:24
 msgid "pagination.label.current-page"
 msgstr "Sivu {currentPage}"
 
-#. Default screenreader message for page button in the pagination component
+#. Default screenreader message for page link in the pagination component
 #. js-lingui-explicit-id
-#: packages/pagination/src/react/Page.tsx:43
+#: packages/pagination/src/Page.tsx:39
 msgid "pagination.aria.page"
 msgstr "Sivu {currentPage}"
 
 #. Default screenreader message for pagination container in the pagination component
 #. js-lingui-explicit-id
-#: packages/pagination/src/react/PaginationContainer.tsx:68
+#: packages/pagination/src/PaginationContainer.tsx:69
 msgid "pagination.aria.pagination"
 msgstr "Sivut"
 
-#. Default screenreader message for previous page button in the pagination component
+#. Default screenreader message for previous page link in the pagination component
 #. js-lingui-explicit-id
-#: packages/pagination/src/react/PrevPage.tsx:36
+#: packages/pagination/src/PrevPage.tsx:39
 msgid "pagination.aria.prev-page"
 msgstr "Edellinen sivu"
-
diff --git a/packages/pagination/src/locales/nb/messages.mjs b/packages/pagination/src/locales/nb/messages.mjs
index 19a24748c..625a38018 100644
--- a/packages/pagination/src/locales/nb/messages.mjs
+++ b/packages/pagination/src/locales/nb/messages.mjs
@@ -1 +1 @@
-/*eslint-disable*/export const messages=JSON.parse("{\"pagination.aria.first-page\":\"Første side\",\"pagination.aria.next-page\":\"Neste side\",\"pagination.button.next-page\":\"Neste side\",\"pagination.label.current-page\":[\"Side \",[\"currentPage\"]],\"pagination.aria.page\":[\"Side \",[\"currentPage\"]],\"pagination.aria.pagination\":\"Sider\",\"pagination.aria.prev-page\":\"Forrige side\"}");
\ No newline at end of file
+/*eslint-disable*/export const messages=JSON.parse("{\"pagination.aria.first-page\":\"Første side\",\"pagination.aria.icon-suffix\":\"ikon\",\"pagination.aria.next-page\":\"Neste side\",\"pagination.label.current-page\":[\"Side \",[\"currentPage\"]],\"pagination.aria.page\":[\"Side \",[\"currentPage\"]],\"pagination.aria.pagination\":\"Sider\",\"pagination.aria.prev-page\":\"Forrige side\",\"pagination.button.next-page\":\"Neste side\"}");
\ No newline at end of file
diff --git a/packages/pagination/src/locales/nb/messages.po b/packages/pagination/src/locales/nb/messages.po
index 342331b89..cda6a53e6 100644
--- a/packages/pagination/src/locales/nb/messages.po
+++ b/packages/pagination/src/locales/nb/messages.po
@@ -15,46 +15,56 @@ msgstr ""
 "X-Crowdin-Project-ID: 141\n"
 "X-Crowdin-Language: nb\n"
 "X-Crowdin-File-ID: 15506\n"
+"PO-Revision-Date: \n"
 
-#. Default screenreader message for first page button in the pagination component
+#. Default message for next page button in the pagination component
 #. js-lingui-explicit-id
-#: packages/pagination/src/react/FirstPage.tsx:36
+#: packages/pagination/src/react/NextPage.tsx:51
+#~ msgid "pagination.button.next-page"
+#~ msgstr "Neste side"
+
+#. Default screenreader message for first page link in the pagination component
+#. js-lingui-explicit-id
+#: packages/pagination/src/FirstPage.tsx:37
 msgid "pagination.aria.first-page"
 msgstr "Første side"
 
-#. Default screenreader message for next page button in the pagination component
+#. Suffix added at the end of icon titles when img semantics are lost on an html element
+#. Suffix added at the end of icon titles when img semantics are lost on an html element
+#. Suffix added at the end of icon titles when img semantics are lost on an html element
 #. js-lingui-explicit-id
-#: packages/pagination/src/react/NextPage.tsx:42
-msgid "pagination.aria.next-page"
-msgstr "Neste side"
+#: packages/pagination/src/FirstPage.tsx:45
+#: packages/pagination/src/NextPage.tsx:45
+#: packages/pagination/src/PrevPage.tsx:47
+msgid "pagination.aria.icon-suffix"
+msgstr "ikon"
 
-#. Default message for next page button in the pagination component
+#. Default screenreader message for next page link in the pagination component
 #. js-lingui-explicit-id
-#: packages/pagination/src/react/NextPage.tsx:51
-msgid "pagination.button.next-page"
+#: packages/pagination/src/NextPage.tsx:37
+msgid "pagination.aria.next-page"
 msgstr "Neste side"
 
 #. Default message for current page label in the pagination component
 #. js-lingui-explicit-id
-#: packages/pagination/src/react/CurrentPage.tsx:23
+#: packages/pagination/src/CurrentPage.tsx:24
 msgid "pagination.label.current-page"
 msgstr "Side {currentPage}"
 
-#. Default screenreader message for page button in the pagination component
+#. Default screenreader message for page link in the pagination component
 #. js-lingui-explicit-id
-#: packages/pagination/src/react/Page.tsx:43
+#: packages/pagination/src/Page.tsx:39
 msgid "pagination.aria.page"
 msgstr "Side {currentPage}"
 
 #. Default screenreader message for pagination container in the pagination component
 #. js-lingui-explicit-id
-#: packages/pagination/src/react/PaginationContainer.tsx:68
+#: packages/pagination/src/PaginationContainer.tsx:69
 msgid "pagination.aria.pagination"
 msgstr "Sider"
 
-#. Default screenreader message for previous page button in the pagination component
+#. Default screenreader message for previous page link in the pagination component
 #. js-lingui-explicit-id
-#: packages/pagination/src/react/PrevPage.tsx:36
+#: packages/pagination/src/PrevPage.tsx:39
 msgid "pagination.aria.prev-page"
 msgstr "Forrige side"
-
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6378daa7f..b347caae0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,14 +15,14 @@ dependencies:
     specifier: 1.0.2
     version: 1.0.2
   '@warp-ds/css':
-    specifier: 1.8.1
-    version: 1.8.1
+    specifier: 1.8.2-next.2
+    version: 1.8.2-next.2
   '@warp-ds/icons':
     specifier: 2.0.0
     version: 2.0.0
   '@warp-ds/uno':
-    specifier: 1.8.0
-    version: 1.8.0
+    specifier: 1.8.1
+    version: 1.8.1
   react-focus-lock:
     specifier: 2.9.7
     version: 2.9.7(@types/react@18.2.55)(react@18.2.0)
@@ -5962,7 +5962,7 @@ packages:
       colorette: 2.0.20
       consola: 3.2.3
       fast-glob: 3.3.2
-      magic-string: 0.30.5
+      magic-string: 0.30.7
       pathe: 1.1.1
       perfect-debounce: 1.0.0
     transitivePeerDependencies:
@@ -5983,7 +5983,6 @@ packages:
 
   /@unocss/core@0.58.5:
     resolution: {integrity: sha512-qbPqL+46hf1/UelQOwUwpAuvm6buoss43DPYHOPdfNJ+NTWkSpATQMF0JKT04QE0QRQbHNSHdMe9ariG+IIlCw==}
-    dev: false
 
   /@unocss/extractor-arbitrary-variants@0.58.3:
     resolution: {integrity: sha512-QszC2atLcvzyoZFsjgtMBbILN4lrYI60iVRWdii+GGiKVtoIaKRWiA/3WERkvYGVPseVWOMflUpfxNeq+s9zUw==}
@@ -6017,7 +6016,7 @@ packages:
       '@unocss/rule-utils': 0.58.3
       css-tree: 2.3.1
       fast-glob: 3.3.2
-      magic-string: 0.30.5
+      magic-string: 0.30.7
       postcss: 8.4.34
     dev: true
 
@@ -6098,8 +6097,8 @@ packages:
     resolution: {integrity: sha512-0Px9gIW+VOKetZuYET19uamIRpk7A9c8sCzQuGlNvCLXKEWamqXz5asLtnvPzw6SwCXEQDgWXE9i+aeoXaM0Jg==}
     engines: {node: '>=14'}
     dependencies:
-      '@unocss/core': 0.58.3
-      magic-string: 0.30.5
+      '@unocss/core': 0.58.5
+      magic-string: 0.30.7
     dev: true
 
   /@unocss/rule-utils@0.58.5:
@@ -6165,7 +6164,7 @@ packages:
       '@unocss/transformer-directives': 0.58.3
       chokidar: 3.5.3
       fast-glob: 3.3.2
-      magic-string: 0.30.5
+      magic-string: 0.30.7
       vite: 5.0.12(@types/node@20.11.16)
     transitivePeerDependencies:
       - rollup
@@ -6293,11 +6292,11 @@ packages:
       '@floating-ui/dom': 0.5.4
     dev: false
 
-  /@warp-ds/css@1.8.1:
-    resolution: {integrity: sha512-NoI3ZycFEMdKTp1noZmJ8IFhBJzFIeTYzG/2x8VrDJ83t244DayfKxyMl0c6sEGRsakvMUJOEBe6LlH8vwpNMw==}
+  /@warp-ds/css@1.8.2-next.2:
+    resolution: {integrity: sha512-PPAJ7l8RO26Mvwk3XxWOCwidDTCjE6rJpHGphcXEE0rm1B4NuDuxnPsg+HLSTDt1s7I+lRkizniAhhgCo3kyUw==}
     dependencies:
-      '@warp-ds/tokenizer': 0.0.3
-      '@warp-ds/uno': 1.8.0
+      '@warp-ds/tokenizer': 0.0.4
+      '@warp-ds/uno': 1.8.1
     dev: false
 
   /@warp-ds/icons@2.0.0:
@@ -6306,15 +6305,15 @@ packages:
       '@lingui/core': 4.7.0
     dev: false
 
-  /@warp-ds/tokenizer@0.0.3:
-    resolution: {integrity: sha512-7e1/gquOPcSIUNbk6GutvvGJwneWQ2bmTvxnwi+qyuSF+h4yQvuy2XncS8EtNjb3e+xDkVA7B+9wNM9Am6A47w==}
+  /@warp-ds/tokenizer@0.0.4:
+    resolution: {integrity: sha512-D4qIUQdY0Tp23OpeR6P9T5QXpsr9crN/FusHWN+975Yk5WoWZOMAf7SVyvgFKV0uq5s70I3qlZqjT51khMwPNQ==}
     dependencies:
       glob: 10.3.10
       yaml: 2.3.4
     dev: false
 
-  /@warp-ds/uno@1.8.0:
-    resolution: {integrity: sha512-UAW4yy/OnhrCxqwhw/d3WIl1W4Z3UZzbeC4EU78p6e/UiXkEoY8HuIhLMzX0P+SSVsidQuei5VFJd3qGQB6wIA==}
+  /@warp-ds/uno@1.8.1:
+    resolution: {integrity: sha512-khmp3D4MiKOzQ4gHVGHDOPuKsefr7J1Tim62lZjuDZba3t9Mjx2Wd5InfgL5eY3uqV6JTLZHxlPfh9TkhcS8vg==}
     dependencies:
       '@unocss/core': 0.58.5
       '@unocss/preset-mini': 0.58.5
@@ -11808,13 +11807,6 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.15
     dev: true
 
-  /magic-string@0.30.5:
-    resolution: {integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==}
-    engines: {node: '>=12'}
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true
-
   /magic-string@0.30.7:
     resolution: {integrity: sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==}
     engines: {node: '>=12'}
diff --git a/tests/components/PaginationTest.tsx b/tests/components/PaginationTest.tsx
index 96798fd88..357d2da9c 100644
--- a/tests/components/PaginationTest.tsx
+++ b/tests/components/PaginationTest.tsx
@@ -25,13 +25,13 @@ describe('Pagination component', () => {
         expect(heading).toHaveTextContent('Pages');
     });
 
-    it('renders correct number of buttons', () => {
-        expect(screen.getAllByRole('button')).toHaveLength(5);
+    it('renders correct number of links', () => {
+        expect(screen.getAllByRole('link')).toHaveLength(4);
     });
 
     it('calls on change function on click of next page', () => {
-        expect(screen.getAllByRole('button', { name: 'Next page' })[0]).toHaveTextContent('Next page');
-        fireEvent.click(screen.getAllByRole('button', { name: 'Next page' })[0]);
+        expect(screen.getByRole('link', { name: 'Next page, icon' })).toHaveTextContent('Rightward arrow');
+        fireEvent.click(screen.getByRole('link', { name: 'Next page, icon' }));
 
         expect(onChangeFunction).toHaveBeenCalledTimes(1);
         expect(onChangeFunction).toHaveBeenCalledWith(1);

From 6caf68b73eeb19651e9bf0748cc4b684b7e2a314 Mon Sep 17 00:00:00 2001
From: BalbinaK <balbuhhha@gmail.com>
Date: Thu, 15 Feb 2024 09:48:38 +0100
Subject: [PATCH 12/13] chore(deps): update @warp-ds/css to 1.8.2

---
 package.json   | 2 +-
 pnpm-lock.yaml | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index d71e9c799..2e504c2e6 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,7 @@
     "@chbphone55/classnames": "2.0.0",
     "@lingui/core": "4.7.0",
     "@warp-ds/core": "1.0.2",
-    "@warp-ds/css": "1.8.2-next.2",
+    "@warp-ds/css": "1.8.2",
     "@warp-ds/icons": "2.0.0",
     "@warp-ds/uno": "1.8.1",
     "react-focus-lock": "2.9.7",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b347caae0..78e2d8b1b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,8 +15,8 @@ dependencies:
     specifier: 1.0.2
     version: 1.0.2
   '@warp-ds/css':
-    specifier: 1.8.2-next.2
-    version: 1.8.2-next.2
+    specifier: 1.8.2
+    version: 1.8.2
   '@warp-ds/icons':
     specifier: 2.0.0
     version: 2.0.0
@@ -6292,8 +6292,8 @@ packages:
       '@floating-ui/dom': 0.5.4
     dev: false
 
-  /@warp-ds/css@1.8.2-next.2:
-    resolution: {integrity: sha512-PPAJ7l8RO26Mvwk3XxWOCwidDTCjE6rJpHGphcXEE0rm1B4NuDuxnPsg+HLSTDt1s7I+lRkizniAhhgCo3kyUw==}
+  /@warp-ds/css@1.8.2:
+    resolution: {integrity: sha512-Ql4AbDy7Rhj/yBngtZU1DOwh2xU+lQJhhcV8qBPdVv08s00DNLbnPoSewzKNvfjTYPfyISl0ZWMGQMY06qHdkw==}
     dependencies:
       '@warp-ds/tokenizer': 0.0.4
       '@warp-ds/uno': 1.8.1

From 7dbc914181cba348cfb5c6c366ca6c80ba52bc96 Mon Sep 17 00:00:00 2001
From: BalbinaK <balbuhhha@gmail.com>
Date: Thu, 15 Feb 2024 09:57:45 +0100
Subject: [PATCH 13/13] fix: fi and nb locales after removing next page button
 messages

---
 packages/pagination/src/locales/fi/messages.mjs | 2 +-
 packages/pagination/src/locales/fi/messages.po  | 6 ------
 packages/pagination/src/locales/nb/messages.mjs | 2 +-
 packages/pagination/src/locales/nb/messages.po  | 6 ------
 4 files changed, 2 insertions(+), 14 deletions(-)

diff --git a/packages/pagination/src/locales/fi/messages.mjs b/packages/pagination/src/locales/fi/messages.mjs
index ccce8ef07..51d00f64b 100644
--- a/packages/pagination/src/locales/fi/messages.mjs
+++ b/packages/pagination/src/locales/fi/messages.mjs
@@ -1 +1 @@
-/*eslint-disable*/export const messages=JSON.parse("{\"pagination.aria.first-page\":\"Ensimmäinen sivu\",\"pagination.aria.icon-suffix\":\"kuvake\",\"pagination.aria.next-page\":\"Seuraava sivu\",\"pagination.label.current-page\":[\"Sivu \",[\"currentPage\"]],\"pagination.aria.page\":[\"Sivu \",[\"currentPage\"]],\"pagination.aria.pagination\":\"Sivut\",\"pagination.aria.prev-page\":\"Edellinen sivu\",\"pagination.button.next-page\":\"Seuraava sivu\"}");
\ No newline at end of file
+/*eslint-disable*/export const messages=JSON.parse("{\"pagination.aria.first-page\":\"Ensimmäinen sivu\",\"pagination.aria.icon-suffix\":\"kuvake\",\"pagination.aria.next-page\":\"Seuraava sivu\",\"pagination.label.current-page\":[\"Sivu \",[\"currentPage\"]],\"pagination.aria.page\":[\"Sivu \",[\"currentPage\"]],\"pagination.aria.pagination\":\"Sivut\",\"pagination.aria.prev-page\":\"Edellinen sivu\"}");
\ No newline at end of file
diff --git a/packages/pagination/src/locales/fi/messages.po b/packages/pagination/src/locales/fi/messages.po
index d37b57249..6351fda53 100644
--- a/packages/pagination/src/locales/fi/messages.po
+++ b/packages/pagination/src/locales/fi/messages.po
@@ -17,12 +17,6 @@ msgstr ""
 "X-Crowdin-File-ID: 15506\n"
 "PO-Revision-Date: \n"
 
-#. Default message for next page button in the pagination component
-#. js-lingui-explicit-id
-#: packages/pagination/src/react/NextPage.tsx:51
-#~ msgid "pagination.button.next-page"
-#~ msgstr "Seuraava sivu"
-
 #. Default screenreader message for first page link in the pagination component
 #. js-lingui-explicit-id
 #: packages/pagination/src/FirstPage.tsx:37
diff --git a/packages/pagination/src/locales/nb/messages.mjs b/packages/pagination/src/locales/nb/messages.mjs
index 625a38018..ffc31535f 100644
--- a/packages/pagination/src/locales/nb/messages.mjs
+++ b/packages/pagination/src/locales/nb/messages.mjs
@@ -1 +1 @@
-/*eslint-disable*/export const messages=JSON.parse("{\"pagination.aria.first-page\":\"Første side\",\"pagination.aria.icon-suffix\":\"ikon\",\"pagination.aria.next-page\":\"Neste side\",\"pagination.label.current-page\":[\"Side \",[\"currentPage\"]],\"pagination.aria.page\":[\"Side \",[\"currentPage\"]],\"pagination.aria.pagination\":\"Sider\",\"pagination.aria.prev-page\":\"Forrige side\",\"pagination.button.next-page\":\"Neste side\"}");
\ No newline at end of file
+/*eslint-disable*/export const messages=JSON.parse("{\"pagination.aria.first-page\":\"Første side\",\"pagination.aria.icon-suffix\":\"ikon\",\"pagination.aria.next-page\":\"Neste side\",\"pagination.label.current-page\":[\"Side \",[\"currentPage\"]],\"pagination.aria.page\":[\"Side \",[\"currentPage\"]],\"pagination.aria.pagination\":\"Sider\",\"pagination.aria.prev-page\":\"Forrige side\"}");
\ No newline at end of file
diff --git a/packages/pagination/src/locales/nb/messages.po b/packages/pagination/src/locales/nb/messages.po
index cda6a53e6..e4210dc4e 100644
--- a/packages/pagination/src/locales/nb/messages.po
+++ b/packages/pagination/src/locales/nb/messages.po
@@ -17,12 +17,6 @@ msgstr ""
 "X-Crowdin-File-ID: 15506\n"
 "PO-Revision-Date: \n"
 
-#. Default message for next page button in the pagination component
-#. js-lingui-explicit-id
-#: packages/pagination/src/react/NextPage.tsx:51
-#~ msgid "pagination.button.next-page"
-#~ msgstr "Neste side"
-
 #. Default screenreader message for first page link in the pagination component
 #. js-lingui-explicit-id
 #: packages/pagination/src/FirstPage.tsx:37