fix(ui): render DateTime label as <label> instead of <span> #12949
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.
What / Why
Date & Time fields were rendering their field label as a
<span>while every other field type uses a proper<label>with a matchinghtmlFor.Because the element was a span it broke styles and made 'field-label' have different styles from the rest of 'field-label's.
Root cause: DateTimeField failed to pass its
path(or an explicithtmlFor) toFieldLabel. WhenFieldLabelreceives nohtmlFor, it intentionally downgrades to a<span>.Screenshots
Before
DateTime label rendered as
<span>, causing style inconsistenciesAfter
DateTime label now rendered as proper
<label>elementChanges introduced
packages/ui/src/fields/DateTime/index.tsxpath={path}prop toFieldLabelcomponentBehavior after the fix
<label>elements withfor="field-…"How to test manually
pnpm dev fields<label>