Create ARP header component

[candilemoine]

Description

User Story or Problem Statement

As a representative, I want to be able to log in and navigate throughout the portal so I can use the tools for my daily workflow.

Mockups/Designs

• header

Acceptance Criteria/Conditions of Satisfaction

• [ ] a rep will be directed to the VA ARP homepage when they click on the main logo

Logged out state

• [ ] a rep will only see Get help and Sign in
• [ ] a rep will not see the main navigation

Logged In state

• [ ] a rep will see the navigation
• [ ] a rep will see their profile name
• [ ] a rep will be able to use the drop down to go to their Profile or Logout

Accessibility (A11y) Testing

• Refer to existing VA design system
• [ ] Test with either WAVE or AXE extension
• As you manually test, look for the following:
  • [ ] color contrast errors
  • [ ] keyboard navigation
    • When navigating with a keyboard, content should flow from left to right
  • [ ] heading order
    • Headings should be in order, so h1, then h2, h3. This is so the screen reader can let the user know the natural order of the elements in page. The WAVE tool has a headings tab that will display the order.
  • [ ] proper tag elements
    • Since we are working with forms, make sure components have the proper tags, i.e.: <label for="lastName"...>Last Name <input id="lastName"... />
• [ ] test with a screen reader
  • Voiceover is built in with mac, use NVDA for windows