feat(use-pagination): hide prev/next button instead of disabling (#4123)

Author: Barsnes

.changeset/neat-houses-think.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+**pagination**: If direct child of `li` has `aria-hidden="true"` it sets `visibility: hidden;`

.changeset/six-grapes-jump.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+**usePagination**: Hide prev/next buttons with `aria-hidden="true"` and `visibility: hidden;` instead of disabling

packages/css/src/pagination.css

@@ -15,6 +15,10 @@
       display: flex;
     }
 
+    & > li > [aria-hidden='true'] {
+      visibility: hidden;
+    }
+
     & > li:first-child > ::before,
     & > li:last-child > ::before {
       content: '';

packages/react/src/utilities/hooks/use-pagination/use-pagination.test.tsx

@@ -37,29 +37,29 @@ describe('usePagination', () => {
     }
   });
 
-  it('should prevet previous when at start', () => {
+  it('should prevent previous when at start', () => {
     const { result } = renderHook(() =>
       usePagination({ totalPages: 10, currentPage: 1 }),
     );
 
     expect(result.current.hasPrev).toBe(false);
     expect(result.current.hasNext).toBe(true);
-    expect(result.current.prevButtonProps['aria-disabled']).toBe(true);
-    expect(result.current.nextButtonProps['aria-disabled']).toBe(false);
+    expect(result.current.prevButtonProps['aria-hidden']).toBe(true);
+    expect(result.current.nextButtonProps['aria-hidden']).toBe(false);
   });
 
-  it('should prevet next when at end', () => {
+  it('should prevent next when at end', () => {
     const { result } = renderHook(() =>
       usePagination({ totalPages: 10, currentPage: 10 }),
     );
 
     expect(result.current.hasPrev).toBe(true);
     expect(result.current.hasNext).toBe(false);
-    expect(result.current.prevButtonProps['aria-disabled']).toBe(false);
-    expect(result.current.nextButtonProps['aria-disabled']).toBe(true);
+    expect(result.current.prevButtonProps['aria-hidden']).toBe(false);
+    expect(result.current.nextButtonProps['aria-hidden']).toBe(true);
   });
 
-  it('should trigger onChange when clickinging button', async () => {
+  it('should trigger onChange when clicking button', async () => {
     const mockOnChange = vi.fn();
     const event = { preventDefault: () => {} } as MouseEvent<HTMLButtonElement>;
     const { result } = renderHook(() =>
@@ -71,7 +71,7 @@ describe('usePagination', () => {
     expect(mockOnChange).toHaveBeenCalledWith(event, 2);
   });
 
-  it('should not trigger onChange when clickinging previous button and in start', async () => {
+  it('should not trigger onChange when clicking previous button and in start', async () => {
     const mockOnChange = vi.fn();
     const event = { preventDefault: () => {} } as MouseEvent<HTMLButtonElement>;
     const { result } = renderHook(() =>

packages/react/src/utilities/hooks/use-pagination/use-pagination.ts

@@ -114,13 +114,13 @@ export const usePagination = ({
       ),
       /** Properties to spread on Pagination.Button used for previous naviagation */
       prevButtonProps: {
-        'aria-disabled': !hasPrev, // Using aria-disabled to support all HTML elements because of potential asChild
+        'aria-hidden': !hasPrev, // Using aria-hidden to support all HTML elements because of potential asChild
         onClick: handleClick(currentPage - 1),
         variant: 'tertiary',
       } as PaginationButtonProps,
       /** Properties to spread on Pagination.Button used for next naviagation */
       nextButtonProps: {
-        'aria-disabled': !hasNext, // Using aria-disabled to support all HTML elements because of potential asChild
+        'aria-hidden': !hasNext, // Using aria-hidden to support all HTML elements because of potential asChild
         onClick: handleClick(currentPage + 1),
         variant: 'tertiary',
       } as PaginationButtonProps,