Help Center: Enhance back button accessibility (#97974)

* Enhance BackButton accessibility: add keyboard support and improve ARIA attributes * Refactor BackButton component: replace span with Button for improved accessibility and keyboard support * Refactor BackButton component: add label prop for accessibility and remove unnecessary aria-label * Remove unnecessary span wrapper and add onTouchStart for improved touch support * update locator for back button in HelpCenterComponent * Fix e2e * Fix e2e --------- Co-authored-by: heavyweight <kpapazov@gmail.com>
Automattic · Jan 8, 2025 · 43c47f2 · 43c47f2
1 parent fbc42bb
commit 43c47f2
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 11 deletions.
diff --git a/packages/calypso-e2e/src/lib/components/help-center.ts b/packages/calypso-e2e/src/lib/components/help-center.ts
@@ -114,7 +114,7 @@ export class HelpCenterComponent {
 	 * Go back to the previous page.
 	 */
 	async goBack(): Promise< void > {
-		await this.popup.locator( 'span.back-button__help-center' ).click();
+		await this.popup.getByTestId( 'help-center-back-button' ).click();
 	}
 
 	/**

diff --git a/packages/help-center/src/components/back-button.tsx b/packages/help-center/src/components/back-button.tsx
@@ -1,4 +1,6 @@
+import { Button } from '@wordpress/components';
 import { Icon, chevronLeft } from '@wordpress/icons';
+import { useI18n } from '@wordpress/react-i18n';
 import { useNavigate, useSearchParams, useLocation } from 'react-router-dom';
 
 import './back-button.scss';
@@ -7,6 +9,7 @@ export const BackButton = () => {
 	const navigate = useNavigate();
 	const [ searchParams ] = useSearchParams();
 	const { pathname } = useLocation();
+	const { __ } = useI18n();
 
 	function handleClick() {
 		if ( pathname === '/success' ) {
@@ -19,13 +22,14 @@ export const BackButton = () => {
 	}
 
 	return (
-		<span className="back-button__help-center">
-			<Icon
-				data-testid="back-button-icon"
-				onClick={ handleClick }
-				icon={ chevronLeft }
-				size={ 18 }
-			/>
-		</span>
+		<Button
+			label={ __( 'Go Back', __i18n_text_domain__ ) }
+			data-testid="help-center-back-button"
+			onClick={ handleClick }
+			onTouchStart={ handleClick }
+			className="back-button__help-center"
+		>
+			<Icon icon={ chevronLeft } size={ 18 } />
+		</Button>
 	);
 };
diff --git a/packages/help-center/src/components/test/back-button.tsx b/packages/help-center/src/components/test/back-button.tsx
@@ -31,7 +31,7 @@ describe( 'BackButton', () => {
 			</MemoryRouter>
 		);
 
-		await user.click( screen.getByTestId( 'back-button-icon' ) );
+		await user.click( screen.getByTestId( 'help-center-back-button' ) );
 
 		expect( mockNavigate ).toHaveBeenCalledWith( -1 );
 	} );
@@ -45,7 +45,7 @@ describe( 'BackButton', () => {
 			</MemoryRouter>
 		);
 
-		await user.click( screen.getByTestId( 'back-button-icon' ) );
+		await user.click( screen.getByTestId( 'help-center-back-button' ) );
 
 		expect( mockNavigate ).not.toHaveBeenCalledWith( '/' );
 	} );