+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -90,6 +160,42 @@
: 'Geschäftsmodell anzeigen';
});
}
+
+ const tabGroup = document.querySelector('[data-pattern="card-gruppe-mit-tastennavigation"]');
+
+ if (tabGroup) {
+ const tabs = Array.from(tabGroup.querySelectorAll('[role="tab"]'));
+ const panels = Array.from(tabGroup.querySelectorAll('[role="tabpanel"]'));
+
+ const activateTab = (targetTab) => {
+ tabs.forEach((tab) => {
+ tab.setAttribute('aria-selected', String(tab === targetTab));
+ });
+
+ panels.forEach((panel) => {
+ panel.hidden = panel.id !== targetTab.getAttribute('aria-controls');
+ });
+ };
+
+ tabs.forEach((tab, index) => {
+ tab.addEventListener('click', () => {
+ activateTab(tab);
+ });
+
+ tab.addEventListener('keydown', (event) => {
+ if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') {
+ return;
+ }
+
+ event.preventDefault();
+ const direction = event.key === 'ArrowRight' ? 1 : -1;
+ const nextIndex = (index + direction + tabs.length) % tabs.length;
+ const nextTab = tabs[nextIndex];
+ nextTab.focus();
+ activateTab(nextTab);
+ });
+ });
+ }