Popup

The plugin will take care of all of this for you:

• Adding the right role="dialog" the right component element;
• Add aria-modal="true" if the dialog has an overlay;
• Toggling the hidden and --active modifiers to show and hide the dialog with a small interval to enable the animation to run smoothly;
• Adding ESC key press support for closing the dialog with the keyboard;
• If the dialog is modal: creating a tab trap that doesn't allow the user to tab away from the dialog (cycling between first and last focusable items);
• Adding tabindex="0" to the content section if it has a scroll to enable keyboard users to focus the content in order to scroll it with arrow keys;
• Adding the close button click handler for controls that have data-closePopup="true" attribute;

Add the plugin to your page:

Include the plugin from our CDN at the end of your page and then initialize it with:

<script src="https://honeycomb.flixbus.com/dist/{VERSION_TAG}/js/popup.js"></script>
<script>
  document.addEventListener(&quot;DOMContentLoaded&quot;, function() {
    popup.init();
  });
</script>

Configure the components with data attributes

1. Add an id to the dialog (the flix-panel or flix-popup elements) and initialize it with the hidden attribute, so it's closed;
2. Use the popup id and connect it to the toggle by using data-popup="{THE_DIALOG_ID}";
3. Accessibility guidelines dictates that all dialogs must have a label:

• You can either give the popup and aria-label;
• Or you can associate the popup title with and id and aria-labelledby;

4. Add the data-closePopup="true" attribute to the close button if it is present;

Check the related popup and panel components pages for examples of how to use the plugin with them.