va-on-this-page: Rewrite to use ul instead of dl for list of links

[Andrew565]

Chromatic

https://1998-on-this-page-rewrite--65a6e2ed2314f7b8f98609d8.chromatic.com

---

Description

Closes #1998

QA Checklist

• Component maintains 1:1 parity with design mocks
• Text is consistent with what's been provided in the mocks
• Component behaves as expected across breakpoints
• Accessibility expert has signed off on code changes (if applicable. If not applicable provide reason why)
• Designer has signed off on changes (if applicable. If not applicable provide reason why)
• Tab order and focus state work as expected
• Changes have been tested against screen readers (if applicable. If not applicable provide reason why)
• New components are covered by e2e tests; updates to existing components are covered by existing test suite
• Changes have been tested in vets-website using Verdaccio (if applicable. If not applicable provide reason why)

Screenshots

Before:

After:

Acceptance criteria

• QA checklist has been completed
• Screenshots have been attached that cover desktop and mobile screens

Definition of done

• Documentation has been updated, if applicable
• A link has been provided to the originating GitHub issue (or connected to it via ZenHub)

[jamigibbs]

Are there tests that this markup change will affect in vets-website?

[Andrew565]

There is one test that looks for this component: vets-website/src/applications/sco/tests/accessibility.cypress.spec.js, but the test is structured in such a way that it should still work with this re-write.

It's worth noting that there are currently 5 pages that have "fake component" versions of the va-on-this-page that all still use the dl/dd combo to display links and should probably be converted:

1. vets-website/src/applications/combined-debt-portal/debt-letters/components/DebtDetailsOnThisPageLinks.jsx
2. vets-website/src/applications/combined-debt-portal/debt-letters/components/OnThisPageLinks.jsx
3. vets-website/src/applications/combined-debt-portal/medical-copays/components/OnThisPageDetails.jsx
4. vets-website/src/applications/combined-debt-portal/medical-copays/components/OnThisPageOverview.jsx
5. vets-website/src/applications/combined-debt-portal/medical-copays/components/OnThisPageStatements.jsx

I'll write these up in a separate ticket for after this component ships.

[danbrady]

@Andrew565 If the link wraps, can we have the second line align with the first like it is in "before"?

[Andrew565]

@danbrady Ready for re-review, updated the "after" screenshot at the top.

[danbrady]

LGTM! (And thanks for fixing the vertical alignment of the icon too!)

[babsdenney]

@Andrew565 Would you be able to revert the width back to the original? My apologies for adding that feedback to this ticket. I talked to Carol about the issue she was able to move the ticket (#951) to address the width to Sprint 13 so we can address the width then.

[Andrew565]

Done