From 14fe529ebca2c28bf0a71193df7c46af88636503 Mon Sep 17 00:00:00 2001
From: louwie17 <lourensschep@gmail.com>
Date: Thu, 10 Jun 2021 06:11:45 -0300
Subject: [PATCH] Wraps the dropdown icon in a button to allow keyboard
 usability (https://github.com/woocommerce/woocommerce-admin/pull/7149)

* Wraps the dropdown icon in a button to allow keyboard usuability

* Add changelog

Co-authored-by: Ilyas Foo <foo.ilyas@gmail.com>
---
 .../selective-extensions-bundle/index.js              | 11 ++++++++---
 .../selective-extensions-bundle/style.scss            |  5 ++---
 plugins/woocommerce-admin/readme.txt                  |  1 +
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/index.js b/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/index.js
index e693513c651..44b6ec8f6b6 100644
--- a/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/index.js
+++ b/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/index.js
@@ -490,9 +490,8 @@ export const SelectiveExtensionsBundle = ( {
 								'Add recommended business features to my site'
 							) }
 						</p>
-						<Icon
+						<Button
 							className="woocommerce-admin__business-details__selective-extensions-bundle__expand"
-							icon={ showExtensions ? chevronUp : chevronDown }
 							onClick={ () => {
 								setShowExtensions( ! showExtensions );
 
@@ -503,7 +502,13 @@ export const SelectiveExtensionsBundle = ( {
 									);
 								}
 							} }
-						/>
+						>
+							<Icon
+								icon={
+									showExtensions ? chevronUp : chevronDown
+								}
+							/>
+						</Button>
 					</div>
 					{ showExtensions &&
 						installableExtensions.map(
diff --git a/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/style.scss b/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/style.scss
index 3f0baaa3da0..af40197a511 100644
--- a/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/style.scss
+++ b/plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/style.scss
@@ -15,6 +15,7 @@
 			display: flex;
 			padding: $gap-large 0 $gap-large 30px;
 			border-bottom: 1px solid $gray-200;
+			align-items: center;
 		}
 
 		.woocommerce-admin__business-details__selective-extensions-bundle__description {
@@ -55,9 +56,7 @@
 	}
 
 	.woocommerce-admin__business-details__selective-extensions-bundle__expand {
-		margin-left: 21px;
-		margin-top: -2px;
-		cursor: pointer;
+		margin-left: 9px;
 	}
 
 	.woocommerce-profile-wizard__business-details__free-features__illustration {
diff --git a/plugins/woocommerce-admin/readme.txt b/plugins/woocommerce-admin/readme.txt
index 3f5ca481df2..564f6c0aa42 100644
--- a/plugins/woocommerce-admin/readme.txt
+++ b/plugins/woocommerce-admin/readme.txt
@@ -145,6 +145,7 @@ Release and roadmap notes are available on the [WooCommerce Developers Blog](htt
 - Fix: Bug with Orders Report coupon exclusion filter. #7021
 - Fix: Show Google Listing and Ads in installed marketing extensions section. #7029
 - Fix: Notices not dissapearing. #7077
+- Fix: Keyboard accessibility on the free features tab. #7149
 - Fix: Fix error handling when remote free extension API returns empty array. #7147
 - Tweak: Only fetch remote payment gateway recommendations when opted in #6964
 - Tweak: Setup checklist copy revert. #7015