Add ariaCurrent to the active button in Pagination

toptal · Dec 26, 2023 · ea87705 · ea87705
1 parent 421312a
commit ea87705
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/packages/picasso/src/Pagination/__snapshots__/test.tsx.snap b/packages/picasso/src/Pagination/__snapshots__/test.tsx.snap
@@ -66,6 +66,7 @@ exports[`Pagination renders 1`] = `
         </span>
       </button>
       <button
+        aria-current="true"
         class="MuiButtonBase-root PicassoButton-active PicassoButton-small PicassoButton-secondary PicassoButton-root PicassoPaginationButton-root PicassoPaginationButton-active PicassoPagination-button"
         data-component-type="button"
         tabindex="0"
@@ -209,6 +210,7 @@ exports[`Pagination renders disabled 1`] = `
         </span>
       </button>
       <button
+        aria-current="true"
         class="MuiButtonBase-root PicassoButton-active PicassoButton-disabled PicassoButton-small PicassoButton-secondary PicassoButton-root PicassoPaginationButton-root PicassoPaginationButton-active PicassoPagination-button Mui-disabled"
         data-component-type="button"
         disabled=""

diff --git a/packages/picasso/src/PaginationButton/PaginationButton.tsx b/packages/picasso/src/PaginationButton/PaginationButton.tsx
@@ -20,17 +20,14 @@ export interface Props extends StandardProps {
 
 const PaginationButton = (props: Props) => {
   const { page, activePage, disabled, onClick, className } = props
-
   const classes = useStyles()
+  const isActive = page === activePage
 
   return (
     <Button
-      className={cx(
-        classes.root,
-        { [classes.active]: page === activePage },
-        className
-      )}
-      active={activePage === page}
+      className={cx(classes.root, { [classes.active]: isActive }, className)}
+      aria-current={isActive ? true : undefined}
+      active={isActive}
       disabled={disabled}
       onClick={() => onClick(page)}
       variant='secondary'