Associate library-generated `description`, `hint` and `validationMessage` nodes with `aria-describedby`

mxmason commented 3 years ago

Closes #1323.

Overview

When an author provides description, hint and validationMessage values as strings, evergreen-ui now generates the right aria-describedy values to ensure that these messages are exposed to assistive technology.

⚠️ Note: Authors are still required to write their own aria-describedby relationships when they provide description, hint and validationMessage as JSX!

Documentation

I'm happy to mention these new aria- associations in the docs, but I'd like some guidance about if and how I should do that, since I don't see a11y spec explicitly mentioned in the docs.

[x] Updated Typescript types and/or component PropTypes (unneeded in this PR)
[ ] Added / modified component docs
[ ] Added / modified Storybook stories

netlify[bot] commented 3 years ago

Deploy Preview for evergreen-storybook ready!

Name	Link
Latest commit	87ca26957a071d4ff9a097b298ea654d0839e897
Latest deploy log	https://app.netlify.com/sites/evergreen-storybook/deploys/62a8df5623727300084cef77
Deploy Preview	https://deploy-preview-1324--evergreen-storybook.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

mxmason commented 3 years ago

Thanks for catching my omission, @zkuzmic! I think I fixed it; I will double-check in a few!

akleiner2 commented 3 years ago

@mxmason Thank you for the PR! Do you also mind adding a few regression tests to ensure that these don't go anywhere, either? :)

segmentio / evergreen