Skip to content
New issue

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

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

Already on GitHub? # to your account

Improve FormElement Accessibility #496

Merged
merged 8 commits into from
Apr 30, 2020
Merged

Conversation

alexpaxton
Copy link
Contributor

@alexpaxton alexpaxton commented Apr 30, 2020

Closes #494

This change should allow inputs to be rendered inside labels (which has better accessibility) without breaking the API

Changes

  • Render FormLabel as a <div /> instead of <label /> unless htmlFor is passed in
  • Add optional htmlFor prop to FormElement & FormValidationElement
    • If a value is passed in FormElement renders as a <label /> instead of <div />
  • Bump label font size from 12px to 13px

Screenshots

Screen Shot 2020-04-30 at 12 03 57 PM

Checklist

Check all that apply

  • Updated documentation to reflect changes
  • Added entry to top of Changelog with link to PR (not issue)
  • Tests pass
  • Peer reviewed and approved
  • Signed CLA (if not already signed)

@alexpaxton alexpaxton requested a review from marcdel April 30, 2020 19:11
@alexpaxton alexpaxton merged commit f86c88f into master Apr 30, 2020
@alexpaxton alexpaxton deleted the form-element-accessibility- branch April 30, 2020 21:45
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Feature Request: make form inputs accessible by default
2 participants