Conditionally add aria-label when buttons are icons

WordPress · Aug 22, 2022 · f03641b · f03641b
1 parent a9b4473
commit f03641b
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/packages/block-library/src/navigation/edit/responsive-wrapper.js b/packages/block-library/src/navigation/edit/responsive-wrapper.js
@@ -79,7 +79,7 @@ export default function ResponsiveWrapper( {
 			{ ! isOpen && (
 				<Button
 					aria-haspopup="true"
-					aria-label={ __( 'Open menu' ) }
+					aria-label={ hasIcon && __( 'Open menu' ) }
 					className={ openButtonClasses }
 					onClick={ () => onToggle( true ) }
 				>
@@ -104,7 +104,7 @@ export default function ResponsiveWrapper( {
 					<div { ...dialogProps }>
 						<Button
 							className="wp-block-navigation__responsive-container-close"
-							aria-label={ __( 'Close menu' ) }
+							aria-label={ hasIcon && __( 'Close menu' ) }
 							onClick={ () => onToggle( false ) }
 						>
 							{ hasIcon && <Icon icon={ close } /> }

diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
@@ -612,16 +612,18 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	$should_display_icon_label   = isset( $attributes['hasIcon'] ) && true === $attributes['hasIcon'];
 	$toggle_button_icon          = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg>';
-	$toggle_button_content       = $should_display_icon_label ? $toggle_button_icon : 'Menu';
+	$toggle_button_content       = $should_display_icon_label ? $toggle_button_icon : __( 'Menu' );
 	$toggle_close_button_icon    = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>';
-	$toggle_close_button_content = $should_display_icon_label ? $toggle_close_button_icon : 'Close';
+	$toggle_close_button_content = $should_display_icon_label ? $toggle_close_button_icon : __( 'Close' );
+	$toggle_aria_label_open      = $should_display_icon_label ? 'aria-label="' . __( 'Open menu' ) . '"' : ''; // Open button label.
+	$toggle_aria_label_close     = $should_display_icon_label ? 'aria-label="' . __( 'Close menu' ) . '"' : ''; // Close button label.
 
 	$responsive_container_markup = sprintf(
-		'<button aria-haspopup="true" aria-label="%3$s" class="%6$s" data-micromodal-trigger="%1$s">%9$s</button>
+		'<button aria-haspopup="true" %3$s class="%6$s" data-micromodal-trigger="%1$s">%9$s</button>
 			<div class="%5$s" style="%7$s" id="%1$s">
 				<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
 					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s">
-							<button aria-label="%4$s" data-micromodal-close class="wp-block-navigation__responsive-container-close">%10$s</button>
+							<button %4$s data-micromodal-close class="wp-block-navigation__responsive-container-close">%10$s</button>
 						<div class="wp-block-navigation__responsive-container-content" id="%1$s-content">
 							%2$s
 						</div>
@@ -630,8 +632,8 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 			</div>',
 		esc_attr( $modal_unique_id ),
 		$inner_blocks_html,
-		__( 'Open menu' ), // Open button label.
-		__( 'Close menu' ), // Close button label.
+		$toggle_aria_label_open,
+		$toggle_aria_label_close,
 		esc_attr( implode( ' ', $responsive_container_classes ) ),
 		esc_attr( implode( ' ', $open_button_classes ) ),
 		safecss_filter_attr( $colors['overlay_inline_styles'] ),