Refactor BackButton component: replace span with Button for improved …

…accessibility and keyboard support

packages/help-center/src/components/back-button.tsx

@@ -1,6 +1,6 @@
+import { Button } from '@wordpress/components';
 import { Icon, chevronLeft } from '@wordpress/icons';
 import { useI18n } from '@wordpress/react-i18n';
-import { useEffect, useRef } from 'react';
 import { useNavigate, useSearchParams, useLocation } from 'react-router-dom';
 
 import './back-button.scss';
@@ -9,7 +9,6 @@ export const BackButton = () => {
 	const navigate = useNavigate();
 	const [ searchParams ] = useSearchParams();
 	const { pathname } = useLocation();
-	const backButtonRef = useRef< HTMLElement >( null );
 	const { __ } = useI18n();
 
 	function handleClick() {
@@ -22,37 +21,20 @@ export const BackButton = () => {
 		}
 	}
 
-	useEffect( () => {
-		const nodeRef = backButtonRef;
-		const onBackButtonKeyDown = ( e: KeyboardEvent ) => {
-			if ( e.key === 'Enter' ) {
-				handleClick();
-			}
-		};
-
-		if ( nodeRef.current ) {
-			nodeRef.current?.addEventListener( 'keydown', onBackButtonKeyDown );
-			// Fixes accessibility for back button
-			nodeRef.current?.removeAttribute( 'aria-hidden' );
-		}
-		return () => {
-			nodeRef.current?.removeEventListener( 'keydown', onBackButtonKeyDown );
-		};
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [] );
-
 	return (
 		<span className="back-button__help-center">
-			<Icon
-				aria-label={ __( 'Go Back', __i18n_text_domain__ ) }
-				role="button"
-				ref={ backButtonRef }
+			<Button
 				tabIndex={ 0 }
 				data-testid="back-button-icon"
 				onClick={ handleClick }
-				icon={ chevronLeft }
-				size={ 18 }
-			/>
+				className="back-button__help-center"
+			>
+				<Icon
+					aria-label={ __( 'Go Back', __i18n_text_domain__ ) }
+					icon={ chevronLeft }
+					size={ 18 }
+				/>
+			</Button>
 		</span>
 	);
 };