Leo
(@leohsiang)
Hi there,
Are you referring to the navigation search or the WP default search widget?
not the widget, yeah I’m talking about the navigation search
Hi there,
we are working on accessibility improvements and that will include the Navigation Search.
Today you can:
1. Add this PHP Snippet to insert a revised search form that includes a label and a submit button:
// Add labels and submit button
add_filter( 'generate_navigation_search_output', function() {
printf(
'<form method="get" class="search-form navigation-search" action="%1$s">
<label for="nav-search">Search:</label>
<div class="search-input-wrapper">
<input type="search" placeholder="Enter your search" class="search-field" value="%2$s" name="s" title="%3$s" id="nav-search" />
<button type="submit" class="search-submit" value="%4$s">Search</button>
</div>
</form>',
esc_url( home_url( '/' ) ),
esc_attr( get_search_query() ),
esc_attr_x( 'Search', 'label', 'generatepress' ),
esc_attr_x( 'Search', 'submit button' )
);
} );
2. Add this CSS to style it:
.navigation-search.nav-search-active,
.inside-navigation .navigation-search {
top: 100%;
width: 400px;
max-width: calc( 100vw );
left: unset;
}
.inside-navigation .navigation-search .search-input-wrapper {
display: flex;
}
