DST Staging Review: Focus indicator partially obscured on mobile/at high browser 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.

Design System Staging Information

Component: File Input Component
Staging Review ticket: Staging Review: (DS) Converted File Input Component

Findings details

VA.gov Experience Standard - issue: User can't perceive an element.
VA.gov Experience Standard - category: Comprehension
This is an issue with the: code
High-priority: No
Collab Cycle Reviewer: @briandeconinck (Accessibility)

Description

When on a mobile device or at high browser zoom (looks like anything north of 250%), the focus indicator for the "Change File" button is partially obscured by the Delete button.

Link, screenshot or steps to recreate

Recommended action

Looks like maybe a 6px top margin or so on the Delete button fixes this.

References

• Accessibility Defect Severity: 4: Low. Consider fixing or exploring in 2-4 sprints post-launch.
• WCAG Success Criteria: WCAG 2.4.12 Focus Not Obscured (Enhanced) - Level AAA
• Modality: Keyboard
• Design System Pattern or Template: N/A
• Design System Foundation: N/A
• Content Style Guide: N/A
• Context: N/A

---

Next Steps for DST

• Close the ticket when the issue has been resolved or validated by your Product Owner
• If your team has additional questions or needs Governance help validating the issue, please comment on the ticket
• If this ticket has a high-priority label, please address as soon as possible so VFS teams are not impacted
• If this ticket has a consider label, please consider for future implementation