fix(ui-date-input,ui-text-input): label the input with aria-labelledby - #2730
Conversation
DateInput passed `aria-label={callRenderProp(renderLabel)}` to TextInput. When `renderLabel` is a
node rather than a string, `callRenderProp` returns a React element, so the input advertised an
object as its accessible name instead of readable text.
DateInput now generates a deterministic id, hands it to TextInput as `labelId`, and points
`aria-labelledby` at it, so the input is labelled by the real rendered label element.
TextInput v2 gains an optional `labelId` prop that overrides its generated label id. It falls back
to the previous `deterministicId('TextInput-label')` value when omitted, so existing callers are
unaffected.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
Visual regression reportCypress suite: ✅ Passing Visual diff: ✅ No changes.
Accessibility (axe): ✅ No violations. 📊 View full report — click a screenshot's ⚠ badge to see each violation boxed on the image, with the offending element named and contrast failures shown as color swatches. Baselines come from the |
balzss
left a comment
balzss
left a comment
There was a problem hiding this comment.
one question and a nitpick, otherwise it looks ok
| } | ||
|
|
||
| const selectedDate = parseDate(value)[1] | ||
| const labelId = useDeterministicId('TextInput-label')() |
There was a problem hiding this comment.
is this intentionally TextInput and not DateInput?
| id?: string | ||
|
|
||
| /** | ||
| * id for the label. If empty, it's auto generated |
There was a problem hiding this comment.
nit: i'd expand on the explanation a bit further: what id, what label, where, how. doesnt need to be too verbose but i'm not sure if it's obvious why would someone use this
4 participants
Summary
DateInputv2 passedaria-label={callRenderProp(renderLabel)}, so whenrenderLabelwas a node, the toString conversion broke . It now pointsaria-labelledbyat the real label element.TextInputv2 accepts an optionallabelIdto override its generated label id, falling back todeterministicId('TextInput-label').Test Plan
DateInputwith a noderenderLabel(e.g.renderLabel={<Text>Date</Text>}): the field should announce the label text, not[object Object].aria-labelledbyin the DOM.TextInputcallers that pass their ownaria-labelledby— a consumer value still wins over the generated id.Fixes INSTUI-5193
🤖 ONLY THE TEXT ABOVE IS PARTIALLY Generated with Claude Code Otherwise the code is human generated