Replace Congratulations view Buttons with Links (woocommerce#51654)

* ../woocommerce-admin/client/customize-store/transitional/index.tsx * Delete plugins/woocommerce/bin/composer/phpcs/composer.lock * Add changefile(s) from automation for the following project(s): woocommerce * Delete plugins/woocommerce/bin/composer/phpunit/composer.lock * Delete plugins/woocommerce/composer.lock * Reverted the changes * Reverted the changes * Reverted the changes * Reverted the changes * Reverted the changes * Reverted the changes * Reverted the changes * Implemented Suggested Changes * Implemented Suggested Changes * IMplemented the Suggestions * Removed navigateOrParent as it is not needed. * Updated test case in index.test.tsx * Revert the change * Implemented suggestions * Update transitional.spec.js * Update transitional.spec.js --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Karol Manijak <20098064+kmanijak@users.noreply.github.com> Co-authored-by: root <root@LAPTOP-I3Q9TGEL>
Neosate · Oct 4, 2024 · 3790377 · 3790377
1 parent cbf98a0
commit 3790377
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 24 deletions.
diff --git a/plugins/woocommerce-admin/client/customize-store/transitional/index.tsx b/plugins/woocommerce-admin/client/customize-store/transitional/index.tsx
@@ -21,7 +21,6 @@ import { SiteHub } from '../assembler-hub/site-hub';
 import { ADMIN_URL } from '~/utils/admin-settings';
 
 import './style.scss';
-import { navigateOrParent } from '../utils';
 import { WooCYSSecondaryButtonSlot } from './secondary-button-slot';
 import { SurveyForm } from './survey-form';
 import lessonPlan from '../assets/icons/lesson-plan.js';
@@ -122,6 +121,7 @@ export const Transitional = ( {
 					) }
 
 					<Button
+						href={ homeUrl }
 						className="woocommerce-customize-store__transitional-preview-button"
 						variant={
 							isEntrepreneurFlow() ? 'secondary' : 'primary'
@@ -130,7 +130,6 @@ export const Transitional = ( {
 							trackEvent(
 								'customize_your_store_transitional_preview_store_click'
 							);
-							window.open( homeUrl, '_blank' );
 						} }
 					>
 						{ __( 'View store', 'woocommerce' ) }
@@ -180,14 +179,11 @@ export const Transitional = ( {
 									</p>
 									<Button
 										variant="link"
+										href={ `${ ADMIN_URL }edit.php?post_type=product` }
 										onClick={ () => {
 											trackEvent(
 												'customize_your_store_transitional_product_list_click'
 											);
-											navigateOrParent(
-												window,
-												`${ ADMIN_URL }edit.php?post_type=product`
-											);
 										} }
 									>
 										{ __(
@@ -220,14 +216,11 @@ export const Transitional = ( {
 									</p>
 									<Button
 										variant="link"
+										href={ `${ ADMIN_URL }site-editor.php` }
 										onClick={ () => {
 											trackEvent(
 												'customize_your_store_transitional_editor_click'
 											);
-											navigateOrParent(
-												window,
-												`${ ADMIN_URL }site-editor.php`
-											);
 										} }
 									>
 										{ __(

diff --git a/plugins/woocommerce-admin/client/customize-store/transitional/test/index.test.tsx b/plugins/woocommerce-admin/client/customize-store/transitional/test/index.test.tsx
@@ -46,18 +46,18 @@ describe( 'Transitional', () => {
 		).toBeInTheDocument();
 
 		expect(
-			screen.getByRole( 'button', {
+			screen.getByRole( 'link', {
 				name: /View store/i,
 			} )
 		).toBeInTheDocument();
 
 		expect(
-			screen.getByRole( 'button', {
+			screen.getByRole( 'link', {
 				name: /Go to Products/i,
 			} )
 		).toBeInTheDocument();
 		expect(
-			screen.getByRole( 'button', {
+			screen.getByRole( 'link', {
 				name: /Go to the Editor/i,
 			} )
 		).toBeInTheDocument();
@@ -75,7 +75,7 @@ describe( 'Transitional', () => {
 		render( <Transitional { ...props } /> );
 
 		screen
-			.getByRole( 'button', {
+			.getByRole( 'link', {
 				name: /View store/i,
 			} )
 			.click();
@@ -97,7 +97,7 @@ describe( 'Transitional', () => {
 		render( <Transitional { ...props } /> );
 
 		screen
-			.getByRole( 'button', {
+			.getByRole( 'link', {
 				name: /Go to the Editor/i,
 			} )
 			.click();

diff --git a/plugins/woocommerce/changelog/51654-51575-replaced-button-with-link b/plugins/woocommerce/changelog/51654-51575-replaced-button-with-link
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+Comment: Replaced Congratulations view Buttons with Links for Accessibility reasons.
+
diff --git a/plugins/woocommerce/tests/e2e-pw/tests/customize-store/transitional.spec.js b/plugins/woocommerce/tests/e2e-pw/tests/customize-store/transitional.spec.js
@@ -98,7 +98,7 @@ test.describe(
 			).toBeVisible();
 		} );
 
-		test( 'Clicking on "View store" should go to the store home page in a new page', async ( {
+		test( 'Clicking on "View store" should go to the store home page', async ( {
 			pageObject,
 			baseURL,
 			page,
@@ -113,15 +113,9 @@ test.describe(
 			await page.goto( TRANSITIONAL_URL );
 			const assembler = await pageObject.getAssembler();
 
-			const newTabPromise = page.waitForEvent( 'popup' );
-			await assembler
-				.getByRole( 'button', { name: 'View store' } )
-				.click();
-
-			const newTab = await newTabPromise;
-			await newTab.waitForLoadState();
+			await assembler.getByRole( 'link', { name: 'View store' } ).click();
 
-			await expect( newTab ).toHaveURL( '/' );
+			await expect( page ).toHaveURL( '/' );
 		} );
 
 		test( 'Clicking on "Share feedback" should open the survey modal', async ( {