Closed williamphelps13 closed 4 weeks ago
This is a forms issue so its something for the VFFT to fix. @tbaker1026
@caw310 Opened this issue for Nick to take a look at in our repo
@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
DST doesn't support a description text for VaRadio, which is the root issue. that ticket will need to be for DST bug report.
Apologies for not including that context previously.
Some additional context:
when we talk about "description"
for fields from vets-website
side, e.g. the part between the label and the field, we're talking about passing children
into the web components and making it show up in that area. Either slotted or non-slotted. When you pass children into VaText
, it displays correctly in that area. However with VaRadio
, it already has children (list of va-radio-option
), so perhaps we need a new slotted spot for a "description".
Here's an example of VaText
being passed children https://staging.va.gov/mock-simple-forms-patterns/text-input
However we can't do this with VaRadio
https://staging.va.gov/mock-simple-forms-patterns/radio). (compare RJSF (old patterns) vs new web component patterns
A work around you might think is that - VaRadio
does support formDescription
when used in conjunction with useFormsPattern
, however it's not desired to use useFormsPattern
for these generic cases, since we don't want our label to turn into the header of the page, but instead a generic description slot we can pass to the component.
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.![image](https://github.com/user-attachments/assets/f9201784-248a-4b14-b06a-794acff1e7d4)
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.