[Efficiency] User is taken out of the primary flow without notification.

shiragoodman commented 7 months ago

Value Proposition

As a veteran with sight disabilities who relies on a screen reader, I want certain links to open in a new tab instead of opening in the same window because I wouldn't expect these links to take me out of the current application or claim status experience I'm viewing, so that I can continue checking that status of my claim without clicking the back button.

Design Notes

Adding some screenshots for reference when these tickets are worked on in the future.

The files tab with red arrows pointing to two links: How to File a Claim and Mail them to the VA Claims Intake Center that need to open in a new tab

The document request page with a red arrow pointing to a link: How to file a claim that needs to open in a new window.

Engineering Notes

Looks like the link Mail them to the VA Claims Intake Center. is already opening a new tab so may not need to do anything here
The link How to File a Claim is located on the component AddFilesForm.jsx. We will want to add the following code to make it so the link opens to a new tab target=_blank. This will take care of the Files Tab and Document Request page.

Acceptance Criteria

[ ] On the files tab, Mail them to the VA Claims Intake Center link opens in a new tab instead of in the same window
[ ] On the document request page How to file a claim link opens in a new tab instead of in the same window
[ ] Both links have screen reader text that alerts the user that the link opens a new tab

This ticket was generated during the pilot process for the new VA.gov experience standards. Please tag @platform-governance-team-members on Slack if you need assistance interpreting this ticket.

Product Information

Team: Benefit Tools Product: Claim Status Tool Feature: Improved Evidence Request Initiative

Findings details

VA.gov Experience Standard - issue: User is taken out of the primary flow without notification. VA.gov Experience Standard - category: Efficiency Launch-blocking: No Design System review: No Collab Cycle Reviewer: @erinrwhite (IA), @briandeconinck (Accessibility)

Description

On the Files view, there are two links that lead users outside of the application flow. One, How to File a Claim, does not open in a new tab, but the other, Mail them to the VA Claims Intake Center. does open in a new tab without notifying the user.

On the Document request page the link to How to file a claim opens in the same window, taking users out of the form flow.

Recommended action

Please open links that leave the application in a new tab and indicate that behavior through text "(opens in a new tab)"

References

WCAG Success Criteria: N/A
Modality: N/A
Design System Component: N/A
Design System Pattern or Template: N/A
Design System Foundation: N/A
Content Style Guide: Links
Context: N/A
Accessibility Defect Severity: 3: Medium. Should be fixed in 1-3 sprints post-launch.

Next Steps for the VFS Team

[ ] Questions? For the most timely response, comment on Slack in your team channel tagging @platform-governance-team-members with any questions or to get help validating the issue.
[ ] Ticket ownership: If you believe that this issue is out of scope, not your team's responsibility, or a Design System issue, comment and tag @platform-governance-team-members on your team channel in Slack to provide an explanation and who you believe is responsible. The Governance team will follow up.
[ ] Close this ticket when the issue has been resolved or validated by your Product Owner.

davidakennedy commented 6 months ago

Adding some screenshots for reference when these tickets are worked on in the future.

The files tab with red arrows pointing to two links: How to File a Claim and Mail them to the VA Claims Intake Center that need to open in a new tab

The document request page with a red arrow pointing to a link: How to file a claim that needs to open in a new window.

pmclaren19 commented 4 months ago

Currently the link Mail them to the VA Claims Intake Center. opens in a new tab. So is there something else that needs to be done for this @davidakennedy @shiragoodman ? Screenshot 2024-07-16 at 8 54 52 AM

Also @davidakennedy what logic are we supposed to use so that we notify users via screen reader that the link is taking them to a new tab?

erinrwhite commented 4 months ago

I recommend indicating links will open in a new tag by adding the link text "(opens in a new tab)" which will work for sighted users and for screen reader users

Mail them to the VA Claims Intake Center (opens in a new tab)

Some guidance in the Design System on this too!

pmclaren19 commented 4 months ago

Also noticed that the comments in the ticket are incorrect for the link How to File a Claim. When clicked It currently opens it up on the same page and open a new tab for the user. Are you guys wanting us to change this so that it opens to a new tab? What is the ask here @shiragoodman @davidakennedy ?

shiragoodman commented 4 months ago

@erinrwhite @briandeconinck - please see Peri-Ann's comment above and follow up. ty!

erinrwhite commented 4 months ago

@pmclaren19 Is this screen inside of a form flow? If so the "How to file a claim" link should also open in a new tab. Here's our guidance on opening in new tabs:

Links on VA.gov should open in a new tab only if clicking the link will result in the user losing progress or data.

So links that are in a form flow where a user is entering data, should open in a new tab using the "(opens in a new tab)" link text at the end.

Y'all might also consider changing the link language to move away from "visit this page" language to "complete this action" language - like Learn how to file a new claim (opens in a new tab) or File a new claim (opens in a new tab).

davidakennedy commented 4 months ago

All the links here should open in new tabs since they take Veterans out of the form flow. cc: @skylerschain and @uxgary to tweak the content, if necessary.

skylerschain commented 4 weeks ago

According to the latest design system guidance found in this thread, we should not include any icon for links. So this ticket doesn't require any design changes.

erinrwhite commented 4 weeks ago

@skylerschain correct, adding the link text (opens in a new tab) should be sufficient - thanks!

skylerschain commented 4 weeks ago

@erinrwhite Sorry I want to make sure I understand: We should include that language in the actual link text? So it would read "How to file a claim (opens in a new tab) page"?

erinrwhite commented 4 weeks ago

@skylerschain yes, in the link text - so it would be How to file a claim page (opens in a new tab) or y'all could leave off the word "page" from the content entirely and have it say How to file a claim (opens in a new tab). This way it's visible for sighted users, and gets read aloud as part of the link by screen readers.

skylerschain commented 2 weeks ago

Design QA notes: @harshil1793 We need to add the "(opens in a new tab)" language (see comment above).

I mocked up what this should look like here.

skylerschain commented 2 weeks ago

Design QA: LGTM 👍

department-of-veterans-affairs / va.gov-team