Accessibility: Orphaned form label

Created on 27 May 2025, about 1 month ago

Problem/Motivation

The bef_links widget produces a stray <label> element not tied to to the associated form element, resulting in an Alert in WebAim WAVE accessibility tool:

Orphaned form label

The HTML output:

<!-- BEGIN OUTPUT from 'form-element-label.html.twig' -->
<label for="edit-cat">Category</label>
<!-- END OUTPUT from 'form-element-label.html.twig' -->

<!-- BEGIN OUTPUT from 'modules/contrib/better_exposed_filters/templates/bef-links.html.twig' -->
<input type="hidden" name="cat" value="All" />
<div data-drupal-selector="edit-cat" id="edit-cat" name="cat" class="bef-links">
<ul>
<li><a href="/view-page" id="edit-cat-all" name="cat[All]" class="bef-link bef-link--selected">- Any -</a>
<li><a href="/view-page?cat=option1" id="edit-cat-option1" name="cat[option1]" class="bef-link">Option 1</a>

Steps to reproduce

Proposed resolution

Add an id attribute to the hidden <input> element.

Remaining tasks

User interface changes

API changes

Data model changes

πŸ› Bug report
Status

Active

Version

7.0

Component

User interface

Created by

πŸ‡ͺπŸ‡¨Ecuador jwilson3

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @jwilson3
  • Pipeline finished with Success
    about 1 month ago
    Total: 298s
    #507942
  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    just tested this out and this doesn't link the hidden inputs to the label. What if you have multiple? Example name="field_bef_letters_value[b]"

  • πŸ‡ͺπŸ‡¨Ecuador jwilson3

    Good points.

    Needs exploration to determine how the ID attribute is set and passed into the form-element-label.html.twig. and also pass it into bef-links.html.twig.

    The only other idea I can come up with is to change the #type to fieldset, in order to style a fieldset legend instead of having a stray label.

  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    Won’t lie I’m trying to under the purpose of the label

  • πŸ‡ͺπŸ‡¨Ecuador jwilson3

    The only thing I can think of is that the label element is displayed here for visually consistent styling when this element appears alongside other exposed filter elements that *do* rely on the form element label.

  • πŸ‡¨πŸ‡¦Canada Liam Morland Ontario, CA πŸ‡¨πŸ‡¦

    I don't think it makes sense to have a label for an input that is hidden.

    ARIA could be used to associate this label with what it is labelling. It would still not be a label element.

  • πŸ‡ͺπŸ‡¨Ecuador jwilson3

    I don't think it makes sense to have a label for an input that is hidden.

    I totally agree with you. And my prior suggestion to convert to a fieldset w/ legend was rooted in this thinking. But a fieldset that only contains a hidden form element with a list of links also makes no sense semantically.

    Semantically, the only thing I can think of that makes sense here is a <nav> wrapper with a span or div tag around the label. Of course, at that point we would lose the default Drupal form element label styling, which makes this issue somewhat of a breaking change.

    And sadly this is why I ended up with the current workaround to just add the id attribute to the hidden input.

Production build 0.71.5 2024