0

I'd like to use the ClrTabs component to drive the interaction with an iframe. I can use js to change the current view inside the iframe, and there is a few different views I want to be able to select. I'd like to be able to select and view these views in the iframe by clicking their corresponding ClrTab. But I can't find a way to handle an event in order to run my callbacks that invoke the iframe. How would I be able to do this using the VMWare Clarity ClrTabs?

<clr-tabs>
  <clr-tab *ngFor="let tab of tabs">
    <button clrTabLink>{{tab.text}}</button>
  </clr-tab>
</clr-tabs>
Jake Smith
  • 2,332
  • 1
  • 30
  • 68

1 Answers1

0

I would heavily recommend not using the full Angular component for tabs from Clarity, but just the static DOM that Clarity support for tabs:

<ul class="nav" role="tablist">
    <li role="presentation" class="nav-item">
        <button class="btn btn-link nav-link active" aria-selected="true">First tab</button>
    </li>
    <li role="presentation" class="nav-item">
        <button class="btn btn-link nav-link">Second tab</button>
    </li>
    <li role="presentation" class="nav-item">
        <button class="btn btn-link nav-link">Third tab</button>
    </li>
</ul>
<section role="tabpanel">
    <iframe></iframe>
</section>

Once you have this in your template, you can easily add click listeners to these buttons and trigger whatever you need for the iframe.

The issue I see with your pattern of having the tabs outside of the iframe is that you have no way of making this accessible. The tabs will never be linked to the content of the iframe, so screen readers won't ever be able to describe what the tabs activate. Since Clarity tabs are built with accessibility at their core, they require a single panel for each tab so we can link them through ARIA attributes like aria-controls and aria-labelledby. The fact that you have a single panel means you have no way of using the Angular component from Clarity.

Eudes
  • 1,521
  • 9
  • 17