From 0cdff78f2456d3ad87fce3d1d5736247e52e277d Mon Sep 17 00:00:00 2001 From: ksharma-c-eightfold Date: Sun, 13 Sep 2026 15:00:40 +0530 Subject: [PATCH 1/2] fix(Pagination): announce selected state of page size options (ENG-209890) The page size dropdown rendered a Menu (role=menu > role=menuitem) inside the Dropdown's role=listbox overlay, so screen readers announced only the option name and position with no selected state (WCAG 4.1.2 Name, Role, Value). Mark the Menu role=presentation, give each item role=option plus aria-selected, and declare aria-haspopup=listbox on the trigger. Arrow-key focus movement, keyboard behaviour and styling are unchanged. Co-Authored-By: Claude Opus 5 (1M context) --- src/components/Pagination/Pagination.tsx | 20 ++++++++++--------- .../__snapshots__/Pagination.test.tsx.snap | 1 + 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx index 1e179ee65..a3157641a 100644 --- a/src/components/Pagination/Pagination.tsx +++ b/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,6 +337,8 @@ export const Pagination: FC = 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}` @@ -351,7 +346,13 @@ export const Pagination: FC = React.forwardRef( value: item, })); }; - return ; + return ( + + ); }; const moreThanOnePage: boolean = getPageCount() > 1; @@ -391,6 +392,7 @@ export const Pagination: FC = React.forwardRef( ) && ( diff --git a/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap b/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap index 6d4c7189a..3d2e49453 100644 --- a/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap +++ b/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap @@ -335,6 +335,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" From ec193fba41afc4a82cde2c44a183111d15b81a82 Mon Sep 17 00:00:00 2001 From: ksharma-c-eightfold Date: Tue, 22 Sep 2026 17:42:05 +0530 Subject: [PATCH 2/2] fix(Pagination): use aria-current="page" on active pager button (ENG-209864) Pager buttons passed a boolean to aria-current, which React serializes to aria-current="true" on the active page and aria-current="false" on every other one. NVDA announces the generic "true" token as the bare word "current", giving no indication of what is current. Emit the "page" token when active and omit the attribute otherwise, at all three call sites (first page, mapped middle pages, last page). This matches the ARIA spec, the APG pagination pattern, and Breadcrumb.tsx, which already uses 'aria-current': ariaCurrent ? 'page' : null. Accessible names, the active class, and pagination behaviour are unchanged. Adds a test pinning the attribute value so a boolean cannot regress it. Co-Authored-By: Claude Opus 5 (1M context) --- .../Tests/__snapshots__/Slide.test.tsx.snap | 4 +-- src/components/Pagination/Pager.tsx | 6 ++-- src/components/Pagination/Pagination.test.tsx | 22 +++++++++++++++ .../__snapshots__/Pagination.test.tsx.snap | 28 +++---------------- .../__snapshots__/PersistentBar.test.tsx.snap | 2 +- .../__snapshots__/Table.expand.test.tsx.snap | 8 +++--- .../Table.pagination.accepttrue.shot | 8 +++--- .../Table.pagination.nocrashonchange.shot | 8 +++--- .../Table.pagination.position.shot | 8 +++--- .../Table.pagination.renders.shot | 8 +++--- .../__snapshots__/Table.sorter.test.js.snap | 8 +++--- 11 files changed, 55 insertions(+), 55 deletions(-) diff --git a/src/components/Carousel/Tests/__snapshots__/Slide.test.tsx.snap b/src/components/Carousel/Tests/__snapshots__/Slide.test.tsx.snap index 3479a86a3..59cdedc4f 100644 --- a/src/components/Carousel/Tests/__snapshots__/Slide.test.tsx.snap +++ b/src/components/Carousel/Tests/__snapshots__/Slide.test.tsx.snap @@ -35,7 +35,7 @@ exports[`Slide loads and displays Carousel component 1`] = ` >