Tabs

The Tabs plugin will manage the aria attributes, roles and class modifiers for creating tabbed content functionality.

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

• Add the adequate tab, tabpanel, tablist and presentation roles for the known nav-horizontal or progress-tracker elements;
• Manage toggling the panels visibility;
• Handle the keyboard focus management of the tabs and keyboard controls (arrow key navigation);

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/tabs.js"></script>
<script>
  document.addEventListener(&quot;DOMContentLoaded&quot;, function() {
    tabs.init();
  });
</script>

Configure the components with data attributes

1. Add the data-flixtabs attribute to the component container, so the plugin can find it;
2. Give each panel an id so the plugin can related which tab controls which panel;
3. Give also each tab an id so the plugin can associate them as panel labels;
4. Associate the tabs with their respective panels with aria-controls="{RESPECTIVE_PANEL_ID}";
5. Add aria-selected="true" to the tab that should be selected by default, that's usually the first one.

<div class="flix-nav-horizontal flix-nav-horizontal--stretch" data-flixtabs="">
  <ul class="flix-nav-horizontal__items">
    <li class="flix-nav-horizontal__item">
      <button type="button" class="flix-nav-horizontal__link" id="upper-deck-tab" aria-controls="upper-deck-panel" aria-selected="true">
        <span class="flix-nav-horizontal__text">
          Upper deck
        </span>
      </button>
    </li>
    <li class="flix-nav-horizontal__item">
      <button type="button" class="flix-nav-horizontal__link" id="lower-deck-tab" aria-controls="lower-deck-panel">
        <span class="flix-nav-horizontal__text">
          Lower deck
        </span>
      </button>
    </li>
  </ul>
  <div class="flix-nav-horizontal__panel flix-space-2-top" id="upper-deck-panel">
    <div class="flix-box flix-has-text-centered">
      <a class="hcr-link-13-1-0" href="#">Upper deck seat selection</a>.
    </div>
  </div>
  <div class="flix-nav-horizontal__panel flix-space-2-top" id="lower-deck-panel">
    <div class="flix-box flix-has-text-centered">
      <a class="hcr-link-13-1-0" href="#">Lower deck seat selection</a>.
    </div>
  </div>
</div>

The plugin is tailored to work with the nav-horizontal and progress-tracker components.

It may also work if you want to use it with different HTML markup (e.g.: custom components), but some roles might not be applied properly. Namely:

• The tablist role on the list element
• The presentation role on the list items.

Make sure to add any missing roles to your custom component to ensure its proper accessibility.