From 1e225f701f2d21380b6e1a28b6a7cf88ad10b230 Mon Sep 17 00:00:00 2001
From: Sam Seay <samueljseay@gmail.com>
Date: Mon, 29 Apr 2024 09:35:47 +0800
Subject: [PATCH] Add aria label to the customer account block link (#46899)

---
 .../assets/js/blocks/customer-account/block.tsx           | 8 ++++++++
 .../46899-dev-fix-a11y-icon-only-customer-account-block   | 4 ++++
 .../woocommerce/src/Blocks/BlockTypes/CustomerAccount.php | 5 ++++-
 3 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 plugins/woocommerce/changelog/46899-dev-fix-a11y-icon-only-customer-account-block

diff --git a/plugins/woocommerce-blocks/assets/js/blocks/customer-account/block.tsx b/plugins/woocommerce-blocks/assets/js/blocks/customer-account/block.tsx
index e3c348e6c62..c0a2c9e437b 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/customer-account/block.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/customer-account/block.tsx
@@ -56,12 +56,20 @@ export const CustomerAccountBlock = ( {
 } ): JSX.Element => {
 	const { displayStyle, iconStyle, iconClass } = attributes;
 
+	const ariaAttributes =
+		displayStyle === DisplayStyle.ICON_ONLY
+			? {
+					'aria-label': __( 'My Account', 'woocommerce' ),
+			  }
+			: {};
+
 	return (
 		<a
 			href={ getSetting(
 				'dashboardUrl',
 				getSetting( 'wpLoginUrl', '/wp-login.php' )
 			) }
+			{ ...ariaAttributes }
 		>
 			<AccountIcon
 				iconStyle={ iconStyle }
diff --git a/plugins/woocommerce/changelog/46899-dev-fix-a11y-icon-only-customer-account-block b/plugins/woocommerce/changelog/46899-dev-fix-a11y-icon-only-customer-account-block
new file mode 100644
index 00000000000..13f1e9a9b0c
--- /dev/null
+++ b/plugins/woocommerce/changelog/46899-dev-fix-a11y-icon-only-customer-account-block
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Add aria-label to customer account block link when in icon-only display mode.
\ No newline at end of file
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/CustomerAccount.php b/plugins/woocommerce/src/Blocks/BlockTypes/CustomerAccount.php
index 1d7bd6fad59..bf5732e5ec8 100644
--- a/plugins/woocommerce/src/Blocks/BlockTypes/CustomerAccount.php
+++ b/plugins/woocommerce/src/Blocks/BlockTypes/CustomerAccount.php
@@ -122,10 +122,13 @@ class CustomerAccount extends AbstractBlock {
 			),
 		);
 
+		// Only provide aria-label if the display style is icon only.
+		$aria_label = self::ICON_ONLY === $attributes['displayStyle'] ? 'aria-label="' . esc_attr( $this->render_label() ) . '"' : '';
+
 		$label_markup = self::ICON_ONLY === $attributes['displayStyle'] ? '' : '<span class="label">' . wp_kses( $this->render_label(), array() ) . '</span>';
 
 		return "<div class='wp-block-woocommerce-customer-account " . esc_attr( $classes_and_styles['classes'] ) . "' style='" . esc_attr( $classes_and_styles['styles'] ) . "'>
-			<a href='" . esc_attr( $account_link ) . "'>
+			<a " . $aria_label . " href='" . esc_attr( $account_link ) . "'>
 				" . wp_kses( $this->render_icon( $attributes ), $allowed_svg ) . $label_markup . '
 			</a>
 		</div>';