Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[a11y] Set aria-label explicitly #1594

Merged
merged 3 commits into from
Mar 21, 2019
Merged

[a11y] Set aria-label explicitly #1594

merged 3 commits into from
Mar 21, 2019

Conversation

ryanmurakami
Copy link
Contributor

This PR would supersede #1590.

Currently the aria-label of the date picker input field is being set with the value of the placeholder. This seems to be almost always the wrong choice, as an aria-label is totally different from a placeholder. This PR makes it so you can explicitly set the aria-label of the input fields and the placeholder is no longer used for that attribute.

@coveralls
Copy link

coveralls commented Mar 21, 2019

Coverage Status

Coverage remained the same at 84.486% when pulling f34f227 on ryanmurakami:explicit-arialabel into 32b5f3d on airbnb:master.

Copy link
Member

@ljharb ljharb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It'd be good to have a test to cover my comment.

@@ -217,7 +220,7 @@ class DateInput extends React.PureComponent {
focused && styles.DateInput_input__focused,
disabled && styles.DateInput_input__disabled,
)}
aria-label={placeholder}
aria-label={ariaLabel}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we'd need to retain the ariaLabel || placeholder fallback here, otherwise this is a breaking change.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, got it. Didn't think about the breaking nature of this. I'll want some way to not have any aria-label field, so what do you think about having a ternary like: ariaLabel === undefined ? placeholder : null

Copy link
Member

@ljharb ljharb Mar 21, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I’d do : undefined, but that looks fine to me!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I goofed the example a bit. I used ariaLabel as the second case in the ternary, it shouldn't have been null.

@ljharb ljharb added the semver-minor: new stuff Any feature or API addition. label Mar 21, 2019
@ljharb ljharb merged commit bc5c736 into react-dates:master Mar 21, 2019
@ryanmurakami ryanmurakami deleted the explicit-arialabel branch March 22, 2019 03:36
@ryanmurakami
Copy link
Contributor Author

@backwardok @ljharb Thanks for the thorough review and good comments!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
semver-minor: new stuff Any feature or API addition.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants