fix(Pagination): announce page size selected state and active pager (ENG-209890, ENG-209864)

src/components/Carousel/Tests/__snapshots__/Slide.test.tsx.snap

@@ -35,7 +35,7 @@ exports[`Slide loads and displays Carousel component 1`] = `
       >
         <li>
           <button
-            aria-current="true"
+            aria-current="page"
             aria-disabled="false"
             aria-label="page 1 of 3"
             class="pagination-button active button button-neutral button-medium"
@@ -49,7 +49,6 @@ exports[`Slide loads and displays Carousel component 1`] = `
         </li>
         <li>
           <button
-            aria-current="false"
             aria-disabled="false"
             aria-label="page 2 of 3"
             class="pagination-button button button-neutral button-medium"
@@ -63,7 +62,6 @@ exports[`Slide loads and displays Carousel component 1`] = `
         </li>
         <li>
           <button
-            aria-current="false"
             aria-disabled="false"
             aria-label="page 3 of 3"
             class="pagination-button button button-neutral button-medium"

src/components/Pagination/Pager.tsx

@@ -173,7 +173,7 @@ export const Pager: FC<PagerProps> = React.forwardRef(
         {pageCount > 0 && (
           <li>
             <Button
-              aria-current={currentPage === 1}
+              aria-current={currentPage === 1 ? 'page' : undefined}
               classNames={mergeClasses([
                 styles.paginationButton,
                 { [styles.active]: currentPage === 1 },
@@ -231,7 +231,7 @@ export const Pager: FC<PagerProps> = React.forwardRef(
         {_pagers?.map((pager, idx) => (
           <li key={idx}>
             <Button
-              aria-current={currentPage === pager}
+              aria-current={currentPage === pager ? 'page' : undefined}
               classNames={mergeClasses([
                 styles.paginationButton,
                 {
@@ -294,7 +294,7 @@ export const Pager: FC<PagerProps> = React.forwardRef(
         {pageCount > 1 && showLast && (
           <li>
             <Button
-              aria-current={currentPage === pageCount}
+              aria-current={currentPage === pageCount ? 'page' : undefined}
               classNames={mergeClasses([
                 styles.paginationButton,
                 {

src/components/Pagination/Pagination.test.tsx

@@ -244,4 +244,26 @@ describe('Pagination', () => {
     );
     expect(onCurrentChange).toHaveBeenCalledWith(4);
   });
+
+  test('Pagination active pager button uses aria-current="page"', () => {
+    const assertAriaCurrent = (currentPage: number, activeText: string) => {
+      const { container, unmount } = render(
+        <Pagination
+          currentPage={currentPage}
+          onCurrentChange={() => {}}
+          pageSize={10}
+          total={50}
+        />
+      );
+      const current = container.querySelectorAll('.pager li [aria-current]');
+      expect(current).toHaveLength(1);
+      expect(current[0].getAttribute('aria-current')).toBe('page');
+      expect(current[0].textContent).toBe(activeText);
+      unmount();
+    };
+
+    assertAriaCurrent(1, '1');
+    assertAriaCurrent(3, '3');
+    assertAriaCurrent(5, '5');
+  });
 });

src/components/Pagination/Pagination.tsx

@@ -1,13 +1,6 @@
 'use client';
 
-import React, {
-  FC,
-  Ref,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import React, { FC, Ref, useContext, useEffect, useRef, useState } from 'react';
 import GradientContext, { Gradient } from '../ConfigProvider/GradientContext';
 import { OcThemeName } from '../ConfigProvider';
 import ThemeContext, {
@@ -344,14 +337,22 @@ export const Pagination: FC<PaginationProps> = React.forwardRef(
       const getItems = (): MenuItemButtonProps[] => {
         return pageSizes.map((item?: number, idx?: number) => ({
           rowkey: idx,
+          role: 'option',
+          'aria-selected': item === _pageSize,
           text:
             htmlDir === 'ltr'
               ? `${item} / ${pageSizeText}`
               : `${pageSizeText} / ${item}`,
           value: item,
         }));
       };
-      return <Menu onChange={onSizeChangeHandler} items={getItems()} />;
+      return (
+        <Menu
+          onChange={onSizeChangeHandler}
+          items={getItems()}
+          role="presentation"
+        />
+      );
     };
 
     const moreThanOnePage: boolean = getPageCount() > 1;
@@ -391,6 +392,7 @@ export const Pagination: FC<PaginationProps> = React.forwardRef(
                       ) && (
                         <span className={styles.sizes} key="sizes">
                           <Dropdown
+                            ariaHaspopupValue="listbox"
                             overlay={Overlay(_pageSizes)}
                             onVisibleChange={setToggle}
                           >

src/components/Pagination/__snapshots__/Pagination.test.tsx.snap

@@ -33,7 +33,7 @@ exports[`Pagination Pagination should render as dots 1`] = `
     >
       <li>
         <button
-          aria-current="true"
+          aria-current="page"
           aria-disabled="false"
           aria-label="page 1 of 5"
           class="pagination-button active button button-neutral button-medium"
@@ -47,7 +47,6 @@ exports[`Pagination Pagination should render as dots 1`] = `
       </li>
       <li>
         <button
-          aria-current="false"
           aria-disabled="false"
           aria-label="page 2 of 5"
           class="pagination-button button button-neutral button-medium"
@@ -61,7 +60,6 @@ exports[`Pagination Pagination should render as dots 1`] = `
       </li>
       <li>
         <button
-          aria-current="false"
           aria-disabled="false"
           aria-label="page 3 of 5"
           class="pagination-button button button-neutral button-medium"
@@ -75,7 +73,6 @@ exports[`Pagination Pagination should render as dots 1`] = `
       </li>
       <li>
         <button
-          aria-current="false"
           aria-disabled="false"
           aria-label="page 4 of 5"
           class="pagination-button button button-neutral button-medium"
@@ -89,7 +86,6 @@ exports[`Pagination Pagination should render as dots 1`] = `
       </li>
       <li>
         <button
-          aria-current="false"
           aria-disabled="false"
           aria-label="page 5 of 5"
           class="pagination-button button button-neutral button-medium"
@@ -226,7 +222,7 @@ exports[`Pagination Pagination should render normally 1`] = `
     >
       <li>
         <button
-          aria-current="true"
+          aria-current="page"
           aria-disabled="false"
           aria-label="page 1 of 5"
           class="pagination-button active button button-neutral button-medium"
@@ -240,7 +236,6 @@ exports[`Pagination Pagination should render normally 1`] = `
       </li>
       <li>
         <button
-          aria-current="false"
           aria-disabled="false"
           aria-label="page 2 of 5"
           class="pagination-button button button-neutral button-medium"
@@ -254,7 +249,6 @@ exports[`Pagination Pagination should render normally 1`] = `
       </li>
       <li>
         <button
-          aria-current="false"
           aria-disabled="false"
           aria-label="page 3 of 5"
           class="pagination-button button button-neutral button-medium"
@@ -268,7 +262,6 @@ exports[`Pagination Pagination should render normally 1`] = `
       </li>
       <li>
         <button
-          aria-current="false"
           aria-disabled="false"
           aria-label="page 4 of 5"
           class="pagination-button button button-neutral button-medium"
@@ -282,7 +275,6 @@ exports[`Pagination Pagination should render normally 1`] = `
       </li>
       <li>
         <button
-          aria-current="false"
           aria-disabled="false"
           aria-label="page 5 of 5"
           class="pagination-button button button-neutral button-medium"
@@ -335,6 +327,7 @@ exports[`Pagination Pagination should render with all elements 1`] = `
           aria-controls="dropdown-"
           aria-disabled="false"
           aria-expanded="false"
+          aria-haspopup="listbox"
           aria-label="Selected page size"
           class="pagination-button button button-neutral button-medium icon-right"
           id="dropdown-reference"
@@ -395,7 +388,6 @@ exports[`Pagination Pagination should render with all elements 1`] = `
     >
       <li>
         <button
-          aria-current="false"
           aria-disabled="false"
           aria-label="page 1 of 4"
           class="pagination-button button button-neutral button-medium"
@@ -409,7 +401,6 @@ exports[`Pagination Pagination should render with all elements 1`] = `
       </li>
       <li>
         <button
-          aria-current="false"
           aria-disabled="false"
           aria-label="page 2 of 4"
           class="pagination-button button button-neutral button-medium"
@@ -423,7 +414,6 @@ exports[`Pagination Pagination should render with all elements 1`] = `
       </li>
       <li>
         <button
-          aria-current="false"
           aria-disabled="false"
           aria-label="page 3 of 4"
           class="pagination-button button button-neutral button-medium"
@@ -437,7 +427,7 @@ exports[`Pagination Pagination should render with all elements 1`] = `
       </li>
       <li>
         <button
-          aria-current="true"
+          aria-current="page"
           aria-disabled="false"
           aria-label="page 4 of 4"
           class="pagination-button active button button-neutral button-medium"
@@ -541,7 +531,6 @@ exports[`Pagination Pagination should render with some elements 1`] = `
     >
       <li>
         <button
-          aria-current="false"
           aria-disabled="false"
           aria-label="page 1 of 10"
           class="pagination-button button button-neutral button-medium"
@@ -555,7 +544,6 @@ exports[`Pagination Pagination should render with some elements 1`] = `
       </li>
       <li>
         <button
-          aria-current="false"
           aria-disabled="false"
           aria-label="page 2 of 10"
           class="pagination-button button button-neutral button-medium"
@@ -569,7 +557,6 @@ exports[`Pagination Pagination should render with some elements 1`] = `
       </li>
       <li>
         <button
-          aria-current="false"
           aria-disabled="false"
           aria-label="page 3 of 10"
           class="pagination-button button button-neutral button-medium"
@@ -583,7 +570,6 @@ exports[`Pagination Pagination should render with some elements 1`] = `
       </li>
       <li>
         <button
-          aria-current="false"
           aria-disabled="false"
           aria-label="page 4 of 10"
           class="pagination-button button button-neutral button-medium"
@@ -597,7 +583,7 @@ exports[`Pagination Pagination should render with some elements 1`] = `
       </li>
       <li>
         <button
-          aria-current="true"
+          aria-current="page"
           aria-disabled="false"
           aria-label="page 5 of 10"
           class="pagination-button active button button-neutral button-medium"
@@ -611,7 +597,6 @@ exports[`Pagination Pagination should render with some elements 1`] = `
       </li>
       <li>
         <button
-          aria-current="false"
           aria-disabled="false"
           aria-label="page 6 of 10"
           class="pagination-button button button-neutral button-medium"
@@ -625,7 +610,6 @@ exports[`Pagination Pagination should render with some elements 1`] = `
       </li>
       <li>
         <button
-          aria-current="false"
           aria-disabled="false"
           aria-label="page 7 of 10"
           class="pagination-button button button-neutral button-medium"
@@ -639,7 +623,6 @@ exports[`Pagination Pagination should render with some elements 1`] = `
       </li>
       <li>
         <button
-          aria-current="false"
           aria-disabled="false"
           aria-label="page 8 of 10"
           class="pagination-button button button-neutral button-medium"
@@ -653,7 +636,6 @@ exports[`Pagination Pagination should render with some elements 1`] = `
       </li>
       <li>
         <button
-          aria-current="false"
           aria-disabled="false"
           aria-label="page 9 of 10"
           class="pagination-button button button-neutral button-medium"
@@ -667,7 +649,6 @@ exports[`Pagination Pagination should render with some elements 1`] = `
       </li>
       <li>
         <button
-          aria-current="false"
           aria-disabled="false"
           aria-label="page 10 of 10"
           class="pagination-button button button-neutral button-medium"

src/components/PersistentBar/__snapshots__/PersistentBar.test.tsx.snap

@@ -86,7 +86,7 @@ exports[`PersistentBar PersistentBar is topBarPagination 1`] = `
       >
         <li>
           <button
-            aria-current="true"
+            aria-current="page"
             aria-disabled="false"
             aria-label="page 1 of 1"
             class="pagination-button active button button-neutral button-medium"

src/components/Table/Tests/__snapshots__/Table.expand.test.tsx.snap

@@ -3552,7 +3552,7 @@ LoadedCheerio {
                     "children": Array [
                       Node {
                         "attribs": Object {
-                          "aria-current": "true",
+                          "aria-current": "page",
                           "aria-disabled": "false",
                           "aria-label": "page 1 of 1",
                           "class": "pagination-button active button button-neutral button-medium",
@@ -3644,7 +3644,7 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-current": "true",
+                        "aria-current": "page",
                         "aria-disabled": "false",
                         "aria-label": "page 1 of 1",
                         "class": "pagination-button active button button-neutral button-medium",
@@ -3778,7 +3778,7 @@ LoadedCheerio {
                   "children": Array [
                     Node {
                       "attribs": Object {
-                        "aria-current": "true",
+                        "aria-current": "page",
                         "aria-disabled": "false",
                         "aria-label": "page 1 of 1",
                         "class": "pagination-button active button button-neutral button-medium",
@@ -3870,7 +3870,7 @@ LoadedCheerio {
                 "children": Array [
                   Node {
                     "attribs": Object {
-                      "aria-current": "true",
+                      "aria-current": "page",
                       "aria-disabled": "false",
                       "aria-label": "page 1 of 1",
                       "class": "pagination-button active button button-neutral button-medium",