Adds aria-label to the search button, as accessibility enhancement (#38136)

Sisanu · ryelle · Mamaduka · commit 42bbca249983 · 2022-03-29T11:06:49.000+04:00
* Adds aria-label to the search button, as accessibility enhancement

* Strip all tags for the aria label attribute

* Add aria label only when the button is an icon

Co-authored-by: Kelly Dwan &lt;ryelle@users.noreply.github.com&gt;
diff --git a/packages/block-library/src/search/index.php b/packages/block-library/src/search/index.php
@@ -73,6 +73,7 @@ function render_block_core_search( $attributes ) {
 	if ( $show_button ) {
 		$button_internal_markup = '';
 		$button_classes         = $color_classes;
+		$aria_label             = '';
 
 		if ( ! $is_button_inside ) {
 			$button_classes .= ' ' . $border_color_classes;
@@ -82,17 +83,19 @@ function render_block_core_search( $attributes ) {
 				$button_internal_markup = wp_kses_post( $attributes['buttonText'] );
 			}
 		} else {
+			$aria_label             = sprintf( 'aria-label="%s"', esc_attr( wp_strip_all_tags( $attributes['label'] ) ) );
 			$button_classes        .= ' has-icon';
 			$button_internal_markup =
 				'<svg id="search-icon" class="search-icon" viewBox="0 0 24 24" width="24" height="24">
-			        <path d="M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"></path>
-			    </svg>';
+					<path d="M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"></path>
+				</svg>';
 		}
 
 		$button_markup = sprintf(
-			'<button type="submit" class="wp-block-search__button %s" %s>%s</button>',
+			'<button type="submit" class="wp-block-search__button %s" %s %s>%s</button>',
 			esc_attr( $button_classes ),
 			$inline_styles['button'],
+			$aria_label,
 			$button_internal_markup
 		);
 	}
