[a11y-defect-3]: Your VA Payments table pagination should not extend outside the viewport when zoomed to 300% or more

[1Copenut]

Point of contact

Trevor Pierce

Severity level

3, Moderate. Should be fixed in 1-3 sprints post-launch.

Details

The Your VA Payments va-payment-history/payments/ table often has pagination beneath it. The pagination links start to extend past the left and right viewport edges when I zoom in to 300% or more at 1280px width. This could cause issues for mouse users who prefer to view the screen zoomed in. Screenshot attached shows the view at 1280x, and 300% zoom on Chrome in Win10 OS.

---

Reproduction steps

1. Log into va-payment-history/payments/ with a test user who has one or more payments
2. Set your browser to 1280px width
3. Zoom in to 300%
4. Verify the pagination first page, and Next > links are not reachable by mouse alone

Proposed solution or next steps

1. The pagination should be horizontally pinned to the parent container width. LMK if this needs to be closed and re-filed with the Design System team.

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
• [x] 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

[dysbo]

@jstrothman mentioned that this page may be running and old version of the pagination component. We will want to investigate this; it's possible that updating to the latest version will eliminate this issue. @1Copenut and @sh0wn to follow up.