Webform with any required element causes a11y warnings

Open on Drupal.org →

Created on 18 September 2023, about 1 year ago

Updated 19 September 2023, about 1 year ago

Problem/Motivation

Warning: This label's "for" attribute contains an ID for an element that is not a form control. Ensure that you have entered the correct ID for the intended element.

When you have a form with a required element, we get a little notice at the top of the form that explains that an asterisk indicates that a field is required. This notice is a div containing a hidden label, and a paragraph tag, as follows:

<div id="edit-required-note" class="...">
  <label for="edit-required-note">Required Note</label>
  <p>* required</p>
</div>

This label has a for attribute that references a HTML element that is not part of the form. The ID edit-required-note is on the surrounding <div>, which is not a form control. This for attribute should be removed from this label.

Steps to reproduce

1. Add a required field to a webform
1. View the form
1. View source on the "* required" at the top
1. Confirm the invalid for attribute

🐛 Bug report

Status

Closed: cannot reproduce

Version

6.1

Component

Code

Created by

🇺🇸United States jenlampton

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.

a11y

Sign in to follow issues

Comments & Activities

Issue created by @jenlampton
Comment about 1 year ago →
🇺🇸United States jenlampton
Comment about 1 year ago →
🇺🇸United States jenlampton
Comment about 1 year ago →
🇺🇸United States jenlampton
Additionally, when we attempt to remove the for attribute using Twig in the template for the webform element form-element--webform-processed-text.html.twig, the entire label disappears.

{{ label.removeAttribute('for') }}
Status changed to Postponed: needs info about 1 year ago8:59pm 18 September 2023
Comment about 1 year ago →
🇺🇸United States jrockowitz Brooklyn, NY
What theme are you using because the default template uses the below markup?

<div class="webform-required"> <span class="form-required"></span>{{ label }} </div>
@see https://git.drupalcode.org/project/webform/-/blob/6.1.x/templates/webfor...
Status changed to Closed: cannot reproduce about 1 year ago1:40am 19 September 2023
Comment about 1 year ago →
🇺🇸United States jenlampton
You're right we added that. So sorry - I thought it was being added by webform!
Closing (and sorry for the noise)

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024