Use aria-label instead of visually hidden label
#280
Conversation
Instead of using a `label` element with CSS to visually hide it, use the `aria-label` property on the `input` element itself. Having hidden text for screen readers could cause the label value to be read aloud twice by the screen reader: first when navigating nodes in the form, and then again when focusing the input.
| <input | ||
| aria-label={placeholder} |
There was a problem hiding this comment.
note that this prop defaults to the empty string, so i think you might want {placeholder || null} here?
There was a problem hiding this comment.
placeholder defaults to 'Select Date'
There was a problem hiding this comment.
whoops, my eye looked at the wrong line
ljharb
added
the
semver-major: breaking change
|
Technically I think this is a breaking change, because somebody might have been using the CSS class to style it. |
|
@ljharb I wouldn't expect anybody to use |
|
This looks reasonable to me. I agree with @ljharb that there is definitely a possibility that someone was overriding the class to create a visible label. .... In other news, can we just make a visible label and ship that with an option to hide it for our own designs when we need to? I think that would be nice. |
|
@majapw or even better, we make a visible label and you can't hide it and it just always shows up for everyone! |
|
I suppose the design on airbnb.com now has an actual visible label so we could ostensibly sneak that in. I think that mobile designs will not be so friendly though. |
Instead of using a
labelelement with CSS to visually hide it, use thearia-labelproperty on theinputelement itself. Having hidden text forscreen readers could cause the label value to be read aloud twice by the screen
reader: first when navigating nodes in the form, and then again when focusing
the input.