508-defect-3 [COGNITION]: "Finish this request later" button should be styled as a button and positioned higher in the page

[joshkimux]

508-defect-3

Feedback framework

• ❗️ Must for if the feedback must be applied
• ⚠️ Should if the feedback is best practice
• ✔️ Consider for suggestions/enhancements

Definition of done

1. Review and acknowledge feedback.
2. Fix and/or document decisions made.
3. Accessibility specialist will close ticket after reviewing documented decisions / validating fix.

---

Point of Contact

VFS Point of Contact: Josh Kim

Details

The "Finish this request later" button is styled as a link which is materially dishonest causing several issues:

• voice interface users may not be able to activate the button should they say "click on finish this request later link"
• screen reader users may be confused on help calls if they are instructed to click on a link when the screen reader announces it as a button
• low vision screen reader users may be confused that the screen reader is announcing a visually styled link as a button
• breaks consistency with other buttons across the interface

For more on this long-tail effort, check out our buttons vs. links Mural board and this Slack thread discussing why material honesty is so important.

"A few years at an accessibility event, a blind man was telling a story about how he was on the phone with someone who was trying to help him sign up for a service. The person on the phone told him to click the “sign up button” and he couldn’t find it because it was a link. He told the story with a lot more gravity than I can, but that was the point where I realized how important the human-human communication part of accessibility is, it’s not just machine to human." - Tim Wright

Solution

Our solution may change depending on what approach we take and our constraints.

Following this thread with @thehastingsp and @davidakennedy , I'm curious if we might be able to:

• look into the current usage of this button, how many Veterans are currently using it?
• review past research on this button, has the need for it changed?
• test what it might look like without this button in place of well written content, do we even need this since the following already exist:
  • the form auto saves
  • there's a message telling users that it auto saves
  • there's a message below the step x of y heading that tells users that it autosaves and that they can return to this later (@DanielleThierryUSDSVA for awareness, just in case, 'cuz she's awesome 😄 )

Environment

• Operating System: all
• Browser: any
• Screenreading device: any
• Server destination: staging

WCAG or Vendor Guidance (optional)

• Adam Silver: But sometimes buttons look like links
• VA Design System guidance on buttons

Screenshots or Trace Logs

[caw310]

@joshkimux , this issue was discussed today in the DSC meeting. Here is the follow.

• Recode it as a link instead of a button so materially honest.
• Place above Back and Continue buttons.
• Recommended as a temporary solution.

[Mottie]

Temporary fix that moves the "button" above the back & continue buttons has been merged. Still pending is:

three changes might help:

1. Changing this to a Link from react-router-dom to preserve Redux state when navigating to a new URL
2. Make this link only navigate to a new page (not call a function which both saves and navigates)
3. Make the new page do the saving (which is why we needed to preserve the Redux state)
   • This will require a design change (which is why I mentioned the scope creep :sweat_smile:)

from this comment

[Mottie]

I've merged in another change that renders the "Finish this request later" link above the submit button on the review & submit page.

[Mottie]

"Finish this request later" button is styled as a button change to be addressed by the Design system team

[SarahKay8]

@caw310 @caw310 Hi Carol, per Josh's recommendations, "Finish this request later" link has successfully been placed above "Continue + Back" buttons however "Finish this request later" link is still styled as a button

Screenshot for reference:

[joshkimux]

@SarahKay8 and @caw310 , this is awesome work to bump the finish this request later button above the back and continue buttons. Will help a ton with screen reader and mobile discoverability. That being said, I acknowledge that styling this as a button may present some visual design challenges given our absence of a tertiary style for buttons.

Instead of focusing too much on redesigning its style, it may be easier to address this by asking questions a little more upstream:

• does this need to be placed in this particular location?
• what are the rules around finishing something later?
• if forms are automatically saved, could folks finish this request later at anytime and simply leave and return to the form
• could that be communicated via better designed content?
• etc

[k80bowman]

Thank you @SarahKay8 and @joshkimux. As this is a forms library issue, I've added the forms label. @taylorkaren @micahchiang how would you like to handle this?

[taylorkaren]

Remaining work to do: The "Finish this request later" button is styled as a link but should be implemented as a button.

[obliviga]

Hi @joshkimux, should the "Finish this request later" button be styled as a primary or secondary button? Thanks!

Reference: https://design.va.gov/components/button/#examples

[joshkimux]

@obliviga this is tricky, because styling this as a primary or secondary button may negatively impact the sighted user experience for mobile users or folks with cognitive disabilities. I think it would be helpful to have a more upstream conversation about the questions I raised earlier. It may be easier to keep this as a defect-level-3 in the old (current) form system and attempt to resolve this officially in the new form system:

• does this need to be placed in this particular location?
• what are the rules around finishing something later?
• if forms are automatically saved, could folks finish this request later at anytime and simply leave and return to the form
• could that be communicated via better designed content?
• etc

[joshkimux]

Hey folks, quick update here. Following this thread with @thehastingsp and @davidakennedy , I'm curious if we might be able to:

• look into the current usage of this button, how many Veterans are currently using it?
• review past research on this button, has the need for it changed?
• test what it might look like without this button in place of well written content, do we even need this since the following already exist:
  • the form auto saves
  • there's a message telling users that it auto saves
  • there's a message below the step x of y heading that tells users that it autosaves and that they can return to this later

(@DanielleThierryUSDSVA for awareness, just in case, 'cuz she's awesome 😄 )

[joshkimux]

@jeana-adhoc I'm not sure if we may have talked about this, but bringing this up just in case it's relevant to your work on the forms team. The last comment has our most recent context on the issue.

[rsmithadhoc]

@caw310 I believe this one (and https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/1766) would be up to the forms team to address, as this isn't in the design system.

[caw310]

@tbaker1026 , would the VFFT be able to pick this up?

[caw310]

@tbaker1026 Would you add this to your backlog since it is a form issue?

[jeana-adhoc]

@caw310 - This might be a question for @humancompanion-usds. We just tested moving this even lower on a page, and it tested fine.

How do you handle competing old tickets with new information on the DST?

[caw310]

@jeana-adhoc We are actually closing old tickets and asking people to open a new ticket if the issue persists with the new VADS components.

[jeana-adhoc]

Thanks, @caw310 - We might do the same here. But I need to get my head around what the remaining issue is, and find out if its still an issue.

[humancompanion-usds]

@jeana-adhoc and @tbaker1026 - At your leisure, move this over to the forms team repo, or open a new issue. Jeana - Sounds like the remaining work is for us to update our forms templates in Figma with the new location, update it in code, and then socialize that change?