Staging Review finding: Directions and phone number links don't match other icon + link instances on VA.gov

[shiragoodman]

Need help? Please review how to read a Staging Review ticket. Tag @platform-governance-team-members on Slack if you need further assistance.

Product Information

Team: Appointments Product: Appointments Feature: Appointment Details Redesign

Findings details

VA.gov Experience Standard - issue: User encounters content that doesn't match other content on VA.gov. VA.gov Experience Standard - category: Consistency Launch-blocking: No Design System review: No Collab Cycle Reviewer: @briandeconinck (Accessibility)

Description

When viewing appointment details for an appointment at a physical location, the "Directions" link and the phone number link have an icon next to it. That icon:

1. Isn't part of the link and isn't clickable.
2. Has alternative text announced ("Directions icon" and "Phone icon") that doesn't communicate any meaningful information.

That doesn't match similar icon + link elements on VA.gov, eg. the download link in the design system.

Link, screenshot or steps to recreate

An example of the directions icon + link as currently coded: ```

Directions

```

Recommended action

I recommend following the design system links as a template to make the icon part of the clickable region, something roughly like:

<a href="...">
        <va-icon icon="directions" size="3"></va-icon>
        Directions
</a>

The srtext isn't necessary in this situation, because any description of the icon will just be duplicative of the link text.

References

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

---

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.

[outerpress]

@ldelacosta the two pieces of work here -

For phone number and directions links in details pages:

• Move the icon into the clickable area, following Brian's recs and the design system
• Remove the srtextattribute from these.

I'm not sure if we need to handle each of the 11 or so types of details pages in separate tix? FYI @ryanshaw