Hello, all our pages that have a View with a custom search form are showing the following console error - "Incorrect use of <label for=FORM_ELEMENT> The label's for attribute doesn't match any element id. This might prevent the browser from correctly autofilling the form and accessibility tools from working correctly. To fix this issue, make sure the label's for attribute references the correct id of a form field."
You can view the error in Chrome Console on your Demo Site here - hidden link - so it does not appear to be anything to do with our setup.
Hi Nigel, thanks for getting back to me. That's odd, I've tried Chrome on both Mac and Windows and both are showing the error. I've attached a screenshot on Mac in incognito mode. Hope that helps.
We have double-checked it, but we're still unable to see this error message in the console tab (checked in different browsers). Can you please share a print, or perhaps even a video?
I've tried 3 different devices (both Mac and Windows) and all show the error. The video is showing your Demo Reference Sites - https://discover-wp.com/site-templates/ - so hopefully easier for you to debug but I also get the same error on our website. I've shown on the video that the error is not limited to the one reference site. The browser used on the video is Chrome version 114.
Thanks for the clarifications, now we were able to check this error.
However, it seems to be more a generic message than anything related to Toolset. I have checked that it also displays in several other sites in the web. Could you please tell me what would be your concerns about having this message? I tried to search internally, but it seems that this is the first report.
Glad you've been able to confirm the error. Chrome is picking it up as a page error rather than a suggestion for improvement so I think it requires a fix. Accessibility compliance is a requirement for many organisations like ourselves so I would appreciate if this could be fixed in an upcoming update.
It looks like an 'id' that matches the 'for' attribute needs to be added to the form input, so looking at the first error in the video example, I think this would be adding the id="tour-type" to the <select name="wpv-tour-type" class="js-wpv-filter-trigger form-control"> markup - i.e. <select name="wpv-tour-type" class="js-wpv-filter-trigger form-control" id="tour-type">
I can manually do this with jQuery in the interim but would prefer it to be fixed in an update for future developments.
Your case will be added to the threads list in our internal ticket, and in the meantime, the status here will keep as escalated, while we do not have a definitive fix. Please bear in mind that we also do not have a workaround for now.
As you said, you can use JS, but it will be extensive work to apply custom Java script in every page containing a View with this problem. Hopefully it'll be addressed as soon as possible, but unfortunately we still do not have any ETA.
