<!-- tab component -->
<h2 class="sr-only" id="tablist-1">Titolo tablist</h2>
<ul role="tablist" aria-labelledby="tablist-1" class="n7-tablist is-tablist is-manual border-b n7-border-gray-01 mb-4 md:mb-10 flex">
<li role="presentation">
<button id="tab-1" type="button" role="tab" class="n7-tab n7-tablist__tab is-tab p-3 md:px-6 border-b-2 border-transparent text-sm md:text-base n7-content-01 hover:n7-background-gray-02 aria-selected:n7-border-gray-04" aria-selected="true" aria-controls="tabpanel-1">
<span class="focus">Voce 1</span>
</button>
</li>
<li role="presentation">
<button id="tab-2" type="button" role="tab" class="n7-tab n7-tablist__tab is-tab p-3 md:px-6 border-b-2 border-transparent text-sm md:text-base n7-content-01 hover:n7-background-gray-02 aria-selected:n7-border-gray-04" aria-selected="false" aria-controls="tabpanel-2" tabindex="-1">
<span class="focus">Voce 2</span>
</button>
</li>
<li role="presentation">
<button id="tab-3" type="button" role="tab" class="n7-tab n7-tablist__tab is-tab p-3 md:px-6 border-b-2 border-transparent text-sm md:text-base n7-content-01 hover:n7-background-gray-02 aria-selected:n7-border-gray-04" aria-selected="false" aria-controls="tabpanel-3" tabindex="-1">
<span class="focus">Voce 3</span>
</button>
</li>
</ul>
<div id="tabpanel-1" class="n7-tablist__tabpanel" role="tabpanel" aria-labelledby="tab-1">
Tab 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu aliquam orci. Nullam a nunc vitae nisl venenatis bibendum a tristique ipsum. Donec ipsum magna, ultricies sit amet orci sit amet, mollis iaculis sem. Curabitur feugiat molestie diam, eu tincidunt nibh commodo tincidunt. Maecenas cursus, sapien vitae fermentum elementum, justo est sodales ligula, nec egestas mi nibh vel sem. Aliquam eleifend tortor id nisl placerat, sed fringilla nunc facilisis. Quisque sit amet lacus non leo pulvinar bibendum. Nunc aliquet posuere lorem, eu lacinia felis lobortis a. Pellentesque finibus ante a ligula scelerisque auctor. Donec congue metus lacus, non molestie dui aliquet sed.
</div>
<div id="tabpanel-2" class="n7-tablist__tabpanel hidden" role="tabpanel" aria-labelledby="tab-2">
Tab 2 Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur fringilla tempus fringilla. Phasellus porttitor mattis dolor, at rutrum ligula vestibulum non. Proin et tempor enim. Nam euismod est et eleifend egestas. Suspendisse tempus facilisis diam ac consequat. Aenean tempus tellus elit, eu tempor elit mattis sed. Quisque sit amet ultrices magna. Pellentesque nunc elit, varius vel porttitor a, suscipit in nunc. Pellentesque tempus luctus ante eget consequat. Phasellus non vehicula lorem. Curabitur fringilla varius ipsum, placerat convallis orci imperdiet non. Mauris quis ligula luctus, elementum ligula quis, mattis augue. Quisque interdum metus lectus. Cras enim odio, placerat eget eros ut, tempus tempus lorem. Vivamus ut justo lectus. In sed ultrices mauris. Proin sit amet finibus orci, consectetur fermentum neque.
</div>
<div id="tabpanel-3" class="n7-tablist__tabpanel hidden" role="tabpanel" aria-labelledby="tab-3">
Tab 3 Aenean feugiat pretium nunc, vitae pellentesque libero gravida eget. Fusce ultricies nulla sit amet nulla tristique, vel dignissim ipsum rutrum. Ut sagittis, sem eget tempus sagittis, nisi nisl luctus lorem, sit amet tincidunt odio nisi luctus nunc. Vivamus at maximus tortor, dapibus aliquet sem. Proin vitae nunc sollicitudin, egestas lectus a, dignissim orci. Nullam id euismod neque. Proin mollis aliquet turpis ut ornare. Mauris pharetra arcu at dictum ultricies.
</div>
<!-- tab component -->
{% set ariaselected = "" %}
{% set hiddenclass = "" %}
<h2 class="sr-only" id="tablist-1">Titolo tablist</h2>
<ul
role="tablist"
aria-labelledby="tablist-1"
class="n7-tablist is-tablist is-manual border-b n7-border-gray-01 mb-4 md:mb-10 flex"
>
{% for tab in tabs %}
{% if loop.index == 1 %}
{% set ariaselected = "true" %}
{% else %}
{% set ariaselected = "false" %}
{% endif %}
<li role="presentation">
<button
id="tab-{{ loop.index }}"
type="button"
role="tab"
class="n7-tab n7-tablist__tab is-tab p-3 md:px-6 border-b-2 border-transparent text-sm md:text-base n7-content-01 hover:n7-background-gray-02 aria-selected:n7-border-gray-04"
aria-selected="{{ ariaselected }}"
aria-controls="tabpanel-{{ loop.index }}"{% if loop.index != 1 %} tabindex="-1"{% endif %}>
<span class="focus">{{ tab.label }}</span>
</button>
</li>
{% endfor %}
</ul>
{% for tab in tabs %}
{% if loop.index == 1 %}
{% set hiddenclass = "" %}
{% else %}
{% set hiddenclass = " hidden" %}
{% endif %}
<div
id="tabpanel-{{ loop.index }}"
class="n7-tablist__tabpanel{{ hiddenclass }}"
role="tabpanel"
aria-labelledby="tab-{{ loop.index }}"
>
{{ tab.content | safe }}
</div>
{% endfor %}
{
"title": "Tablist",
"tabs": [
{
"label": "Voce 1",
"content": "Tab 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu aliquam orci. Nullam a nunc vitae nisl venenatis bibendum a tristique ipsum. Donec ipsum magna, ultricies sit amet orci sit amet, mollis iaculis sem. Curabitur feugiat molestie diam, eu tincidunt nibh commodo tincidunt. Maecenas cursus, sapien vitae fermentum elementum, justo est sodales ligula, nec egestas mi nibh vel sem. Aliquam eleifend tortor id nisl placerat, sed fringilla nunc facilisis. Quisque sit amet lacus non leo pulvinar bibendum. Nunc aliquet posuere lorem, eu lacinia felis lobortis a. Pellentesque finibus ante a ligula scelerisque auctor. Donec congue metus lacus, non molestie dui aliquet sed."
},
{
"label": "Voce 2",
"content": "Tab 2 Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur fringilla tempus fringilla. Phasellus porttitor mattis dolor, at rutrum ligula vestibulum non. Proin et tempor enim. Nam euismod est et eleifend egestas. Suspendisse tempus facilisis diam ac consequat. Aenean tempus tellus elit, eu tempor elit mattis sed. Quisque sit amet ultrices magna. Pellentesque nunc elit, varius vel porttitor a, suscipit in nunc. Pellentesque tempus luctus ante eget consequat. Phasellus non vehicula lorem. Curabitur fringilla varius ipsum, placerat convallis orci imperdiet non. Mauris quis ligula luctus, elementum ligula quis, mattis augue. Quisque interdum metus lectus. Cras enim odio, placerat eget eros ut, tempus tempus lorem. Vivamus ut justo lectus. In sed ultrices mauris. Proin sit amet finibus orci, consectetur fermentum neque."
},
{
"label": "Voce 3",
"content": "Tab 3 Aenean feugiat pretium nunc, vitae pellentesque libero gravida eget. Fusce ultricies nulla sit amet nulla tristique, vel dignissim ipsum rutrum. Ut sagittis, sem eget tempus sagittis, nisi nisl luctus lorem, sit amet tincidunt odio nisi luctus nunc. Vivamus at maximus tortor, dapibus aliquet sem. Proin vitae nunc sollicitudin, egestas lectus a, dignissim orci. Nullam id euismod neque. Proin mollis aliquet turpis ut ornare. Mauris pharetra arcu at dictum ultricies."
}
]
}
/* TABS */
/*
* This content is licensed according to the W3C Software License at
* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
*
* File: tabs-manual.js
*
* Desc: Tablist widget that implements ARIA Authoring Practices
*/
'use strict';
class TabsManualHorizontal {
constructor(groupNode) {
this.tablistNode = groupNode;
this.tabs = [];
this.firstTab = null;
this.lastTab = null;
this.tabs = Array.from(this.tablistNode.querySelectorAll('[role=tab].is-tab'));
this.tabpanels = [];
for (var i = 0; i < this.tabs.length; i += 1) {
var tab = this.tabs[i];
var tabpanel = document.getElementById(tab.getAttribute('aria-controls'));
tab.tabIndex = -1;
tab.setAttribute('aria-selected', 'false');
this.tabpanels.push(tabpanel);
tab.addEventListener('keydown', this.onKeydown.bind(this));
tab.addEventListener('click', this.onClick.bind(this));
if (!this.firstTab) {
this.firstTab = tab;
}
this.lastTab = tab;
}
this.setSelectedTab(this.firstTab);
}
setSelectedTab(currentTab) {
for (var i = 0; i < this.tabs.length; i += 1) {
var tab = this.tabs[i];
if (currentTab === tab) {
tab.setAttribute('aria-selected', 'true');
tab.removeAttribute('tabindex');
this.tabpanels[i].classList.remove('hidden');
} else {
tab.setAttribute('aria-selected', 'false');
tab.tabIndex = -1;
this.tabpanels[i].classList.add('hidden');
}
}
}
moveFocusToTab(currentTab) {
currentTab.focus();
}
moveFocusToPreviousTab(currentTab) {
var index;
if (currentTab === this.firstTab) {
this.moveFocusToTab(this.lastTab);
} else {
index = this.tabs.indexOf(currentTab);
this.moveFocusToTab(this.tabs[index - 1]);
}
}
moveFocusToNextTab(currentTab) {
var index;
if (currentTab === this.lastTab) {
this.moveFocusToTab(this.firstTab);
} else {
index = this.tabs.indexOf(currentTab);
this.moveFocusToTab(this.tabs[index + 1]);
}
}
/* EVENT HANDLERS */
onKeydown(event) {
var tgt = event.currentTarget,
flag = false;
switch (event.key) {
case 'ArrowLeft':
this.moveFocusToPreviousTab(tgt);
flag = true;
break;
case 'ArrowUp':
this.moveFocusToPreviousTab(tgt);
flag = true;
break;
case 'ArrowRight':
this.moveFocusToNextTab(tgt);
flag = true;
break;
case 'ArrowDown':
this.moveFocusToNextTab(tgt);
flag = true;
break;
case 'Home':
this.moveFocusToTab(this.firstTab);
flag = true;
break;
case 'End':
this.moveFocusToTab(this.lastTab);
flag = true;
break;
default:
break;
}
if (flag) {
event.stopPropagation();
event.preventDefault();
}
}
// Since this example uses buttons for the tabs, the click onr also is activated
// with the space and enter keys
onClick(event) {
this.setSelectedTab(event.currentTarget);
}
}
// Initialize tablist
window.addEventListener('load', function () {
var tablistsHorizontal = document.querySelectorAll('[role=tablist].is-manual');
for (var i = 0; i < tablistsHorizontal.length; i++) {
new TabsManualHorizontal(tablistsHorizontal[i]);
}
});
Accessible compliant tabs template (tabbed interface). Required: role tablist on main element, role tab on button, role tabpanel on tab panels; aria-labelled on each tabpanel (id from tab button). Example pattern with required interactions, roles, markup etc: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/