Fixture 06 — Multi-Instance

Side Panel + Popup Cohabitation

This page embeds two HEA widget instances — a side panel and a popup — to verify they operate independently without conflicts.

✅ Test Checklist — Multi-Instance

Popup shows welcome on first open without page reload
Side panel tab handle visible
Popup launcher visible (bottom-left)
Both can be opened simultaneously
Escape closes popup only (not both)
Body overflow managed correctly (no scroll when popup open)
Closing side panel doesn't break popup scroll lock

📐

Side Panel Instance

Docked to the right edge. Uses data-mode="side-panel". Manages body margin when open.

data-panel-side="right"

💬

Popup Instance

Floating button at bottom-left. Uses default popup mode. Manages scroll lock when open.

data-position="bottom-left"

Interaction Test Scenarios

Scenario A: Open Both Simultaneously

Open the side panel via its tab handle, then open the popup via its floating button. Both should be visible and functional at the same time. The side panel manages body margin; the popup manages scroll lock. These should not interfere with each other.

Priority: High — Core cohabitation test

Scenario B: Escape Key Behavior

With both widgets open, press the Escape key. The popup should close, but the side panel should remain open. This verifies that each instance handles keyboard events independently without capturing events meant for the other.

Priority: High — Event isolation test

Scenario C: Scroll Lock Independence

Open the popup (which should lock body scroll). Then close the side panel. Body scroll should remain locked because the popup is still open. Close the popup — scroll should restore. This tests that scroll lock state isn't shared.

Priority: Medium — State management test

Scenario D: Sequential Open/Close

Open side panel → close side panel → open popup → close popup. Then reverse: open popup → close popup → open side panel → close side panel. All transitions should be clean with no residual styles or broken states.

Priority: Medium — Lifecycle test

Scenario E: Rapid Toggling

Rapidly toggle both widgets open and closed in quick succession. Neither should break, and the page layout should always return to its original state when both are closed.

Priority: Low — Stress test

Scenario F: Mobile Viewport

Resize below 1024px. The side panel should auto-collapse. The popup launcher should still be visible and functional. Verify that the popup works correctly even when the side panel is in collapsed mode.

Priority: Medium — Responsive test

Technical Details

DOM Isolation

Each widget instance creates its own DOM subtree. The side panel creates a fixed-position container with a tab handle. The popup creates a floating action button and a dialog overlay. They should not share any DOM nodes or conflict on IDs.

Event Namespacing

Both instances register event listeners on the document (for keyboard shortcuts) and on the window (for resize). Each instance should only respond to its own events and not interfere with the other's handlers.