-
Notifications
You must be signed in to change notification settings - Fork 56
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
yesNoUI description property is not working #3004
Comments
This is a forms issue so its something for the VFFT to fix. |
@caw310 @tbaker-taylor In a discussion with @rhasselle-oddball from VFFT, it was noted that the root cause of "yesNoUI description property not working" was because
Apologies for not including that context previously. |
Some additional context: Here's an example of A work around you might think is that - |
update: I did do some testing - there are some things we can do on our side to update this. However it might not be read out by screen readers. But we can add passing the description to children in radio and yesno pattern. it looks like we might not be doing that. |
The above merged PR solves the visual part of this issue so that the radio and yesNo description is now visible, however the description is still not being read by the screen reader. I will close this ticket and created a new one that is better focused on this more narrow issue: va-radio description is not being read by screen reader #3059 |
Bug Report
What happened
The yesNoUI pattern should allow a property of
description
with a type ofstring | JSX.Element | React.ReactNode
.This description property is working in the textareaUI:
/vets-website/src/applications/accreditation/21a/pages/06-background-information-chapter/conditionThatAffectsExaminationDetails.js
- linkHowever, the description key is not working in yesNoUI:
/src/applications/accreditation/21a/pages/06-background-information-chapter/index.js
- linkNote: this code may look a little strange but this is because we made an abstraction to unify our many uses of the yesNo pattern. The standard yesNo use gives the same problem.
Description is not working whether it is a component or if it is a string even though both work in textareaUI.
What I expected to happen
I expected the yesNoUI description to work like the textareaUI example above, and therefore the UI would look similar to our designs:
THIS IS A FIGMA DESIGN (THE UI CANNOT CREATE THIS)
Reproducing
Steps to reproduce:
Urgency
How urgent is this request? Please select the appropriate option below and/or provide details
Details
We are currently putting the description below the yesNoUI patterns but this does not link the description to the yesNoUI for screen readers. We also feel it is better for the note about how they should answer the yes/no question be before the yes/no options (but after the question) since it is necessary information for them to answer it.
The text was updated successfully, but these errors were encountered: