About
Tabs with tabbed panels
Have made the tablist a part of the c-tabs module, rather than separate o-l - means we can use the active state, vertical-stack widths etc, as a unified c-tabs module.
Alternatives
Accessibility
Heydon puts role="presentation" on the li, and has the <a> as the role="tab" - could do with refactoring so it’s closer to that
Requirements
Issues
Examples
Horizontal
Body of first tab
Body of second tab
Body of third tab
Vertical
Body of first tab
Body of second tab
Body of third tab
<div class="c-tabs" data-tabs>
<div class="c-tabs__tray">
<ul class="c-tabs__list" role="tablist">
<li class="c-tabs__item" data-tab-button="1">
<a href="#tab_id-1" class="c-tabs__link">Title of first tab</a>
</li>
<li class="c-tabs__item" data-tab-button="2">
<a href="#tab_id-2" class="c-tabs__link">Title of second tab</a>
</li>
<li class="c-tabs__item" data-tab-button="3">
<a href="#tab_id-3" class="c-tabs__link">Title of third tab</a>
</li>
</ul>
</div>
<div class="c-tabs__content">
<section id="tab_id-1" class="c-tabs__body" data-tab-panel="1">
<div>Body of first tab</div>
</section>
<section id="tab_id-2" class="c-tabs__body" data-tab-panel="2">
<div>Body of second tab</div>
</section>
<section id="tab_id-3" class="c-tabs__body" data-tab-panel="3">
<div>Body of third tab</div>
</section>
</div>
</div>