Header Component Test
Testing Instructions
- Test the header above (with red border for visibility)
- Desktop: Hover over "Features" to open MegaMenu
- Mobile: Click hamburger to open mobile navigation
- Test keyboard navigation (Tab, Enter, Space, Escape)
- Resize browser to test responsive breakpoints
Desktop Navigation Tests
Test at viewport width >= 768px (md breakpoint).
Hover over "Features" to open the mega menu panel.
Tab to "Features", press Space/Enter to toggle, Escape to close.
All desktop nav links should be visible: Features, Blog, Docs, Pricing, Contact.
Desktop buy button should be visible on the right.
Mobile Navigation Tests
Test at viewport width < 768px (below md breakpoint).
Hamburger icon should be visible. Click to open mobile nav.
Buy button should be visible next to hamburger.
Mobile nav should have Features, Configuration, Resources sections.
When mobile nav is open, body should not scroll.
Accessibility Tests
Check aria-expanded, aria-haspopup on trigger buttons.
Focus should be trapped in mobile nav when open.
Test with VoiceOver/NVDA for proper announcements.
Scroll Test Area
Scroll down to test sticky header behavior.