Skip to content

Commit ed9a290

Browse files
git-nandorclaude
andcommitted
docs(ui-text-input): trim aria comments in TextInput v2
Condense the accessible-name/aria-describedby comment and drop the redundant hasMessages rationale in the v2 TextInput. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent ccc9516 commit ed9a290

1 file changed

Lines changed: 2 additions & 14 deletions

File tree

  • packages/ui-text-input/src/TextInput/v2

packages/ui-text-input/src/TextInput/v2/index.tsx

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -160,11 +160,6 @@ class TextInput extends Component<TextInputProps> {
160160
}
161161

162162
get hasMessages() {
163-
// FormField only renders messages that have text, so only treat the field
164-
// as having messages then. Otherwise the input's `aria-describedby` would
165-
// reference a messages element that was never rendered — e.g. DateTimeInput
166-
// passes an empty-text error message to its sub-inputs just to force the
167-
// invalid styling.
168163
return !!this.props.messages?.some((m) => !!m.text)
169164
}
170165

@@ -238,15 +233,8 @@ class TextInput extends Component<TextInputProps> {
238233
if (props['aria-describedby']) {
239234
descriptionIds = `${props['aria-describedby']}`
240235
}
241-
// FormField renders this control and its `messages` inside a single wrapping
242-
// <label>, so by default the messages' text becomes part of the control's
243-
// accessible *name* (e.g. "Password Password must be at least 6 characters"),
244-
// which is confusing and repeats on every announcement. Messages should be
245-
// the field's *description* instead. So when there are messages, reference
246-
// them via `aria-describedby` and pin the name to the label text only via
247-
// `aria-labelledby`. Keeping the messages inside the <label> preserves the
248-
// native click-on-label focus behavior. A consumer-provided `aria-labelledby`
249-
// takes precedence.
236+
// Keep messages in the description, not the accessible name.
237+
// A consumer-provided aria-labelledby wins.
250238
let labelledById = props['aria-labelledby'] as string | undefined
251239
if (this.hasMessages) {
252240
descriptionIds = [descriptionIds, this._messagesId]

0 commit comments

Comments
 (0)