Tab-Liste

            <div role="tablist">
  <button role="tab" id="tab-1" aria-selected="true" aria-controls="panel-1">
    Tab 1
  </button>
  <button role="tab" id="tab-2" aria-selected="false" aria-controls="panel-2">
    Tab 2
  </button>
</div>
<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
  Inhalt von Tab 1
</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2">
  Inhalt von Tab 2
</div>
        

            const tablist = document.querySelector('[role="tablist"]');
const tabs = Array.from(tablist.querySelectorAll('[role="tab"]'));

const firstTab = tabs[0];
const lastTab = tabs[tabs.length - 1];

tabs.forEach(tab => {
  tab.tabIndex = tab.getAttribute('aria-selected') === 'true' ? 0 : -1;
  tab.addEventListener('click', () => setSelectedTab(tab));
  tab.addEventListener('keydown', onKeyDown);
});

function setSelectedTab(currentTab, setFocus = true) {
  tabs.forEach(tab => {
    const panel = document.getElementById(tab.getAttribute('aria-controls'));

    if (tab === currentTab) {
      tab.setAttribute('aria-selected', 'true');
      tab.removeAttribute('tabindex');
      panel.hidden = false;
      if (setFocus) tab.focus();
    } else {
      tab.setAttribute('aria-selected', 'false');
      tab.tabIndex = -1;
      panel.hidden = true;
    }
  });
}

function onKeyDown(event) {
  const index = tabs.indexOf(event.currentTarget);

  switch (event.key) {
    case 'ArrowLeft':
      setSelectedTab(index === 0 ? lastTab : tabs[index - 1]);
      break;

    case 'ArrowRight':
      setSelectedTab(index === tabs.length - 1 ? firstTab : tabs[index + 1]);
      break;

    case 'Home':
      setSelectedTab(firstTab);
      break;

    case 'End':
      setSelectedTab(lastTab);
      break;

    case 'Enter':
    case ' ':
      setSelectedTab(event.currentTarget);
      break;
  }
}