From cbfdabc9a2a8b7c50b9ef36c10284e5c11571a3d Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 4 Jun 2024 10:41:01 +0200
Subject: [PATCH] Make edit site pagination buttons accessibly disabled.

---
 .../global-styles/screen-revisions/style.scss        |  3 ++-
 .../edit-site/src/components/pagination/index.js     | 12 ++++--------
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss
index dfe30c9bee33d2..e19876f98ee1fc 100644
--- a/packages/edit-site/src/components/global-styles/screen-revisions/style.scss
+++ b/packages/edit-site/src/components/global-styles/screen-revisions/style.scss
@@ -180,7 +180,8 @@
 		margin-bottom: $grid-unit-05;
 		line-height: 1.2;
 	}
-	.components-button.is-tertiary:disabled {
+	.components-button.is-tertiary:disabled,
+	.components-button.is-tertiary[aria-disabled="true"] {
 		color: $gray-600;
 	}
 	.components-button.is-tertiary:hover {
diff --git a/packages/edit-site/src/components/pagination/index.js b/packages/edit-site/src/components/pagination/index.js
index 2608621f39c84f..450ff2a17d5b5e 100644
--- a/packages/edit-site/src/components/pagination/index.js
+++ b/packages/edit-site/src/components/pagination/index.js
@@ -46,8 +46,7 @@ export default function Pagination( {
 				<Button
 					variant={ buttonVariant }
 					onClick={ () => changePage( 1 ) }
-					// Disable reason: Would not cause confusion, and allows quicker access to a relevant nav button.
-					// eslint-disable-next-line no-restricted-syntax
+					__experimentalIsFocusable
 					disabled={ disabled || currentPage === 1 }
 					aria-label={ __( 'First page' ) }
 				>
@@ -56,8 +55,7 @@ export default function Pagination( {
 				<Button
 					variant={ buttonVariant }
 					onClick={ () => changePage( currentPage - 1 ) }
-					// Disable reason: Would not cause confusion, and allows quicker access to a relevant nav button.
-					// eslint-disable-next-line no-restricted-syntax
+					__experimentalIsFocusable
 					disabled={ disabled || currentPage === 1 }
 					aria-label={ __( 'Previous page' ) }
 				>
@@ -76,8 +74,7 @@ export default function Pagination( {
 				<Button
 					variant={ buttonVariant }
 					onClick={ () => changePage( currentPage + 1 ) }
-					// Disable reason: Would not cause confusion, and allows quicker access to a relevant nav button.
-					// eslint-disable-next-line no-restricted-syntax
+					__experimentalIsFocusable
 					disabled={ disabled || currentPage === numPages }
 					aria-label={ __( 'Next page' ) }
 				>
@@ -86,8 +83,7 @@ export default function Pagination( {
 				<Button
 					variant={ buttonVariant }
 					onClick={ () => changePage( numPages ) }
-					// Disable reason: Would not cause confusion, and allows quicker access to a relevant nav button.
-					// eslint-disable-next-line no-restricted-syntax
+					__experimentalIsFocusable
 					disabled={ disabled || currentPage === numPages }
 					aria-label={ __( 'Last page' ) }
 				>