[Refactor] Language switcher button has hardcoded and disallowed attributes

[danny-englander]

User Story

As a developer, I need to fix the new header language switcher.

Description

In the multi-life event of the application, the Language switcher button in the new header uses attributes that are not allowed and in addition they are hard coded as well. main...579-nav-changes#diff-83e8a3432a09a97279997b583856e373eb1dda6f55f6e7a532b7541cc6a79b31R33-R42

Here we see that hreflang is used both on the <li> and <button> tags. hreflang is only allowed on an anchor tag, e.g.

<a href="/es" hreflang="es">

Proposed solution

Since beta.usa.gov uses an anchor tag for the language switcher, we should refactor this and do the same. We should also make the hreflang attribute dynamic and not hardcoded as it is now.

[danny-englander]

@nehemiah-abuga Ready for testing

• Pull multi-life-event-2023 to your local
• run npm i
• Run npm run dev
• Go to http://localhost:3000
• Inspect the HTML for the language switcher button, it should be a anchor tag <a>
• When on an English page, the href should lead to /es, the hreflang attribute should be es and the link title attribute should be in Spanish
• Now switch languages to Spanish
• the href should lead to /, the hreflang attribute should be en and the link title attribute should be in English
• Now go to https://federalist-edd11e6f-8be2-4dc2-a85e-1782e0bcb08e.sites.pages.cloud.gov/preview/gsa/usagov-benefits-eligibility/multi-life-event-2023/death-of-a-loved-one/? and repeat the same steps

[nehemiah-abuga]

@danny-englander - On localhost:3000, When I switch languages to Spanish and inspect, href does NOT lead to /en. It has / without "en" value href="/"

[danny-englander]

@nehemiah-abuga Thanks for flagging this, my bad, /en is never in the url. I have updated the instructions above. Thank you!

[nehemiah-abuga]

I have validated this change and it looks good!