Accessibility: Orphaned form label

Created on 27 May 2025, 8 days 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

Production build 0.71.5 2024