-
Notifications
You must be signed in to change notification settings - Fork 130
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
Allow passing custom aria-describedby values to form components #1813
Conversation
🦋 Changeset detectedLatest commit: e619bee The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Codecov Report
@@ Coverage Diff @@
## next #1813 +/- ##
==========================================
- Coverage 91.85% 91.81% -0.04%
==========================================
Files 172 172
Lines 3534 3544 +10
Branches 1134 1139 +5
==========================================
+ Hits 3246 3254 +8
- Misses 268 270 +2
Partials 20 20
|
…mponents Namely ImageInput, Input, RadioButtonGroup and Select
ebbfc91
to
e619bee
Compare
const descriptionIds = `${ | ||
descriptionId ? `${descriptionId} ` : '' | ||
}${validationHintId}`; |
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.
Couldn't think of anything cleaner here. But in the end I think it's pretty clear, and tests also document the reasoning behind this. Feedback welcome.
Follows up on #1795
Purpose
#1795 programatically associated input
validationHint
s with input elements usingaria-describedby
.However, it overlooked the case where an implementation wants to pass multiple descriptions to
aria-describedby
. In the current implementation, any custom id passed to the attribute would be overridden by the generated id of thevalidationHint
element.We're already running into this use case in Circuit UI itself, specifically in the
CurrencyInput
component, where the input needs to be described both by itsvalidationHint
but also by the currency suffix (otherwise the currency is left out of the accessibility properties of the input.Approach and changes
Combine the
validationHintId
(generated internally) with any customaria-describedby
value (a list of ids, separated with spaces) passed to the component.Covered extensively with the awesome
@testing-library
matchers 💙Definition of done