Make edit site pagination buttons accessibly disabled. (#62267)

Co-authored-by: afercia <afercia@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org>
WordPress · Jun 4, 2024 · 34fa834 · 34fa834
1 parent e841c9e
commit 34fa834
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 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
@@ -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
@@ -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' ) }
 				>