[a11y-defect-3]: Payment History table extends past right edge of viewport at 200-250% browser zoom

[1Copenut]

Point of contact

Trevor Pierce

Severity level

2, Serious. Should be fixed in 1-2 sprints post-launch.

Details

The Your VA Payments view has a table of payments that starts to extend outside the right edge of the viewport when I zoom my browser to 200-250%. This could prevent some users from seeing all of the data without zooming in to a higher resolution where the table adjusts to our responsive layout. Screenshot attached below.

There is a possibility to zoom in farther so the table switches to its mobile-first view, but (for now) the table headers are hidden, thus trading one affordance for another.

---

Reproduction steps

1. Log in with a test user who has a payment history with VA
2. Navigate to va-payment-history/payments/
3. Set your browser width to 1280px and zoom in to at least 200%, or 250%
4. Verify the table's right edge is out of the view port and cannot be scrolled horizontally

Proposed solution or next steps

I think there could be a few options here:

1. Adding an optional prop to the VA-table component that allows it to take a tabindex="0" so the table can be focused and scrolled using a keyboard
2. Add a container with the tabindex on this particular view
3. Adjust the CSS to switch to the responsive layout sooner

References, articles, or WCAG support

1. Understanding SC 1.4.10: Reflow (Level AA)

Type of issue

• Axe-core
• Screenreader | assistive tech & device support
• Keyboard
• Zoom
• Color, typography, & visual elements
• Components and pattern standards
• Content organization
• Focus
• Headings
• Content style guide
• Link and button labels
• Semantic HTML
• Markup and metadata
• Non-text content and media
• Overall user experience
• Cognitive | user flows & navigating
• URL standards
• Something else