[Resolved] Search widget is not accessible

[Karen]

Hey David, added the code but it didn’t work. Still getting this error on all pages:

https://www.dropbox.com/s/nwraw1gqdtb0yes/button.jpg?dl=0

[Fernando]

Hi Karen,

Is that the only remaining error? As mentioned by David, that error should be a false positive because it’s not a skip or anchor link: https://generatepress.com/forums/topic/search-widget-is-not-accessible/page/3/#post-2323362

Let us know.

[Karen]

Seems to be getting a bit confusing with more than one person jumping in. Did you see my comment before his latest? The AC plugin developers submitted the issue to GP via Github and David gave me the new code after that.

[Tom]

Hi there,

David is away on vacation until the end of September.

The code that he provided giving the link a button role is working as can be seen here: https://www.screencast.com/t/ZHeAk4WTBHa

This should fix the accessibility issue until we change the element to a button. I’m not sure if the accessibility plugin you’re using checks for roles like this, which could be why it’s still flagging it.

[Karen]

Hi GP team, checking in on the fixes for the accessibility issues with the GP search widget. The accessibility team I hired to do an audit said they updated the GitHub ticket. Can you guys give an ETA about that? Here is the issue that’s still happening (and see the GitHub ticket).

Header search form missing submit button

Summary Information:
Severity: High
Components Affected: header search
Affected Populations: Blind/Low vision, Cognitive Disabilities
Relevant WCAG Success Criteria: 3.2.2 On Input – Level A
Relevant Techniques Documents: H32: Providing submit buttons
G80: Providing a submit button to initiate a change of context
Issue Description: The search form in the header is missing a submit button.

WCAG asks us to provide a mechanism that allows users to explicitly request changes of context, which would include submitting search forms. Using the Enter or Return key alone is not sufficient as some users will be expecting a button interface and may not know how to submit the search without it.

[David]

Hi Karen,

first off, thank you for taking the time on this matter.
We have not set a time frame on making the necessary changes to the nav search yet, but it is high on our priority list.

Considering all the points above, i have put this PHP together:

// Addd role=button to toggle
add_filter('generate_navigation_search_menu_item_output', function(){
    return sprintf(
        '<span class="menu-bar-item search-item"><a aria-label="%1$s" role="button" href="#">%2$s</a></span>',
        esc_attr__( 'Open Search Bar', 'generatepress' ),
        generate_get_svg_icon( 'search', true ) // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped in function.
    );
});
// 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' )
    ); 
} );

and then some 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;
}

I have made it so the search form appears below the navigation when opened.

Let me know if that works for you

[Karen]

Thanks David. I really appreciate it.

I’m not sure if something is conflicting with our custom theme but the way it opens up below the search icon doesn’t look great and the Search button isn’t working (can’t click on it).

https://www.dropbox.com/s/6yxb2960hnuz1ht/gp-search.jpg?dl=0

I did another scan but the same errors are still there.

[Karen]

I updated the above comment.

[David]

Is it possible to see this on the site ?

[Karen]

Sure! I removed the code but feel free to add it back in. Totally fine with that and would prefer that so the search won’t show up like that. Or, I can a bit later if you’d prefer that.

[Karen]

David?

[David]

Oh, sorry Karen, i misplaced your last reply.
Ill take a look now.

[David]

Have a look now.
Does the Submit work ? ( it did for me ).

How would you like it styled ?

[Karen]

Not following. Did you see my reply above? I removed the code so it’s the same as before. Can you login and add it again to see what happens for you? And then I can check the accessibility checker plugin. Here’s the github that Amber of ED added too for reference: https://github.com/tomusborne/generatepress/issues/430

[David]

I have added the PHP and the CSS to your Child Theme.
If you can check it now ?

[Author]

Posts