tab-panel-ally

tab.js

export const changeTab = (currentTab) => {
  const emptyEl = document.createElement('div');
  const tabContainer = currentTab.closest('.tab-container');
  if (!tabContainer) return;
  const activeTab = tabContainer.querySelector('.tab-title[aria-selected="true"]') || emptyEl;
  activeTab.removeAttribute('aria-selected');
  activeTab.setAttribute('tabindex', '-1');
  currentTab.setAttribute('aria-selected', 'true');
  currentTab.removeAttribute('tabindex');

  const activeTabPanel = tabContainer.querySelector('.tab-content:not([hidden])') || emptyEl;
  activeTabPanel.hidden = true;
  const tabContent = tabContainer.querySelector(`[aria-labelledby=${currentTab.id}]`);
  if (tabContent) {
    tabContent.hidden = false;
  }
};

document.addEventListener('keydown', ({key}) => {
  const activeTab = document.activeElement;
  const isTabActive = activeTab.classList.contains('tab-title');
  if (isTabActive && key === 'ArrowRight' || key === 'ArrowLeft') {
    let currentIndex = activeTab.dataset.index;
    if (!currentIndex) return;
    currentIndex = +currentIndex;
    const tabList = activeTab.closest('.tab-list');
    const tabButtons = tabList.querySelectorAll('[data-index]');
    const firstTab = tabButtons[0];
    const lastTab = tabButtons[tabButtons.length - 1];
    let nextTab = null;
    if (key === 'ArrowRight') {
      nextTab = tabButtons[currentIndex + 1];
      if (!nextTab) {
        changeTab(firstTab);
        firstTab.focus();
        return;
      }
    }
    if (key === 'ArrowLeft') {
      nextTab = tabButtons[currentIndex - 1];
      if (!nextTab) {
        changeTab(lastTab);
        lastTab.focus();
        return;
      }
    }
    changeTab(nextTab);
    nextTab.focus();
  }
});

/*
<div class="tab-container">
  <div class="tab-list" role="tablist">
    <button id="tab-1-btn" class="tab-title" type="button" role="tab" data-index="0" aria-controls="tab-1" aria-selected="true">Tab-1</button>
    <button id="tab-2-btn" class="tab-title" type="button" role="tab" data-index="1" aria-controls="tab-2">Tab-2</button>
    <button id="tab-3-btn" class="tab-title" type="button" role="tab" data-index="2" aria-controls="tab-3">Tab-3</button>
  </div>
  <div id="tab-1" class="tab-content" role="tabpanel" aria-labelledby="tab-1-btn">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti dolor eos fugiat illum necessitatibus repudiandae sit temporibus, vero. Ad aliquam at modi nesciunt quos saepe vitae. Eveniet, reiciendis suscipit? A animi atque consequuntur cupiditate debitis deleniti deserunt excepturi iure libero nihil, nobis optio, praesentium qui repudiandae sed similique tempora voluptatem?</p>
  </div>
  <div id="tab-2" class="tab-content" role="tabpanel" aria-labelledby="tab-2-btn" hidden>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad alias animi aut autem, corporis deleniti dolorem dolores dolorum eaque eius eos error et exercitationem expedita harum illum ipsam, ipsum iste iure iusto magni modi nihil nisi numquam pariatur quas quasi quos sapiente sit, sunt temporibus ullam velit. Accusamus atque dolor doloremque eius excepturi facere, fuga id impedit, inventore ipsum itaque labore laborum, maxime minus molestiae mollitia non placeat provident quae quidem quos repellat reprehenderit rerum sapiente unde ut veritatis vitae! Debitis est et illo iusto laborum laudantium molestias, odio odit officiis perspiciatis quaerat quos repellat reprehenderit soluta sunt voluptas!</p>
  </div>
  <div id="tab-3" class="tab-content" role="tabpanel" aria-labelledby="tab-3-btn" hidden>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti est nostrum quas? Beatae doloribus earum esse est eum, eveniet ex exercitationem minima molestiae nam placeat quos repudiandae sit soluta sunt. Ad dignissimos inventore iure nisi quasi ratione repellendus temporibus unde! Aspernatur assumenda atque beatae consequatur debitis dolor eum eveniet inventore itaque laborum magni, minima mollitia necessitatibus neque non nostrum odit omnis quaerat quis quisquam sequi similique, velit, vero vitae voluptatum? Consequuntur, deleniti doloribus eaque esse et expedita illo labore minus nobis placeat quibusdam quis saepe sapiente. Deleniti quo quod repellat repellendus sequi ut voluptates? Deleniti distinctio dolor eius harum nostrum possimus? Dolorem harum inventore officiis pariatur unde vel. Ad consequuntur, deleniti eligendi, fugit hic iste magnam modi natus nihil perspiciatis quae quos reiciendis, repellendus saepe sapiente soluta ullam? Cum, dolore in itaque laborum nobis quasi quibusdam repellat sunt totam? Alias animi blanditiis, fugiat fugit pariatur perferendis porro quisquam repellat voluptatibus!</p>
  </div>
</div>

.tab-list {
	display: flex;
}

.tab-title {
	padding: 0 0 5px 0;
	border-bottom: 2px solid transparent;

	&:not(:last-child) {
		margin-right: 25px;
	}

	&[aria-selected="true"] {
		border-bottom: 2px solid black;
	}
}

.tab-content {
	padding-top: 20px;
	//margin-top: -1px;
	border-top: 1px solid gray;
}
*/