Toolset Views - Text search 'Missing form label' error using WAVE

This thread is resolved. Here is a description of the problem and solution.

Problem:

The customer encountered an accessibility error "Missing form label" when running an accessibility check using WAVE on a search filter created with Toolset Views. The issue was due to the text search input field missing an id attribute, which caused the WAVE tool to flag the error. The customer attempted to add a label with the for attribute but still encountered the issue.

Solution:

We initially suggested including both the label and the wpv-filter-search-box shortcode within the tag to address the issue. However, this did not resolve the problem. The customer then discovered that removing the for attribute from the tag and placing the wpv-filter-search-box shortcode directly within the tag successfully resolved the error.

This support ticket is created 2 years, 2 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	9:00 – 12:00	-
-	13:00 – 18:00	13:00 – 18:00	13:00 – 18:00	13:00 – 18:00	13:00 – 18:00	-

Supporter timezone: America/Sao_Paulo (GMT-03:00)

Tagged: Custom search, Views plugin

This topic contains 2 replies, has 2 voices.

Last updated by - 2 years, 2 months ago.

Assisted by: Mateus Getulio.

Author

Posts

August 19, 2024 at 7:50 pm #2723451

Paul Marconi

Hi there,

I am using the Toolset Views to create a search filter. When I used WAVE to do a accessibility check, it output this error:
'Missing form label'
I have a text search in my filter and I have added a label for the text search, so in the 'Search and Pagination', I have this :

<div class="form-group form-search">
<label for="wpv_post_search" class="screen-reader-text">[wpml-string context="wpv-views" name='Event filter - all events search label']Search[/wpml-string]</label>
[wpv-filter-search-box placeholder="Search by pressing Enter"]
</div>

The output HTML is:
<div class="form-group form-search">
<label for="wpv_post_search" class="screen-reader-text">Search</label>
<input type="text" name="wpv_post_search" class="js-wpv-filter-trigger-delayed" placeholder="Search by pressing Enter">
</div>

The text search form doesn't have an id attribute, so that's why it's outputting the ''Missing form label' error. I want to add an id name for this form, like below:
<input type="text" name="wpv_post_search" class="js-wpv-filter-trigger-delayed" placeholder="Search by pressing Enter" id="wpv_post_search">

How and can we add the id attribute to the text search form?

Thank you!

August 20, 2024 at 3:35 pm #2724598

Mateus Getulio

Hello there,

Can you please try to include both shortcodes within the <label> tag to see if it gets the issue fixed:

eg.:

<div class="form-group form-search">
<label for="wpv_post_search" class="screen-reader-text">[wpml-string context="wpv-views" name='Event filter - all events search label']Search[/wpml-string]
[wpv-filter-search-box placeholder="Search by pressing Enter"]
</label>
</div>

Please give it a try and tell me how it goes.
Mateus

August 20, 2024 at 4:05 pm #2724629

Paul Marconi

Hi Mateus,

Including both shortcodes within the <label> tag doesn't fix the issue. It still output the error 'Missing form label' when I checked it with WAVE.

August 20, 2024 at 4:15 pm #2724655

Paul Marconi

Hi Mateus,

The issue is fixed when I remove the for attribute (for="wpv_post_search") from the tag. Then include the
'wpv-filter-search-box' shortcode inside the tag, like below:

[wpv-filter-search-box placeholder="Search by pressing Enter"]

Thank you!