From 640dd960aaab0e67255ec46d121717b36a20133b Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Tue, 5 Mar 2024 15:56:57 -0800
Subject: [PATCH 1/2] fix(@clayui/pagination): LPD-1285 accessibility issues on
 prev, next and ellipsis buttons

---
 packages/clay-core/src/drop-down/Menu.tsx              |  2 +-
 .../clay-pagination/src/PaginationWithBasicItems.tsx   | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/clay-core/src/drop-down/Menu.tsx b/packages/clay-core/src/drop-down/Menu.tsx
index 7e503ad466..77ab9496a2 100644
--- 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
index 108a204774..23e215520b 100644
--- 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>

From 0968e4b6dabc79be74b11c36ac0d3356ce414e2d Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Wed, 6 Mar 2024 09:16:26 -0800
Subject: [PATCH 2/2] chore(@clayui/pagination): LPD-1285 regen snapshots

chore(@clayui/core): LPD-1285 regen snapshots
---
 .../src/table/__tests__/__snapshots__/BasicRendering.tsx.snap | 4 ----
 .../src/__tests__/__snapshots__/index.tsx.snap                | 4 ++--
 .../src/__tests__/__snapshots__/index.tsx.snap                | 4 ++--
 3 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/clay-core/src/table/__tests__/__snapshots__/BasicRendering.tsx.snap b/packages/clay-core/src/table/__tests__/__snapshots__/BasicRendering.tsx.snap
index 3c520042b0..1d4acc92fa 100644
--- a/packages/clay-core/src/table/__tests__/__snapshots__/BasicRendering.tsx.snap
+++ b/packages/clay-core/src/table/__tests__/__snapshots__/BasicRendering.tsx.snap
@@ -37,7 +37,6 @@ exports[`Table basic rendering render dynamic content 1`] = `
               class="dropdown"
             >
               <button
-                aria-controls="clay-id-12"
                 aria-haspopup="true"
                 aria-label="Manage Columns Visibility"
                 class="dropdown-toggle btn btn-monospaced btn-outline-borderless btn-outline-secondary"
@@ -193,7 +192,6 @@ exports[`Table basic rendering render static content 1`] = `
               class="dropdown"
             >
               <button
-                aria-controls="clay-id-4"
                 aria-haspopup="true"
                 aria-label="Manage Columns Visibility"
                 class="dropdown-toggle btn btn-monospaced btn-outline-borderless btn-outline-secondary"
@@ -423,7 +421,6 @@ exports[`Table basic rendering render with sort column 1`] = `
               class="dropdown"
             >
               <button
-                aria-controls="clay-id-20"
                 aria-haspopup="true"
                 aria-label="Manage Columns Visibility"
                 class="dropdown-toggle btn btn-monospaced btn-outline-borderless btn-outline-secondary"
@@ -584,7 +581,6 @@ exports[`Table basic rendering render with treegrid 1`] = `
               class="dropdown"
             >
               <button
-                aria-controls="clay-id-28"
                 aria-haspopup="true"
                 aria-label="Manage Columns Visibility"
                 class="dropdown-toggle btn btn-monospaced btn-outline-borderless btn-outline-secondary"
diff --git a/packages/clay-pagination-bar/src/__tests__/__snapshots__/index.tsx.snap b/packages/clay-pagination-bar/src/__tests__/__snapshots__/index.tsx.snap
index 1db8890707..7530094387 100644
--- a/packages/clay-pagination-bar/src/__tests__/__snapshots__/index.tsx.snap
+++ b/packages/clay-pagination-bar/src/__tests__/__snapshots__/index.tsx.snap
@@ -99,7 +99,6 @@ exports[`ClayPaginationBar renders 1`] = `
             class="dropdown"
           >
             <button
-              aria-controls="clay-id-5"
               aria-haspopup="true"
               aria-label="Show pages 4 through 9"
               class="dropdown-toggle page-link btn btn-unstyled"
@@ -128,6 +127,7 @@ exports[`ClayPaginationBar renders 1`] = `
             aria-label="Go to the next page, 2"
             class="page-link"
             data-testid="nextArrow"
+            role="button"
             tabindex="0"
           >
             <svg
@@ -220,7 +220,6 @@ exports[`ClayPaginationBar renders without a DropDown 1`] = `
             class="dropdown"
           >
             <button
-              aria-controls="clay-id-8"
               aria-haspopup="true"
               aria-label="Show pages 4 through 9"
               class="dropdown-toggle page-link btn btn-unstyled"
@@ -249,6 +248,7 @@ exports[`ClayPaginationBar renders without a DropDown 1`] = `
             aria-label="Go to the next page, 2"
             class="page-link"
             data-testid="nextArrow"
+            role="button"
             tabindex="0"
           >
             <svg
diff --git a/packages/clay-pagination/src/__tests__/__snapshots__/index.tsx.snap b/packages/clay-pagination/src/__tests__/__snapshots__/index.tsx.snap
index dba61b4824..147d8956a4 100644
--- a/packages/clay-pagination/src/__tests__/__snapshots__/index.tsx.snap
+++ b/packages/clay-pagination/src/__tests__/__snapshots__/index.tsx.snap
@@ -15,6 +15,7 @@ exports[`ClayPagination renders 1`] = `
           aria-label="Go to the previous page, 11"
           class="page-link"
           data-testid="prevArrow"
+          role="button"
           tabindex="0"
         >
           <svg
@@ -45,7 +46,6 @@ exports[`ClayPagination renders 1`] = `
           class="dropdown"
         >
           <button
-            aria-controls="clay-id-2"
             aria-haspopup="true"
             aria-label="Show pages 2 through 9"
             class="dropdown-toggle page-link btn btn-unstyled"
@@ -118,7 +118,6 @@ exports[`ClayPagination renders 1`] = `
           class="dropdown"
         >
           <button
-            aria-controls="clay-id-4"
             aria-haspopup="true"
             aria-label="Show pages 15 through 24"
             class="dropdown-toggle page-link btn btn-unstyled"
@@ -147,6 +146,7 @@ exports[`ClayPagination renders 1`] = `
           aria-label="Go to the next page, 13"
           class="page-link"
           data-testid="nextArrow"
+          role="button"
           tabindex="0"
         >
           <svg