Allow inline fields with no visible label #2344
Conversation
bryancunningham-okta
force-pushed
the
bc-OKTA-687907-inline-fields
branch
from
c3df213
to
220670e
Compare
| | { | ||
| hasVisibleLabel: false; | ||
| hint?: never; | ||
| placeholder: string; | ||
| } |
There was a problem hiding this comment.
Are we expecting they at least pass in aria-labelledby or aria-label if they have no visible label?
There was a problem hiding this comment.
the actual label prop is still required. It's just visually hidden
There was a problem hiding this comment.
Ah, my bad. I see. So we're just saying if the label is visible, not if it doesn't exist. My bad.
We should also require aria-labelledby if no label is passed in as an alternative. We can keep visually hiding the label, but it'd be good to say our intent is that they have to have a visual label somewhere else. That's what I mean.
There was a problem hiding this comment.
aria-labelledby will be controlled by us. It'll still be labelled by the non-visible label
| } & ( | ||
| | { | ||
| /** | ||
| * If `hasVisibleLabel` is `false` it will also hide any `hint` text and `HintLinkComponent` that is passed in | ||
| */ | ||
| hasVisibleLabel?: false; | ||
| hint: never; | ||
| HintLinkComponent: never; | ||
| } | ||
| | { | ||
| /** | ||
| * defaults to `true` if `false` along with hiding the label it will also hide any `hint` text and `HintLinkComponent` that is passed in | ||
| */ | ||
| hasVisibleLabel?: true; | ||
| /** | ||
| * The helper text content. | ||
| */ | ||
| hint?: string; | ||
| /** | ||
| * A `Link` component to provide greater context that is rendered at the end of the `hint` text | ||
| */ | ||
| HintLinkComponent?: ReactElement<typeof HintLink>; | ||
| } | ||
| ); |
There was a problem hiding this comment.
Is it possible we could rewrite this type to use the function overload syntax? Or have 2 different Field components, one with a label and one that only takes aria-labelledby or something like that?
The way the code works today, it's very confusing.
There was a problem hiding this comment.
This would be a pretty significant rewrite. We'd have to refactor all the form field components(that allow a non-visible label) to handle this 'correctly'
| docs: { | ||
| description: { | ||
| story: | ||
| "TextFields with `hasVisibleLabel` set to false will not render a visible label. Although, the `label` prop is still required for accessibility purposes", |
There was a problem hiding this comment.
| "TextFields with `hasVisibleLabel` set to false will not render a visible label. Although, the `label` prop is still required for accessibility purposes", | |
| "`TextField`s with `hasVisibleLabel` set to false will not render a visible label. Although, the `label` prop is still required for accessibility purposes.", |
There was a problem hiding this comment.
There are other spots in the docs like this as well.
OKTA-687907
Summary
Testing & Screenshots