search

projectEndings / staticSearch

A codebase to support a pure JSON search engine requiring no backend for any XHTML5 document collection
https://endings.uvic.ca/staticSearch/docs/index.html
Mozilla Public License 2.0
46 stars 21 forks source link

Invalid use of `label/@for` #283

Closed martindholmes closed 2 months ago

martindholmes commented 8 months ago

When I validate our test suite pages with vnu.jar in the dev branch (not in the release-1.4 branch), I get the following errors:

"search.html":67.27-67.47: error: The value of the “for” attribute of the “label” element must be the ID of a non-hidden form control.
"search.html":76.27-76.47: error: The value of the “for” attribute of the “label” element must be the ID of a non-hidden form control.
"search.html":89.27-89.57: error: The value of the “for” attribute of the “label” element must be the ID of a non-hidden form control.
"search.html":100.27-100.47: error: The value of the “for” attribute of the “label” element must be the ID of a non-hidden form control.
"search.html":104.27-104.47: error: The value of the “for” attribute of the “label” element must be the ID of a non-hidden form control.
"search.html":108.27-108.46: error: The value of the “for” attribute of the “label” element must be the ID of a non-hidden form control.

This is because the we're doing stuff like this:

 <fieldset class="ssFieldset" title="People involved" id="ssFeat1">
                  <legend><label for="ssFeat1">People involved: </label></legend><input type="text" title="People involved" placeholder="Start typing..." class="staticSearch.feat staticSearch_feat"/></fieldset>

@for is only supposed to point to a form control, not to a fieldset, and has the side-effect that interacting with the label can manipulate the control. Since these labels are not for that purpose, I would suggest just dropping the <label> element and substituting <span class="label">. This error was introduced (by me) when working on issue #268.

martindholmes commented 8 months ago

This turns out to be caused by the fact that my original plan in issue #268 was bad; electing to use the HTML <label> element in the configuration file is a bad idea, because in many of the contexts we output "labels", an HTML <label> is the wrong component because it has a specific function tied to a single form control.

I now believe we should have chosen <span> instead, allowing the use of CSS classes or @style, but avoiding the problem of the @for attribute. Where the target filter caption is in fact a label, its contents can be substituted; otherwise, we just output the span in the required context.

joeytakeda commented 7 months ago

I believe that the labeling stuff hasn't made it into a release yet, so I don't see any issue with reversing course and switching this to a <span>; one can always add aria-* attributes to make it operate as a label, if I'm understanding this correctly.

martindholmes commented 7 months ago

Fix committed in commit 88e81f2. If no problems emerge, this can be closed.

martindholmes commented 2 months ago

This seems fine, so closing.