diff --git a/.changeset/neat-houses-think.md b/.changeset/neat-houses-think.md new file mode 100644 index 0000000000..27863b7fc4 --- /dev/null +++ b/.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;` diff --git a/.changeset/six-grapes-jump.md b/.changeset/six-grapes-jump.md new file mode 100644 index 0000000000..1895ca41db --- /dev/null +++ b/.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 diff --git a/packages/css/src/pagination.css b/packages/css/src/pagination.css index 995698d16a..550a33ee9d 100644 --- a/packages/css/src/pagination.css +++ b/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: ''; diff --git a/packages/react/src/utilities/hooks/use-pagination/use-pagination.test.tsx b/packages/react/src/utilities/hooks/use-pagination/use-pagination.test.tsx index 0c868f54ae..ce85e0796a 100644 --- a/packages/react/src/utilities/hooks/use-pagination/use-pagination.test.tsx +++ b/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; 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; const { result } = renderHook(() => diff --git a/packages/react/src/utilities/hooks/use-pagination/use-pagination.ts b/packages/react/src/utilities/hooks/use-pagination/use-pagination.ts index 325dbe4c90..0c7bef307f 100644 --- a/packages/react/src/utilities/hooks/use-pagination/use-pagination.ts +++ b/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,