feat: implement :focus-visible for the Pagination component with ta…

…rgeted focus style for non-pointer devices
trendmicro-frontend · Oct 9, 2023 · 900658d · 900658d
1 parent 5e546c8
commit 900658d
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/packages/react/src/pagination/PaginationItem.js b/packages/react/src/pagination/PaginationItem.js
@@ -1,4 +1,4 @@
-import { ariaAttr, dataAttr } from '@tonic-ui/utils';
+import { ariaAttr } from '@tonic-ui/utils';
 import React, { forwardRef } from 'react';
 import { Button } from '../button';
 import { Icon } from '../icon';
@@ -51,10 +51,9 @@ const PaginationItem = forwardRef((
     <Button
       ref={ref}
       aria-current={ariaAttr(selected)}
-      aria-disabled={ariaAttr(disabled)}
       aria-label={ariaLabel ?? getAriaLabel({ type, page, selected })}
-      data-selected={dataAttr(selected)}
       disabled={disabled}
+      selected={selected}
       variant={variant}
       {...styleProps}
       {...rest}

diff --git a/packages/react/src/pagination/__tests__/Pagination.test.js b/packages/react/src/pagination/__tests__/Pagination.test.js
@@ -28,7 +28,10 @@ describe('Pagination', () => {
     expect(pageItems.length).toBe(5);
     expect(pageItem0).not.toHaveAttribute('aria-current');
     expect(pageItem1).toHaveAttribute('aria-current', 'true');
+
+    // Only use `aria-selected` with these roles: `option`, `tab`, `menuitemradio`, `treeitem`, `gridcell`, `row`, `rowheader`, and `columnheader`.
     expect(pageItem1).toHaveAttribute('data-selected', '');
+
     expect(pageItem2).not.toHaveAttribute('aria-current');
     expect(pageItem3).not.toHaveAttribute('aria-current');
     expect(pageItem4).not.toHaveAttribute('aria-current');