<!-- RP 240325 - Added containing div -->
<div class="">
<h2 class="sr-only" id="tablist-1">Titolo tablist</h2>
<ul role="tablist" aria-labelledby="tablist-1" class="n7-tablist is-tablist is-manual">
<li role="presentation">
<button id="tab-1" type="button" role="tab" class="n7-tablist__tab is-tab" 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-tablist__tab is-tab" aria-selected="false" aria-controls="tabpanel-2" tabindex="-1">
<span class="focus">Voce 2</span>
</button>
</li>
</ul>
<!-- RP 240325 - Added containing div -->
</div>
<div id="tabpanel-1" class="n7-tablist__tabpanel" role="tabpanel" aria-labelledby="tab-1">
<div class="my-10 lg:my-16">
<!-- RP 240404 Tablist 02 - Changed classes -->
<div class="grid gap-5 lg:grid-cols-2 xl:grid-cols-[1fr_430px_max-content]">
<!-- RP 240404 Tablist 02 - Changed classes -->
<div class="grid gap-6 content-start lg:pr-6">
<h3 class="n7-display-heading-6 lg:n7-heading-2">Ricerca e Sviluppo</h3>
<p class="text-base lg:text-lg">L'approccio di OFFHEALTH alla ricerca e allo sviluppo è caratterizzato da un impegno costante verso l'innovazione. Ciò si traduce nella creazione di prodotti e trattamenti per l'oftalmologia avanzati, con un focus specifico su patologie come le alterazioni della retina, della superficie oculare, il glaucoma.</p>
<p class="text-base lg:text-lg">La nostra ricerca punta a migliorare l'efficacia terapeutica e la tollerabilità dei trattamenti, incrementando così la compliance dei pazienti.</p>
</div>
<!-- RP 240404 Tablist 02 - Changed classes -->
<div class="grid gap-6 p-8 text-white content-end" style="background: linear-gradient(rgba(3, 49, 135, 0.92), rgba(3, 49, 135, 0.92)), url('/images/OffHealth-ricerca.jpg') no-repeat left top; background-size: cover;">
<div class="n7-display-heading-6 lg:n7-heading-2">+10 Anni</div>
<p>OFFHEALTH S.p.a. celebra un decennio di eccellenza nel campo farmaceutico oculistico. Da quando abbiamo iniziato il nostro viaggio nel 2013.</p>
</div>
<img class="hidden xl:block" src="/images/bullets-pattern-03.svg" alt="">
</div>
</div>
</div>
<div id="tabpanel-2" class="n7-tablist__tabpanel hidden" role="tabpanel" aria-labelledby="tab-2">
<div class="my-10 lg:my-16">
<!-- RP 240404 Tablist 02 - Changed classes -->
<div class="grid gap-5 lg:grid-cols-2 xl:grid-cols-[1fr_430px_max-content]">
<!-- RP 240404 Tablist 02 - Changed classes -->
<div class="grid gap-6 content-start lg:pr-6">
<h3 class="n7-display-heading-6 lg:n7-heading-2">Collaborazione Medica</h3>
<p class="text-base lg:text-lg">La collaborazione con i medici oculisti è fondamentale per OFFHEALTH. Ci impegniamo a fornire alla classe medica prodotti e servizi di alta qualità che siano utili nell’attività clinica, diagnostica e terapeutica.</p>
<p class="text-base lg:text-lg">Questo contribuisce a migliorare la qualità della vita dei pazienti, rispecchiando il nostro impegno nel campo oculistico.</p>
</div>
<div>
<!-- RP 240404 Tablist - Changed classes -->
<img class="object-cover h-full" src="/images/OffHealth-collaborazione.jpg" alt="">
</div>
<img class="hidden xl:block" src="/images/bullets-pattern-03.svg" alt="">
</div>
</div>
</div>
{% set ariaselected = "" %}
{% set hiddenclass = "" %}
<!-- RP 240325 - Added containing div -->
<div class="{{ classes }}">
<h2 class="sr-only" id="tablist-1">Titolo tablist</h2>
<ul
role="tablist"
aria-labelledby="tablist-1"
class="n7-tablist is-tablist is-manual"
>
{% 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-tablist__tab is-tab"
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>
<!-- RP 240325 - Added containing div -->
</div>
{% 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 }} #}
{% render '@tab-item-'+loop.index %}
</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."
}
]
}
/* 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/