[COGNITION]: VAOS - Tabs MUST have hover and focus states for navigation and usability

[1Copenut]

Feedback framework

• ❗️ Must for if the feedback must be applied
• ⚠️Should if the feedback is best practice
• ✔️ Consider for suggestions/enhancements

Description

I had trouble determining "where I was" when I first tried to navigate through the new tabbed interface for upcoming and previous appointments. After a few runs, I realized the tabs could receive keyboard focus, but were not showing the yellow focus halo, and didn't have a hover state for mouse users. I'm attaching a screenshot below that shows the first tab with keyboard focus, but no change in the visual display.

Point of Contact

VFS Point of Contact: Trevor

Acceptance Criteria

• [ ] Tab with pseudo-state :focus shows the yellow focus halo
• [ ] Tab with pseudo-states :hover, :active shows a unique look like our call to action buttons

WCAG or Vendor Guidance (optional)

• WCAG2.1 Understanding Success Criteria 2.4.7: Focus Visible

Screenshots or Trace Logs

[jbalboni]

Whoever works on this should look at the tabs in claim status and see if carrying over some of the classnames gets the focus and hover states.