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

feat: Add aria attributes to RangeInput #1560

Merged
merged 10 commits into from
Sep 20, 2021
Merged

Conversation

kimallen
Copy link
Contributor

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 see aria-min and aria-max values. When moving the slider, you should see the aria-valuenow changing.

@trussworks-infra-zz
Copy link

trussworks-infra-zz commented Sep 13, 2021

Warnings
⚠️ This PR does not include changes to storybook, even though it affects component code.

Generated by 🚫 dangerJS against a675a16

@trussworks-infra-zz trussworks-infra-zz temporarily deployed to storybook September 13, 2021 23:04 Inactive
@kimallen kimallen changed the title Kma rangeinput aria labels 1542 feat-Kma rangeinput aria labels 1542 Sep 13, 2021
@kimallen kimallen changed the title feat-Kma rangeinput aria labels 1542 feat:Kma rangeinput aria labels 1542 Sep 14, 2021
@kimallen kimallen changed the title feat:Kma rangeinput aria labels 1542 feat: Kma rangeinput aria labels 1542 Sep 14, 2021
Copy link
Contributor

@haworku haworku left a 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
@kimallen
Copy link
Contributor Author

I've added tests.
I'm getting this warning with tests, though not sure how to resolve (or why it's complaining):
Warning: Invalid ARIA attribute ariaValueNow. Did you mean aria-valuenow? at RangeInput.tsx line 21

@trussworks-infra-zz trussworks-infra-zz temporarily deployed to storybook September 15, 2021 18:19 Inactive
@trussworks-infra-zz trussworks-infra-zz temporarily deployed to storybook September 15, 2021 18:30 Inactive
@trussworks-infra-zz trussworks-infra-zz temporarily deployed to storybook September 17, 2021 19:18 Inactive
@haworku
Copy link
Contributor

haworku commented Sep 17, 2021

@kimallen Thanks for calling out those React warnings. They were caused by not using snake case aria-valuenow on the test case for "renders aria values" in RangeInput.test.tsx.

Fixing that caused the test to start failing. Also started seeing type errors in RangeInput. That's because aria attributes are an exception to camelcase everything rule in React. Forgot about that 😄. So made more changes in RangeInput.tsx to refer to the aria- attributes in lowercase snake-case.

Also added another step to our aria test to check that keyboard actions are actually updating the aria-valuenow.

Copy link
Contributor

@haworku haworku left a 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!

@haworku haworku changed the title feat: Kma rangeinput aria labels 1542 feat: Add aria attributes to RangeInput Sep 17, 2021
@trussworks-infra-zz trussworks-infra-zz temporarily deployed to storybook September 20, 2021 15:56 Inactive
@kimallen kimallen merged commit 0034835 into main Sep 20, 2021
@kimallen kimallen deleted the kma-rangeinput-aria-labels-1542 branch September 20, 2021 16:12
@haworku haworku mentioned this pull request Sep 24, 2021
brandonlenz added a commit that referenced this pull request Sep 29, 2021
### Features

* Add aria attributes to RangeInput ([#1560](#1560)) ([0034835](0034835))
* Icon component using SVGR ([#1609](#1609)) ([317c859](317c859))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[feat] Add aria attributes to RangeInput
3 participants