`TextInput` `leading/trailingVisual` is not semantically associated with the input

[iansan5653]

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 https://github.com/primer/react/pull/4750#discussion_r1705866754)

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 validationStatus prop
• Actions (like reset): should not be rendered with Visual props but rather with Action props
• Loading states: should be indicated with loading prop

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.