Modal & Popup Enhancements

[ashleyshaw]

Modal & Popup Enhancements

Type: Parent Issue / Epic

A consistent modal/popup system is required to support various plugin features:

• Gallery lightboxes
• “View More” content popups
• Enquiry forms in modals
• Accommodation or destination details in popups

The plugin should avoid duplicating modal logic across blocks. Instead, it should:

• Use a central modal system for all triggers
• Follow LSX Design System styling
• Be fully accessible

Child Issues

• Integrated Modal Popup System
• “View More” content popups
• Enquiry forms in modals
• Accommodation or destination details in popups
• Modal Trigger Button Block

Goal

Provide a unified, accessible modal system to handle all plugin popup interactions.

Scope

• Implement a core modal component leveraging Human Made’s popup library or custom code.
• Allow modals to be triggered from various block types.
• Ensure proper focus management and ARIA attributes.
• Provide styles consistent with LSX Design System overlays.

Acceptance Criteria

• Only one modal instance loaded in DOM at a time.
• All modals follow the same styling for overlay, close buttons, etc.
• Fully keyboard navigable with focus trapping.
• Works across desktop, tablet, and mobile.

References

• Related meeting notes: Meet – Tiberiu / Ash Tour Operator Plugin Meeting
• Human Made modal repo: https://github.com/humanmade/hm-block-modal
• Figma prototype: https://www.figma.com/community/file/1397897183253228355/lsx-tour-operator-design-system