[Resolved] Views search form triggers missing form label error on WAVE

[Author]

Posts

[TomE1428]

I am trying to use this support thread to solve the exact same issue where a missing form label shows as an error in a WAVE scan but wrapping the short code with <label> is not working. I have tried several places to wrap in the label tag and I just keep getting the error.

https://toolset.com/forums/topic/views-search-form-triggers-missing-form-label-error-on-wave/

<!-- wp:toolset-views/custom-search-filter {"field":{"shortcode":"wpv-filter-search-box","name":"Text search (title and content)","params":{"attributes":{"field":"search","type":"search"}}},"shortcode":"[wpv-filter-search-box placeholder='Keyword Search' output='bootstrap']","shortcode_data":{"attributes":{"placeholder":"Keyword Search"}},"style":{"cssClasses":[],"blockAlign":"left"},"showLabel":true,"labelText":[Search],"content":"\u003cdiv class=\u0022form-group\u0022\u003e\u003cspan class=\u0022wpv-custom-search-filter__input\u0022\u003e[wpv-filter-search-box placeholder='Keyword Search' output='bootstrap']\u003c/span\u003e\u003c/div\u003e"} -->
<div class="wp-block-toolset-views-custom-search-filter wpv-custom-search-filter wpv-custom-search-filter-label-top" data-toolset-views-custom-search-filter="1"><div><div class="form-group"><span class="wpv-custom-search-filter__input"><label>[wpv-filter-search-box placeholder='Keyword Search' output='bootstrap']</label></span></div></div></div>
<!-- /wp:toolset-views/custom-search-filter -->

hidden link

Any help would be appreciated. Thanks for your time.

[Shane]

HI Tim,

Thank you for getting in touch.

Can you let me know what tool you're using to scan the page? Or let me know how I can replicate the errors on your site ?

Right now i'm not seeing any label information on the frontend of your site.

Thanks,
Shane

[TomE1428]

Sure, I am using WAVE. Here is the link to the scan of that page.

hidden link

It is the first "keyword search" input field. The other search fields are fine.

Thanks again for your help.

[Shane]

Hi Martin,

I understand the issue now. The label tags are indeed missing but based on your design i suspect that you don't want to have label tags.

However if you need to have the label tags they can be added by using the following.

<label for='some-id'>Some Text</label>

Now some-id needs to be replaced with the ID of the field that the label is form. Are you using the classic view setup to create this or are you using the Blocks to design your view?

If you're using blocks then there is a label option when you highlight the filter field.

Please let me know.

Thanks,
Shane

[TomE1428]

I am using the block editor. I am not very good at it. I have a hard time working with Gutenberg. But when I toggle the label on and off I still get the same error and the label is now showing as an orphaned label and the field is still showing without a label.

This is the code I get when I switch out of the block editor:

<div class="wp-block-toolset-views-custom-search-filter wpv-custom-search-filter wpv-custom-search-filter-label-top" data-toolset-views-custom-search-filter="1"><div><div class="form-group"><label class="wpv-custom-search-filter__label" for="post-search">Search:</label><!-- ## --><span class="wpv-custom-search-filter__input">[wpv-filter-search-box output='bootstrap']</span></div></div></div>

I see the label tag there but for some reason the scan still ignores it. The compliancy is more important to my client than the design so showing all the labels will be fine. I left the label on this one so you can see it.

hidden link

thanks again!

[Shane]

Hi Tom,

Would you mind allowing me to have admin access to the website so that I can have a more detailed look at this for you ?

I've enabled the private fields for your next response.

Thanks,
Shane

[Shane]

Hi Tom,

I see the issue.

The problem with the Block editor is that you're not able to properly specify the For attribute for the label, hence why you're getting these issues.

At present you may not be able to achieve this as a solution for this will need to be done directly from our development team.

However you can rebuild this search using the Classic archive editor as this provides you with the HTML and CSS code to make these changes and add the correct labelling information.

Please let me know what you think of this idea.

Thanks,
Shane

[TomE1428]

My issue is resolved now. Thank you!