Skip to content

Commit a78874b

Browse files
adamsilversteinadamsilverstein
committed
Bundled Themes: Use the <search> element in classic theme search forms.
Update the `searchform.php` template in Twenty Sixteen, Twenty Seventeen, Twenty Twenty, and Twenty Twenty-One to wrap the form in the HTML `<search>` landmark element, dropping the redundant `role="search"` attribute on `<form>`. For Twenty Twenty and Twenty Twenty-One, the existing `aria_label` support is moved onto the new `<search>` element so it labels the landmark. Block themes (Twenty Twenty-Two and later) inherit their search markup from the `core/search` block and need no theme-level change.
1 parent ddb1363 commit a78874b

4 files changed

Lines changed: 53 additions & 45 deletions

File tree

‎src/wp-content/themes/twentyseventeen/searchform.php‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,22 @@
1212

1313
<?php $unique_id = esc_attr( twentyseventeen_unique_id( 'search-form-' ) ); ?>
1414

15-
<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
16-
<label for="<?php echo $unique_id; ?>">
17-
<span class="screen-reader-text">
15+
<search>
16+
<form method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
17+
<label for="<?php echo $unique_id; ?>">
18+
<span class="screen-reader-text">
19+
<?php
20+
/* translators: Hidden accessibility text. */
21+
echo _x( 'Search for:', 'label', 'twentyseventeen' );
22+
?>
23+
</span>
24+
</label>
25+
<input type="search" id="<?php echo $unique_id; ?>" class="search-field" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder', 'twentyseventeen' ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
26+
<button type="submit" class="search-submit"><?php echo twentyseventeen_get_svg( array( 'icon' => 'search' ) ); ?><span class="screen-reader-text">
1827
<?php
1928
/* translators: Hidden accessibility text. */
20-
echo _x( 'Search for:', 'label', 'twentyseventeen' );
29+
echo _x( 'Search', 'submit button', 'twentyseventeen' );
2130
?>
22-
</span>
23-
</label>
24-
<input type="search" id="<?php echo $unique_id; ?>" class="search-field" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder', 'twentyseventeen' ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
25-
<button type="submit" class="search-submit"><?php echo twentyseventeen_get_svg( array( 'icon' => 'search' ) ); ?><span class="screen-reader-text">
26-
<?php
27-
/* translators: Hidden accessibility text. */
28-
echo _x( 'Search', 'submit button', 'twentyseventeen' );
29-
?>
30-
</span></button>
31-
</form>
31+
</span></button>
32+
</form>
33+
</search>

‎src/wp-content/themes/twentysixteen/searchform.php‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,22 @@
99

1010
?>
1111

12-
<form role="search" method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
13-
<label>
14-
<span class="screen-reader-text">
12+
<search>
13+
<form method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
14+
<label>
15+
<span class="screen-reader-text">
16+
<?php
17+
/* translators: Hidden accessibility text. */
18+
echo _x( 'Search for:', 'label', 'twentysixteen' );
19+
?>
20+
</span>
21+
<input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder', 'twentysixteen' ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
22+
</label>
23+
<button type="submit" class="search-submit"><span class="screen-reader-text">
1524
<?php
1625
/* translators: Hidden accessibility text. */
17-
echo _x( 'Search for:', 'label', 'twentysixteen' );
26+
echo _x( 'Search', 'submit button', 'twentysixteen' );
1827
?>
19-
</span>
20-
<input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder', 'twentysixteen' ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
21-
</label>
22-
<button type="submit" class="search-submit"><span class="screen-reader-text">
23-
<?php
24-
/* translators: Hidden accessibility text. */
25-
echo _x( 'Search', 'submit button', 'twentysixteen' );
26-
?>
27-
</span></button>
28-
</form>
28+
</span></button>
29+
</form>
30+
</search>

‎src/wp-content/themes/twentytwenty/searchform.php‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,17 @@
2323
$twentytwenty_aria_label = 'aria-label="' . esc_attr( $args['label'] ) . '"';
2424
}
2525
?>
26-
<form role="search" <?php echo $twentytwenty_aria_label; ?> method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
27-
<label for="<?php echo esc_attr( $twentytwenty_unique_id ); ?>">
28-
<span class="screen-reader-text">
29-
<?php
30-
/* translators: Hidden accessibility text. */
31-
_e( 'Search for:', 'twentytwenty' ); // phpcs:ignore: WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations
32-
?>
33-
</span>
34-
<input type="search" id="<?php echo esc_attr( $twentytwenty_unique_id ); ?>" class="search-field" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder', 'twentytwenty' ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
35-
</label>
36-
<input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'twentytwenty' ); ?>" />
37-
</form>
26+
<search <?php echo $twentytwenty_aria_label; ?>>
27+
<form method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
28+
<label for="<?php echo esc_attr( $twentytwenty_unique_id ); ?>">
29+
<span class="screen-reader-text">
30+
<?php
31+
/* translators: Hidden accessibility text. */
32+
_e( 'Search for:', 'twentytwenty' ); // phpcs:ignore: WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations
33+
?>
34+
</span>
35+
<input type="search" id="<?php echo esc_attr( $twentytwenty_unique_id ); ?>" class="search-field" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder', 'twentytwenty' ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
36+
</label>
37+
<input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'twentytwenty' ); ?>" />
38+
</form>
39+
</search>

‎src/wp-content/themes/twentytwentyone/searchform.php‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,10 @@
2020

2121
$twentytwentyone_aria_label = ! empty( $args['aria_label'] ) ? 'aria-label="' . esc_attr( $args['aria_label'] ) . '"' : '';
2222
?>
23-
<form role="search" <?php echo $twentytwentyone_aria_label; ?> method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
24-
<label for="<?php echo esc_attr( $twentytwentyone_unique_id ); ?>"><?php _e( 'Search&hellip;', 'twentytwentyone' ); // phpcs:ignore: WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></label>
25-
<input type="search" id="<?php echo esc_attr( $twentytwentyone_unique_id ); ?>" class="search-field" value="<?php echo get_search_query(); ?>" name="s" />
26-
<input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'twentytwentyone' ); ?>" />
27-
</form>
23+
<search <?php echo $twentytwentyone_aria_label; ?>>
24+
<form method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
25+
<label for="<?php echo esc_attr( $twentytwentyone_unique_id ); ?>"><?php _e( 'Search&hellip;', 'twentytwentyone' ); // phpcs:ignore: WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></label>
26+
<input type="search" id="<?php echo esc_attr( $twentytwentyone_unique_id ); ?>" class="search-field" value="<?php echo get_search_query(); ?>" name="s" />
27+
<input type="submit" class="search-submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'twentytwentyone' ); ?>" />
28+
</form>
29+
</search>

0 commit comments

Comments
 (0)