fix(@clayui/pagination): LPD-1285 accessibility issues on prev, next …

…and ellipsis buttons
liferay · Mar 6, 2024 · 640dd96 · 640dd96
1 parent 4aa86c2
commit 640dd96
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/packages/clay-core/src/drop-down/Menu.tsx b/packages/clay-core/src/drop-down/Menu.tsx
@@ -214,7 +214,7 @@ function MenuInner<T extends Record<string, unknown> | string | number>(
 	return (
 		<div className="dropdown" ref={containerRef}>
 			{React.cloneElement(trigger, {
-				'aria-controls': ariaControlsId,
+				'aria-controls': active ? ariaControlsId : undefined,
 				'aria-expanded': active,
 				'aria-haspopup': 'true',
 				className: classNames(

diff --git a/packages/clay-pagination/src/PaginationWithBasicItems.tsx b/packages/clay-pagination/src/PaginationWithBasicItems.tsx
@@ -164,6 +164,11 @@ const ClayPaginationWithBasicItems = React.forwardRef<HTMLUListElement, IProps>(
 					disabled={internalActive === 1}
 					href={previousHref}
 					onClick={() => setActive(previousPage)}
+					role={
+						previousHref || internalActive === 1
+							? undefined
+							: 'button'
+					}
 				>
 					<ClayIcon spritemap={spritemap} symbol="angle-left" />
 				</Pagination.Item>
@@ -217,6 +222,11 @@ const ClayPaginationWithBasicItems = React.forwardRef<HTMLUListElement, IProps>(
 					disabled={internalActive === totalPages}
 					href={nextHref}
 					onClick={() => setActive(nextPage)}
+					role={
+						nextHref || internalActive === totalPages
+							? undefined
+							: 'button'
+					}
 				>
 					<ClayIcon spritemap={spritemap} symbol="angle-right" />
 				</Pagination.Item>