-
Notifications
You must be signed in to change notification settings - Fork 81
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
feat: Add aria attributes to RangeInput #1560
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey this looks good - all the elements are there and thanks for adding storybook at well.
Would you mind exploring a small code change and adding another test case for when the consumer does pass in their own aria-
attributes?
This would be in addition to the test already there. The way the code is written right now we would ignore those props if they passed them in. We usually want to handle cases where users are passing in props - described more here
Test cases I would love to see:
- "handles custom
aria-
attributes if passed in" - "if default value is not present, uses midpoint between min and max as
aria-valuenow
"
labels: aria-valuemin, aria-valuemax, aria-valuenow tests for correct default value and passed in aria- labels
I've added tests. |
…ther than React camel case
@kimallen Thanks for calling out those React warnings. They were caused by not using snake case Fixing that caused the test to start failing. Also started seeing type errors in Also added another step to our aria test to check that keyboard actions are actually updating the |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good, I think we can merge!
Summary
Adds aria-min, aria-max, and aria-valuenow labels. Also adds optional min and max as input props.
Related Issues or PRs
closes issue #1542
How To Test
Tests should reflect added min/max props and corresponding aria values.
To test the value manually, run storybook (
yarn storybook
) and try out the different sliders with the developer tools --> Element open. You should seearia-min
andaria-max
values. When moving the slider, you should see thearia-valuenow
changing.