BorderControl: Make fieldset and legend use optional #42611
Conversation
This facilitates avoiding nested fieldsets when used within a BorderBoxControl.
aaronrobertshaw
added
[Type] Enhancement
| <BorderLabel | ||
| label={ label } | ||
| hideLabelFromVision={ hideLabelFromVision } | ||
| as={ renderAsFieldset ? 'legend' : undefined } |
There was a problem hiding this comment.
I'm thinking that, if this element isn't a legend, and if it's hidden from vision, it's essentially useless, because screen readers won't announce it. On the other hand, if this is part of a split control, we do need some form of accessible labelling, otherwise there's no way of telling which side is which.
I think ideally we wouldn't render BorderLabel at all unless it's a legend, and would instead pass the label value directly to the controls below, where it could be prepended to their existing labels. Would this be doable?
There was a problem hiding this comment.
I'd tend to agree this should either render a fieldset + legend or nothing. Also, if there's a fieldset rendered, the legend (the label prop) should be required, as rendering an unnamed group is a bit pointless.
and would instead pass the label value directly to the controls below, where it could be prepended to their existing labels
Not sure that would be ideal, as concatenation in translatable strings is problematic for some languages and should be avoided.
|
The code works as expected, although I'm not sure about introducing such a specific prop that highlights an implementation detail. I'd also like to take a look at this issue from a more general point of view, as we're going to face this issue across many components (for example, soon when working on I opened #42630 to discuss the best approach moving forward. |
| ) : ( | ||
| <StyledLabel as="legend">{ label }</StyledLabel> | ||
| <StyledLabel { ...labelProps }>{ label }</StyledLabel> |
There was a problem hiding this comment.
To my understanding, this will render a stray <label> element, ie. a <label> that isn't associated with any field.
|
Overall, I'm not sure this component should be responsible for rendering a fieldset + legend. I'd agree with @ciampo that seems something that belongs to the implementation side. Should these kind of 'base' component only render the form controls? Thanks for creating #42630 to have a place for a broader discussion 👍 |
|
Thank you everyone for the reviews and feedback. 👍 I'm not clear on what the next steps should be so am inclined to put this PR on hold until the discussion in #42630 unfolds. I'll happily revisit it once we decide on a path forward. |
|
Closing this PR due to its age and lack of clear direction for a solution. It can be reopened if required. The root issue (#42630) will remain open as it is still important to address. |
Related:
What?
Makes rendering the
BorderControlas afieldsetwith alegendfor its label, optional.Why?
The
BorderControlis primarily used within theBorderBoxControlwhich itself should be afieldset. This PR facilitates avoiding nested fieldsets.Further context can be found here: #42351 (comment)
How?
renderAsFieldsetprop to theBorderControlBorderControlto render using a fieldset/legend combo based on the new propTesting Instructions
npm run storybook:devBorderControlpagedivwithlabelrenderAsFieldsetprop to true i the controlsfieldset/legendcombo. There should also be no visual change.