fix: address ai review feedback for pagination a11y

Author: ZQDesigned

src/Options.tsx

@@ -1,6 +1,7 @@
 import { KeyCode } from '@rc-component/util';
 import React from 'react';
 import type { PaginationLocale } from './interface';
+import getNonEmptyString from './utils/getNonEmptyString';
 
 export type SizeChangerRender = (info: {
   disabled: boolean;
@@ -31,10 +32,6 @@ interface OptionsProps {
 
 const defaultPageSizeOptions = [10, 20, 50, 100];
 
-function getNonEmptyString(...values: (string | undefined)[]) {
-  return values.find((value) => value && value.trim())?.trim();
-}
-
 const Options: React.FC<OptionsProps> = (props) => {
   const {
     pageSizeOptions = defaultPageSizeOptions,

src/Pager.tsx

@@ -52,7 +52,13 @@ const Pager: React.FC<PagerProps> = (props) => {
     onKeyPress(e, onClick, page);
   };
 
-  const pager = itemRender(page, 'page', <a rel="nofollow">{page}</a>);
+  const pager = itemRender(
+    page,
+    'page',
+    <a tabIndex={-1} aria-hidden="true" rel="nofollow">
+      {page}
+    </a>,
+  );
   const pagerLabel = `${pageLabel || 'Page'} ${page}`.trim();
 
   return pager ? (

src/Pagination.tsx

@@ -11,6 +11,7 @@ import zhCN from './locale/zh_CN';
 import Options from './Options';
 import type { PagerProps } from './Pager';
 import Pager from './Pager';
+import getNonEmptyString from './utils/getNonEmptyString';
 
 const defaultItemRender: PaginationProps['itemRender'] = (_, __, element) =>
   element;
@@ -32,10 +33,6 @@ function calculatePage(p: number | undefined, pageSize: number, total: number) {
   return Math.floor((total - 1) / _pageSize) + 1;
 }
 
-function getNonEmptyString(...values: (string | undefined)[]) {
-  return values.find((value) => value && value.trim())?.trim();
-}
-
 const Pagination: React.FC<PaginationProps> = (props) => {
   const {
     // cls
@@ -120,13 +117,14 @@ const Pagination: React.FC<PaginationProps> = (props) => {
 
   function getItemIcon(
     icon: React.ReactNode | React.ComponentType<PaginationProps>,
-    label: string,
+    _label: string,
     title?: string,
   ) {
     let iconNode = icon || (
       <button
         type="button"
-        aria-label={label}
+        tabIndex={-1}
+        aria-hidden="true"
         title={title}
         className={`${prefixCls}-item-link`}
       />
@@ -159,7 +157,6 @@ const Pagination: React.FC<PaginationProps> = (props) => {
 
   const shouldDisplayQuickJumper = total > pageSize ? showQuickJumper : false;
   const pageLabelText = getNonEmptyString(locale.page, 'Page');
-  const pageSizeLabelText = getNonEmptyString(locale.page_size, 'Page Size');
 
   /**
    * prevent "up arrow" key reseting cursor position within textbox
@@ -254,7 +251,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
     handleChange(jumpNextPage);
   }
 
-  function runIfEnter(
+  function runIfEnterOrSpace(
     event: React.KeyboardEvent<HTMLLIElement>,
     callback: (...args: any[]) => void,
     ...restParams: any[]
@@ -272,19 +269,19 @@ const Pagination: React.FC<PaginationProps> = (props) => {
   }
 
   function runIfEnterPrev(event: React.KeyboardEvent<HTMLLIElement>) {
-    runIfEnter(event, prevHandle);
+    runIfEnterOrSpace(event, prevHandle);
   }
 
   function runIfEnterNext(event: React.KeyboardEvent<HTMLLIElement>) {
-    runIfEnter(event, nextHandle);
+    runIfEnterOrSpace(event, nextHandle);
   }
 
   function runIfEnterJumpPrev(event: React.KeyboardEvent<HTMLLIElement>) {
-    runIfEnter(event, jumpPrevHandle);
+    runIfEnterOrSpace(event, jumpPrevHandle);
   }
 
   function runIfEnterJumpNext(event: React.KeyboardEvent<HTMLLIElement>) {
-    runIfEnter(event, jumpNextHandle);
+    runIfEnterOrSpace(event, jumpNextHandle);
   }
 
   function renderPrev(prevPage: number) {
@@ -354,7 +351,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
   const pagerProps: PagerProps = {
     rootPrefixCls: prefixCls,
     onClick: handleChange,
-    onKeyPress: runIfEnter,
+    onKeyPress: runIfEnterOrSpace,
     showTitle,
     itemRender,
     pageLabel: pageLabelText,
@@ -628,11 +625,7 @@ const Pagination: React.FC<PaginationProps> = (props) => {
       {simple ? simplePager : pagerList}
       {next}
       <Options
-        locale={{
-          ...locale,
-          page_size: pageSizeLabelText,
-          page: getNonEmptyString(locale.page, pageLabelText, 'Page'),
-        }}
+        locale={locale}
         rootPrefixCls={prefixCls}
         disabled={disabled}
         selectPrefixCls={selectPrefixCls}

src/utils/getNonEmptyString.ts

@@ -0,0 +1,5 @@
+export default function getNonEmptyString(...values: unknown[]) {
+  return values
+    .find((value) => typeof value === 'string' && value.trim())
+    ?.trim();
+}