Staging Review finding: Claims process graphic cut off at high zoom

[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: Benefits team 1
Product: Claim status tool
Feature: Claims process overview page

Findings details

VA.gov Experience Standard - issue: User can't perceive an element.
VA.gov Experience Standard - category: Comprehension
Launch-blocking: No
Design System review: No
Collab Cycle Reviewer: @briandeconinck (Accessibility)

Description

On the Overview page (example), the graphic depicting the 8 steps of the claim process is cut off at high zoom and/or on some mobile devices. At 400% zoom (equivalent to a viewport of 320px), step 8 is off the page.

The actual impact of this is minimal. But WCAG guidance requires content be visible up to 400% zoom, and it's possible that it could be confusing to a Veteran to read text that says "there are 8 steps" and then see a graphic that appears to show only 7 steps.

Link, screenshot or steps to recreate

Recommended action

I think this has an easy fix!

The graphic is an SVG with width="352", so the last 32px of the image will be cut off on a 320px viewport. But adding a CSS style of max-width: 100% appears to resolve the issue without any impact on other viewports.

References

• Accessibility Defect Severity: 4: Low. Consider fixing or exploring in 2-4 sprints post-launch.
• WCAG Success Criteria: WCAG 1.4.10 Reflow - Level AA
• Modality: Browser zoom
• 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.