Problem/Motivation
When a component subfield of a Name element (e.g., Given, Family, Middle, etc.) has its
Label display setting set to title (aka above), the output contains nested <label> elements.
This happens because the Name module pre-renders a themed label and assigns the resulting HTML to #title; Drupal then renders another label for #title, resulting in two labels:
<label for="edit-field-mynamefield-0-given" class="form-item__label">
<label class="form-item__label">Given</label>
</label>
Steps to reproduce
- Add a Name field to a content type (or any entity with a form display).
- In the field settings, set a component subfield (e.g., Given) Label display to above.
- Open the add/edit form and inspect the markup of that subfield.
Expected: One label per input, rendered by core per #title_display = 'before'.
Actual: Two labels (a label nested inside another label).
Proposed resolution
- Do not pre-render and inject a themed label into
#title for the “title” (above) option.
- Instead, let Form API/Core render the label:
- Set
$element['#title_display'] = 'before' .
- Set
$element['#required'] = $show_component_required_marker to control the HTML5 required/aria-required behavior, consistent with other branches.
- Keep existing behavior for other
title_display modes (description/placeholder/none/attribute).
Remaining tasks
- Implement the change for the
title case.
- Add test coverage to assert there is exactly one label.
User interface changes
- DOM fix: subfield labels no longer duplicated and nested when “above” is selected.
Comments
Comment #2
jcandan commentedComment #3
jcandan commentedComment #5
jcandan commentedTests fail due to #3543024: Failing Tests: Core 11.2+. If that is merged, we will see the tests pass, and the
test-only changesjob correctly fail having added bug regression coverage.Comment #6
jcandan commentedSince this change was needed, this issue could be captured via #3552451: Required state incorrectly marks non-minimum components as required.
Comment #8
jcandan commented#3552451: Required state incorrectly marks non-minimum components as required continues to elude an elegant solution. As opposed to #6, let's capture this fix here.
Comment #9
jcandan commentedComment #10
jcandan commentedComment #12
bluegeek9 commentedI am unable to produce the issue.
Comment #13
jcandan commentedCould you double-check the DOM in developer tools?
The duplication is that there is an extra
<label>element within the<label>:Comment #14
bluegeek9 commentedI see the issue now.
Comment #16
bluegeek9 commented