-
Couldn't load subscription status.
- Fork 639
Description
TextInput supports leadingVisual and trailingVisual for rendering things into the beginning and end of the input. These are strongly visually associated with the input, but are not semantically associated at all, meaning that screen readers will only read them as part of the regular document flow. This can be confusing as the information will appear (to a screen reader) to be rendered just after the input and not associated with it, rather than inside it and directly tied to it.
This is fine for visuals that are purely decorative or redundant with the label, like many icons. But often, visuals confer important meaning onto the element. A visual might indicate:
- The currency of a number
- A keyboard shortcut that focuses the input (ref Add
KeybindingHintcomponent #4750 (comment))
Some possibilities here are already covered by other features, reducing the scope of this issue:
- Validation states: should not be indicated with visuals but rather with
validationStatusprop - Actions (like reset): should not be rendered with
Visualprops but rather withActionprops - Loading states: should be indicated with
loadingprop
It's possible that, given the few use cases (are there any others?) we should just add more props to cover the cases. Maybe a keybindingHint prop or similar would be preferable here - then we can apply the keybinding to the input label.