[6.x] Don't reserve space when a field's display label is hidden#14803
Merged
Conversation
Spacing between a field's label, control, instructions and errors is now owned by the container via `gap` rather than margins on each element, and the nested header/text wrappers are flattened into a single header region. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
When a field hides its display label and has no other visible label content (asterisk, lock avatar or sync icon), render no field header at all and attach a screen-reader-only label to the control instead, so it doesn't leave an empty gap above the field. Fixes #14707 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Field headers inside grid table cells are already hidden by the existing `.grid-cell` rule, so this selector had no effect. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #14707. Replaces #14710.
When a field hides its display label (
hide_display), the field still rendered a label header containing the screen-reader-only label, which reserved ~8px of empty vertical space above the field.Now, when a field's label has no visible content (no label text, required asterisk, lock avatar or sync icon), no field header is rendered at all — a screen-reader-only label is attached to the control instead, preserving accessibility without reserving space.
Along the way, the
Fieldcomponent's spacing was refactored to use containergapinstead of per-element margins, and the nested header/text wrapper divs were flattened into a single header region. This made the empty-header case collapse cleanly and removed a redundantsr-onlyrule in the grid fieldtype CSS.