Accessibility: Add label to search modal input

tomusborne · Oct 26, 2023 · 5329eb5 · 5329eb5
1 parent 86ba936
commit 5329eb5
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/inc/structure/search-modal.php b/inc/structure/search-modal.php
@@ -99,9 +99,9 @@ function generate_do_search_modal_css( $css ) {
 function generate_do_search_fields() {
 	?>
 	<form role="search" method="get" class="search-modal-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
-		<label class="screen-reader-text"><?php echo apply_filters( 'generate_search_label', _x( 'Search for:', 'label', 'generatepress' ) ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></label>
+		<label for="search-modal-input" class="screen-reader-text"><?php echo apply_filters( 'generate_search_label', _x( 'Search for:', 'label', 'generatepress' ) ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></label>
 		<div class="search-modal-fields">
-			<input type="search" class="search-field" placeholder="<?php echo esc_attr( apply_filters( 'generate_search_placeholder', _x( 'Search &hellip;', 'placeholder', 'generatepress' ) ) ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
+			<input id="search-modal-input" type="search" class="search-field" placeholder="<?php echo esc_attr( apply_filters( 'generate_search_placeholder', _x( 'Search &hellip;', 'placeholder', 'generatepress' ) ) ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
 			<button aria-label="<?php echo esc_attr( apply_filters( 'generate_search_button', _x( 'Search', 'submit button', 'generatepress' ) ) ); ?>"><?php echo generate_get_svg_icon( 'search' ); // phpcs:ignore -- Escaped in function. ?></button>
 		</div>
 		<?php do_action( 'generate_inside_search_modal_form' ); ?>