Main nav updates

[r-bartlett-gsa]

As a benefits tool user, in order to navigate between USAGov and benefits tool subsite without confusion, I would like the benefit tool subsite to resemble USAGov look and feel as close as possible.

Acceptance criteria:

• Update main nav to match USAGov's beta site (no mega menu)

Resources:

• Design review document (Current design review #553)
• Design prioritization spreadsheet

Definition of Done:

• Code complete
• Tests coverage is greater than team benchmark (90% goal)
• Security scans passed
• Acceptance Criteria is met and it works as expected
• Accessibility tested
• Cross browser tested
• Build process and deployment is automated and repeatable
• Load testing/performance testing
• Self Documentation whenever possible
• Feature toggles if appropriate
• Deployed to staging
• Usability testing
• PR approved / Peer reviewed
• A11y tested by Meghan
• PO approved (UX, usability, edge cases)

More details about each item can be find in BEARS P4 DoD google doc

QA checklist

[fpigeonjr]

This is part of the work on PR #616.

[danny-englander]

This is dependent on #580 and #582.

[fpigeonjr]

I have completed my involvement with this GitHub issue and am stepping away from it.
Thank you for your understanding.

[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 main navigation and ensure that the link text and links match what is on https://beta.usa.gov/
• Switch language to Spanish
• Inspect the main navigation and ensure that the link text and links match what is on https://beta.usa.gov/es

[nehemiah-abuga]

@danny-englander - Beta.usa.gov has Travel while local:3000 has immigration and U.S. citizenship. Please let me know if this is the expected functionality

[danny-englander]

@nehemiah-abuga, I have adjusted the navigation, both languages, to match beta.usa.gov (again). Noting that they keep changing the navigations on a regular way so without an API, unfortunately we will not always be up to date with beta.usa.gov.

[nehemiah-abuga]

I have tested this and verified the changes

[danny-englander]

@amycole501 Ready for you to test.

Steps

1. 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/?
2. test the main top navigation for accessibility

[amycole501]

1. Keyboard testing appeared to be fine.
2. When zooming in 200% on Chrome, the menu button appears after shifting to a mobile layout. The button in Chrome almost appears to be cut off on the right. I'm not sure it's an error per se but it looks almost like it's being covered up by the right scroll bar on my screen. let me know if you need a screen shot.
3. When tabbing into the nav from the top of the page and when listening in JAWS I noticed the order of the elements is off. I am taken from the USA.Gov logo straight into the nav. Ideally the person would go to the right into the Phone number and search area since those appear above the nav.
4. Make sure to note that it's the primary navigation. I didn't hear it announced in JAWS. The USWDS has their site coded with the correct markup to hear "Primary navigation" in screen readers. https://designsystem.digital.gov/components/overview/

[danny-englander]

@amycole501 I have addressed all the issues now except item # 3. Ernie said to pass on that as we are going to put all our efforts into V2 for the most part.

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/

[amycole501]

In JAWS the language button says it's both a banner region and a navigation region. I'm not sure which it should be but I think it's banner. May warrant a minor fix.

The header does now read correctly as "header primary navigation region".

[danny-englander]

@amycole501 Can you open a new ticket for a followup on the comment above so we can track it?