fix(ui-react): Pagination current item a11y (#2336)

* change Flex to render as button, add aria-current attribute

* update test

* Create eighty-snails-push.md

* small change to currentPageLabel

* update docs

* updated unit test

* change aria-current to 'page', remove irrelevant comment

* update test

Co-authored-by: Joe Buono <[email protected]>

Author: joebuono

.changeset/eighty-snails-push.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+fix(ui-react): Improve accessibility of Pagination current item button

docs/src/pages/[platform]/components/pagination/react.mdx

@@ -92,7 +92,7 @@ Use the following props to customize these labels:
 
 - **`nextLabel`**: Set the `aria-label` for the next page button (defaults to `Go to next page`)
 
-- **`currentPageLabel`**: Set the `VisuallyHidden` label for current page (defaults to `Current Page:`). This will be used to construct the label text for current page. e.g, `Current Page: 1` if page `1` is the current page.
+- **`currentPageLabel`**: Set the `VisuallyHidden` label for current page (defaults to `Page`). This will be used to construct the label text for current page. e.g, `Page: 1` if page `1` is the current page.
 
 - **`pageLabel`**: Set the label for each page button other than the current page (defaults to `Go to page`). This will be used to construct the `aria-label`. e.g, `Go to page 1` for page `1` button.
 

packages/react/src/primitives/Pagination/PaginationItem.tsx

@@ -60,16 +60,13 @@ export const PaginationItem: React.FC<PaginationItemProps> = ({
         <View as="li">
           {page === currentPage ? (
             <Flex
-              as="span"
+              aria-current="page"
+              as="button"
               className={ComponentClassNames.PaginationItemCurrent}
               testId={PAGINATION_CURRENT_TEST_ID}
               {...rest}
             >
-              {/**
-               * Use markup to indicate the current item of a menu, such as the current page on a website, to improve orientation in the menu.
-               * @link https://www.w3.org/WAI/tutorials/menus/structure/#indicate-the-current-item
-               */}
-              <VisuallyHidden>{currentPageLabel}</VisuallyHidden>
+              <VisuallyHidden>{currentPageLabel}:</VisuallyHidden>
               {page}
             </Flex>
           ) : (

packages/react/src/primitives/Pagination/__tests__/Pagination.test.tsx

@@ -328,12 +328,13 @@ describe('Pagination component: ', () => {
         />
       );
       const pageItem = await screen.findByText('1');
-      expect(pageItem.nodeName).toBe('SPAN');
+      expect(pageItem.nodeName).toBe('BUTTON');
       expect(pageItem).toHaveClass(ComponentClassNames.PaginationItemCurrent);
       const invisibleLabel = await screen.findByText(
-        ComponentText.PaginationItem.currentPageLabel
+        `${ComponentText.PaginationItem.currentPageLabel}:`
       );
       expect(invisibleLabel).toHaveClass(ComponentClassNames.VisuallyHidden);
+      expect(pageItem.getAttribute('aria-current')).toBe('page');
 
       userEvent.click(pageItem);
       expect(mockOnClick).not.toHaveBeenCalled();
@@ -353,6 +354,7 @@ describe('Pagination component: ', () => {
       );
       expect(previous.nodeName).toBe('BUTTON');
       expect(previous).not.toBeDisabled();
+      expect(previous.getAttribute('aria-current')).toBe(null);
       userEvent.click(previous);
       expect(mockOnClick).toHaveBeenCalledTimes(1);
       expect(mockOnClick).toHaveBeenCalledWith();
@@ -367,12 +369,14 @@ describe('Pagination component: ', () => {
           onClick={mockOnClick}
         />
       );
-      const previous = await screen.findByLabelText(
+      const next = await screen.findByLabelText(
         ComponentText.PaginationItem.nextLabel
       );
-      expect(previous.nodeName).toBe('BUTTON');
-      expect(previous).not.toBeDisabled();
-      userEvent.click(previous);
+      expect(next.nodeName).toBe('BUTTON');
+      expect(next).not.toBeDisabled();
+      expect(next.getAttribute('aria-current')).toBe(null);
+
+      userEvent.click(next);
       expect(mockOnClick).toHaveBeenCalledTimes(1);
       expect(mockOnClick).toHaveBeenCalledWith();
     });

packages/react/src/primitives/shared/constants.ts

@@ -661,7 +661,7 @@ export const ComponentText = {
     clearButtonLabel: 'Clear input',
   },
   PaginationItem: {
-    currentPageLabel: 'Current Page:',
+    currentPageLabel: 'Page',
     nextLabel: 'Go to next page',
     pageLabel: 'Go to page',
     previousLabel: 'Go to previous page',