Prop request: Form field with connected fields #1195
-
|
👋 heyo my fav Paste team! I've run into a few occasions when translating a legacy Consoles pattern (i.e. Status Callback URL input with GET/POST select) into Paste components where an input is paired with another select and needs to be visually represented in the UI as being connected somehow. Using separate labels on each form element seems to visually disconnect them from each other, so I've been suggesting we add an additional select next to the Input without a visible Label (we've been discussing this here for more context). But aside from this specific example, I'm sure we'll run into other scenarios similar to this where we'll have to represent related (or connected) form fields (inputs/selects) and it might be helpful to have a specific component or modification on an existing Input or Select that would allow us to attach an addition field to it. That way we could have a consistent visual styling on how the connected fields should look across Console (i.e. consistent spacing in between the connected fields) and also have the Label be represented in the DOM correctly as the label for both fields. Right now we are kind of hacking this by just not showing a label on one of the form elements, but I'm sure this isn't super great for screen readers.
Anyway, I was exploring how other design systems handle this type of scenario, and it looks like Polaris has a Text field with connected field example of their Text Field that shows the addition of a
|
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
|
Hi @kylegilbreath thanks for the suggestion. I'll share with the team and get back with you. |
Beta Was this translation helpful? Give feedback.
-
|
@kylegilbreath the team talked about this today. It looks like Polaris isn't meeting the accessibility guidelines on that example. Each input must be labelled. Their example kind of works, but its a bit of a stretch in that it is implicit that weight has a unit of measure. I think a lot of the accessibility concerns have been discussed in previous discussions: #1188 and #993. We'll either add guidance to the docs or develop a pattern to help make these types of connected fields more consistent. If you'd like to contribute to that guidance or pattern, let us know. Thanks! |
Beta Was this translation helpful? Give feedback.
@kylegilbreath the team talked about this today. It looks like Polaris isn't meeting the accessibility guidelines on that example. Each input must be labelled. Their example kind of works, but its a bit of a stretch in that it is implicit that weight has a unit of measure. I think a lot of the accessibility concerns have been discussed in previous discussions: #1188 and #993.
We'll either add guidance to the docs or develop a pattern to help make these types of connected fields more consistent. If you'd like to contribute to that guidance or pattern, let us know. Thanks!