fix: Prevent focus from being lost when pagination previous/next buttons are disabled

pages/pagination/simple.page.tsx

@@ -0,0 +1,52 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import I18nProvider from '~components/i18n';
+import messages from '~components/i18n/messages/all.en';
+import Pagination, { PaginationProps } from '~components/pagination';
+
+import ScreenshotArea from '../utils/screenshot-area';
+
+const paginationLabels: PaginationProps.Labels = {
+  nextPageLabel: 'Next page',
+  previousPageLabel: 'Previous page',
+  pageLabel: pageNumber => `Page ${pageNumber} of all pages`,
+  jumpToPageButton: 'Go to page',
+};
+
+const i18nStrings: PaginationProps.I18nStrings = {
+  jumpToPageInputLabel: 'Page number',
+  jumpToPageError: 'Enter a valid page number',
+  jumpToPageLoadingText: 'Loading page',
+};
+
+export default function PaginationSimplePage() {
+  const [basicPageIndex, setBasicPageIndex] = useState(1);
+  const [jumpPageIndex, setJumpPageIndex] = useState(1);
+
+  return (
+    <I18nProvider messages={[messages]} locale="en">
+      <h1>Pagination simple</h1>
+      <ScreenshotArea>
+        <h2>Basic pagination with 20 pages</h2>
+        <Pagination
+          currentPageIndex={basicPageIndex}
+          pagesCount={20}
+          ariaLabels={paginationLabels}
+          onChange={event => setBasicPageIndex(event.detail.currentPageIndex)}
+        />
+
+        <h2>Basic pagination with jump to page</h2>
+        <Pagination
+          currentPageIndex={jumpPageIndex}
+          pagesCount={20}
+          ariaLabels={paginationLabels}
+          i18nStrings={i18nStrings}
+          jumpToPage={{}}
+          onChange={event => setJumpPageIndex(event.detail.currentPageIndex)}
+        />
+      </ScreenshotArea>
+    </I18nProvider>
+  );
+}

src/pagination/__tests__/pagination.test.tsx

@@ -47,24 +47,24 @@ test('should re-render component correctly after current page state change', ()
 
 test('should have both arrows disabled when there is only one page', () => {
   const { wrapper } = renderPagination(<Pagination currentPageIndex={1} pagesCount={1} />);
-  expect(wrapper.findPreviousPageButton().getElement()).toBeDisabled();
-  expect(wrapper.findNextPageButton().getElement()).toBeDisabled();
+  expect(wrapper.findPreviousPageButton().getElement()).toHaveAttribute('aria-disabled', 'true');
+  expect(wrapper.findNextPageButton().getElement()).toHaveAttribute('aria-disabled', 'true');
   expect(wrapper.findPageNumberByIndex(1)!.getElement()).toHaveTextContent('1');
   expect(getItemsContent(wrapper)).toEqual(['1']);
 });
 
 test('should have both arrows disabled when there are no pages', () => {
   const { wrapper } = renderPagination(<Pagination currentPageIndex={1} pagesCount={0} />);
-  expect(wrapper.findPreviousPageButton().getElement()).toBeDisabled();
-  expect(wrapper.findNextPageButton().getElement()).toBeDisabled();
+  expect(wrapper.findPreviousPageButton().getElement()).toHaveAttribute('aria-disabled', 'true');
+  expect(wrapper.findNextPageButton().getElement()).toHaveAttribute('aria-disabled', 'true');
   expect(wrapper.findPageNumberByIndex(1)!.getElement()).toHaveTextContent('1');
   expect(getItemsContent(wrapper)).toEqual(['1']);
 });
 
 test('should show all buttons when middle page selected', () => {
   const { wrapper } = renderPagination(<Pagination currentPageIndex={5} pagesCount={9} />);
-  expect(wrapper.findPreviousPageButton().getElement()).toBeEnabled();
-  expect(wrapper.findNextPageButton().getElement()).toBeEnabled();
+  expect(wrapper.findPreviousPageButton().getElement()).not.toHaveAttribute('aria-disabled');
+  expect(wrapper.findNextPageButton().getElement()).not.toHaveAttribute('aria-disabled');
   expect(wrapper.findCurrentPage().getElement()).toHaveTextContent('5');
   expect(getItemsContent(wrapper)).toEqual(['1', '2', '3', '4', '5', '6', '7', '8', '9']);
 });
@@ -86,8 +86,8 @@ test('should not fire nextPageClick event when clicking next page with the last
     test('should disable `previous` button when first page selected', () => {
       const { wrapper } = renderPagination(<Pagination currentPageIndex={1} pagesCount={10} openEnd={openEnd} />);
 
-      expect(wrapper.findPreviousPageButton().getElement()).toBeDisabled();
-      expect(wrapper.findNextPageButton().getElement()).toBeEnabled();
+      expect(wrapper.findPreviousPageButton().getElement()).toHaveAttribute('aria-disabled', 'true');
+      expect(wrapper.findNextPageButton().getElement()).not.toHaveAttribute('aria-disabled');
       expect(wrapper.findCurrentPage().getElement()).toHaveTextContent('1');
     });
 
@@ -189,8 +189,8 @@ test('should not fire nextPageClick event when clicking next page with the last
       );
 
       expect(wrapper.isDisabled()).toBe(true);
-      expect(wrapper.findPreviousPageButton().getElement()).toBeDisabled();
-      expect(wrapper.findNextPageButton().getElement()).toBeDisabled();
+      expect(wrapper.findPreviousPageButton().getElement()).toHaveAttribute('aria-disabled', 'true');
+      expect(wrapper.findNextPageButton().getElement()).toHaveAttribute('aria-disabled', 'true');
 
       wrapper.findPreviousPageButton().click();
       expect(onChange).not.toHaveBeenCalled();

src/pagination/internal.tsx

@@ -47,6 +47,9 @@ function PageButton({
   ...rest
 }: PageButtonProps) {
   function handleClick(event: React.MouseEvent) {
+    if (disabled) {
+      return;
+    }
     event.preventDefault();
     onClick(pageIndex);
   }
@@ -61,7 +64,8 @@ function PageButton({
         )}
         type="button"
         aria-label={ariaLabel}
-        disabled={disabled}
+        aria-disabled={disabled ? true : undefined}
+        tabIndex={disabled ? -1 : 0}
         onClick={handleClick}
         aria-current={isCurrent}
         {...(disabled

src/table/__tests__/hooks-integration.test.tsx

@@ -82,10 +82,10 @@ test('should apply filtering and display no-match state', () => {
 test('should navigate through pagination', () => {
   const { tableWrapper, paginationWrapper } = renderDemo(<Demo />);
   expect(tableWrapper.findBodyCell(1, 1)!.getElement().textContent).toEqual('1');
-  expect(paginationWrapper.findPreviousPageButton().getElement()).toBeDisabled();
+  expect(paginationWrapper.findPreviousPageButton().getElement()).toHaveAttribute('aria-disabled', 'true');
   paginationWrapper.findNextPageButton().click();
   expect(tableWrapper.findBodyCell(1, 1)!.getElement().textContent).toEqual('11');
-  expect(paginationWrapper.findPreviousPageButton().getElement()).toBeEnabled();
+  expect(paginationWrapper.findPreviousPageButton().getElement()).not.toHaveAttribute('aria-disabled');
   paginationWrapper.findPageNumberByIndex(4)!.click();
   expect(tableWrapper.findBodyCell(1, 1)!.getElement().textContent).toEqual('31');
 });
@@ -95,7 +95,7 @@ test('pagination should work when filtering is applied', () => {
   expect(tableWrapper.findBodyCell(1, 1)!.getElement().textContent).toEqual('1');
   expect(paginationWrapper.findPageNumbers()).toHaveLength(2);
   paginationWrapper.findNextPageButton().click();
-  expect(paginationWrapper.findNextPageButton().getElement()).toBeDisabled();
+  expect(paginationWrapper.findNextPageButton().getElement()).toHaveAttribute('aria-disabled', 'true');
   expect(tableWrapper.findBodyCell(1, 1)!.getElement().textContent).toEqual('19');
 });