Voyager Demo

Interactivity API Test Page

Interactive test page for the three IAPI-migrated components. Each section tests specific behaviors — use the checklist below each block to verify.

Video Lightbox — YouTube

Test Checklist

  • ☐ Click play button — modal opens with fade animation
  • ☐ Video plays automatically in youtube-nocookie.com embed
  • ☐ Click backdrop (outside video) — modal closes
  • ☐ Press Escape — modal closes
  • ☐ Tab key stays trapped inside modal (focus doesn’t escape)
  • ☐ Body doesn’t scroll while modal is open
  • ☐ After close, focus returns to the play button
  • ☐ Open DevTools Network tab — iframe only loads when modal opens (lazy)

Video Lightbox — Vimeo

  • ☐ Vimeo embed loads with dnt=1 (privacy mode)
  • ☐ Bold button style renders correctly
  • ☐ Larger button size (96px) renders correctly
  • ☐ Lower overlay opacity (85%) is visible

Comparison Slider

Test Checklist

  • ☐ Drag handle left/right — images clip smoothly
  • ☐ Handle starts at 50% position
  • ☐ Purple handle color (#462CFF) renders
  • ☐ “Before” and “After” labels visible
  • ☐ Click handle then press Arrow Left/Right — moves 1%
  • ☐ Shift + Arrow — moves 10%
  • ☐ Home key — jumps to 0% (full “After”)
  • ☐ End key — jumps to 100% (full “Before”)
  • ☐ Touch drag works on mobile
  • ☐ No text selection during drag
  • ☐ Screen reader: aria-valuenow updates as you drag

Mega Menu (Navigation Block)

The mega menu enhances the core Navigation block. To test it:

  1. Check the site header on any page — the navigation should have mega menu dropdowns
  2. Hover over a top-level menu item with children — submenu should open with 200ms delay
  3. Move mouse away — submenu should close immediately
  4. Press Enter/Space on a menu item — toggles submenu
  5. Arrow Down inside submenu — cycles through items
  6. Escape — closes submenu, returns focus to trigger
  7. Tab — moves focus through submenu items, then out
  8. Resize to mobile — hamburger menu should show overlay

Note: The mega menu IAPI directives are injected via PHP filter on core/navigation blocks that have the mega-menu-enabled class. Check the site header to test.