payment history page back button to previous page

[janechodance]

Note: Delete the description statements, complete each step. None are optional, but can be justified as to why they cannot be completed as written. Provide known gaps to testing that may raise the risk of merging to production.

Are you removing, renaming or moving a folder in this PR?

• No, I'm not changing any folders (skip to TeamSites and delete the rest of this section)
• Yes, I'm removing, renaming or moving a folder

Did you change site-wide styles, platform utilities or other infrastructure?

• No
• Yes, and I used the proxy-rewrite steps to test the injected header scenario

Summary

Add navigation to payment history page so the back button will correctly navigate to previous page

Related issue(s)

department-of-veterans-affairs/va.gov-team#96174

Testing done

locally tested and add unit test

Screenshots

Note: This field is mandatory for UI changes (non-component work should NOT have screenshots).

	Before	After
Mobile
Desktop

payment.table.back.button.mov

What areas of the site does it impact?

Payment history page

Acceptance criteria

Quality Assurance & Testing

• I fixed|updated|added unit tests and integration tests for each feature (if applicable).
• No sensitive information (i.e. PII/credentials/internal URLs/etc.) is captured in logging, hardcoded, or specs
• Linting warnings have been addressed
• Documentation has been updated (link to documentation *if necessary)
• Screenshot of the developed feature is added
• Accessibility testing has been performed. #980689

Error Handling

• Browser console contains no warnings or errors.
• Events are being sent to the appropriate logging solution
• Feature/bug has a monitor built into Datadog or Grafana (if applicable)

Authentication

• Did you login to a local build and verify all authenticated routes work as expected with a test user

Requested Feedback

(OPTIONAL) What should the reviewers know in addition to the above. Is there anything specific you wish the reviewer to assist with. Do you have any concerns with this PR, why?

[dysbo]

I like managing the page solely through the param vs managing it in both the param and the state. Great move.

[rmessina1010]

LGTM

[1Copenut]

Starting accessibility test issue now. Should have findings in an hour or two.

[1Copenut]

Hi @janechodance. I'm still working with DST to figure out this phantom axe-core issue, but otherwise the accessibility review has gone really well. I added an improvement (suggested) change for screen reader handling.

If you'd prefer to add this as a separate issue, let me know and I'll file a follow-on ticket.

Thank you!

[1Copenut]

I'd like to use this custom event to also set focus on the H3 that announces the number of results. I tested it locally and it's working really well and only a few more lines:

// Line 33
+ const tableHeadingRef = useRef(null);

const onPageChange = page => {
  const newURL = `${location.pathname}?page=${page}`;
+ if (tableHeadingRef) {
+   tableHeadingRef.current.focus();
+ }
  navigate(newURL);
};

<h3
  className="vads-u-font-size--lg vads-u-font-family--serif"
+ ref={tableHeadingRef}
+ tabIndex={-1}
>

[1Copenut]

👍LGTM! I retested with latest main and the axe browser plugin issue we were seeing before is gone. I retested the new focus management with NVDA and Narrator. Works great!

[jerekshoe]

I would use useRef here unless you want the page to re-render when you call setTotalPages

[janechodance]

updated!

[va-vfs-bot]

ESLint is disabled

vets-website uses ESLint to help enforce code quality. In most situations we would like ESLint to remain enabled.

What you can do

See if the code can be refactored to avoid disabling ESLint, or wait for a VSP review.