-
Notifications
You must be signed in to change notification settings - Fork 1.2k
[ChoiceList] Connecting the ChoiceList error the input with errors via describedByProp #1824
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
Conversation
e0da909
to
b52f915
Compare
b52f915
to
737607f
Compare
const describedBy: string[] = []; | ||
if (error) { | ||
describedBy.push(`${id}Error`); | ||
if (error && typeof error !== 'boolean') { |
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.
If the type is boolean we don't want an area-describedby attribute
/** Additional text to aide in use */ | ||
helpText?: React.ReactNode; | ||
/** Indicates that the choice is aria-describedBy the error message*/ | ||
describedByError?: boolean; |
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.
The reason I went with describedByError: boolean
as oppose to describedBy:string
is because ChoiceList is the one generating the error and the id. So I thought to add describedByError
to the descriptor was more clear. The choice has 1 error and this choice is described by that error.
737607f
to
a088685
Compare
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.
The API update makes sense to me, and the aria-describedby
is now being set on the input as recommended 🚢
a520f9b
to
17ede77
Compare
WHY are these changes introduced?
Fixes #1589
WHAT is this pull request doing?
ariaDescribedBy
prop to Checkbox and RadioButtonaria-describedby
from the ChoiceList fieldsetdescribedByError
key to indicate whether to link the Error to the input or not.How to 🎩
Using the playground, ensure the radio buttons
aria-describedby
attribute matches the ID of the error field.Copy-paste this code in
playground/Playground.tsx
:🎩 checklist
README.md
with documentation changes