Shadows 2.0 AllY-Tabs

[ids]

Why wouldn't this work on any page?

<div class="x-a11y-tabs" data-tab-component>
<ul class="x-a11y-tabs__list">
<li class="x-a11y-tabs__item">
<a class="x-a11y-tabs__link" href="#tab-one">Tab One</a>
</li>
<li class="x-a11y-tabs__item">
<a class="x-a11y-tabs__link" href="#tab-two">Tab Two</a>
</li>
<li class="x-a11y-tabs__item">
<a class="x-a11y-tabs__link" href="#tab-three">Tab Three</a>
</li>
</ul>
<section id="tab-one" class="x-a11y-tabs__panel">
<h2>Tab One</h2>
Tab One Content
</section>
<section id="tab-two" class="x-a11y-tabs__panel">
<h2>Tab Two</h2>
Tab Two Content
</section>
<section id="tab-three" class="x-a11y-tabs__panel">
<h2>Tab Three</h2>
Tab Three Content
</section>
</div>

Appears that the CSS and extension JS aren't getting applied so naturally everything is dumped to the browser. The only place I can get this to work is in the PROD Layout. Not seeing why.
I don't see any component items that need to be assigned that currently aren't. Any Ideas?

Scott

[Matt Zimmermann]

Hi Scott,

In your theme.js file, make sure to initialize the extension where you would like it to be, either by page or globally:

/**
* Initialize the A11y-Tabs extension
*/
tabbedContent.init();

[ids]

Is this feature only configured for PROD out of the box?

Scott

[Matt Zimmermann]

Hi Scott,

Yes, out of the box it is only active on the product page.

[ids]

Thanks.

I suggest a note in the docs pertaining to that -- only PROD page by default.

Scott