Adjust links to not use orphaned caret

wesrowe commented 1 month ago

Description

User story

As a Veteran, I want to be presented links on the MHV landing page without the distraction of arrows/carets that jump to a new line and make the content shift or look broken, so that I can focus on getting where I need to go.

About 5% of users (per GA) have a screen width that causes at least one orphaned caret.

Notes

(NOT relevant to MHV Home since we don't use DST component): Wes filed a bug ticket with the DST.
Ryan Thurlwell got the idea from VADS links that appear on the Benefit Hub landing pages – e.g. /health-care/
In #89477 we determined a quick technical fix for the lonely wrapping carat is not available.
Synced with Daniel on why we aren't using Design System links here – various reasons, including the mobile behavior of these links is different from the DS component
These links-with-carets are apparently in the VADS as a sub-class of the "link" component, called "active link," see here
Consider using mobile approach instead

Possible tasks:

[ ] Edit desktop designs (well, designs for devices wider than 780 pixels) in Figma to utilize the mobile treatment & move caret to the end of the line instead of hugging the text.
- Do we need this? Or can we just send the info to devs?
[ ] Implement the change so that desktop & mobile operate the same way, with the trailing caret at the end of the line separated from the link text

Acceptance criteria

[x] UX identifies a way forward that doesn't involve wrapping carets and updates to the Figma design
[x] Implemented the change
[x] QA review
[x] UXer review
[x] A11y review

katbrinkley commented 1 month ago

UX est. 5 Eng est. 3

fmccaf1 commented 1 month ago

Thinking UX estimate = 2

sterkenburgsara commented 1 month ago

Update: trying to keep this a light lift on our end, considering that we may want to pivot away from this design in the future anyway. Two options we are contemplating:

~Pivot to using the VADS link component, sub-class style of "active link" instead of doing this in a custom way on our page~ Daniel says: "It has the same issue with the caret, doesn’t have the style tweaks or the mobile styles. Semi-related it doesn’t work with DDG RUM."
Apply the mobile style to all screen widths to avoid the wrapping