רכיבים נגישים: טאבים

 <div role="tablist"></div>

 <button role="tab" aria-selected="true" onclick="tabClickedFn()">tab 1</button>
 <button role="tab" aria-selected="false" onclick="tabClickedFn()">tab 2</button>
 <button role="tab" aria-selected="false" onclick="tabClickedFn()">tab 3</button>

<div role="tablist">
	<button role="tab" aria-selected="true" onclick="tabClickedFn()">tab 1</button>
	<button role="tab" aria-selected="false" onclick="tabClickedFn()">tab 2</button>
	<button role="tab" aria-selected="false" onclick="tabClickedFn()">tab 3</button>
</div>
<div class="tab-content-wrapper show" id="content1"></div>
<div class="tab-content-wrapper" id="content2"></div>
<div class="tab-content-wrapper" id="content3"></div>

	<button role="tab" aria-selected="true" onclick="tabClickedFn()" onkeydown="movingLeftAndRightFn(event)">tab 1</button>

 movingLeftAndRightFn(event) {
    if (event.which === 37 || event.code === "ArrowLeft") {
      if (tabCounter > 0) {
        tabCounter--;
        classChangeFn();
      }
    }
    if (event.which === 39 || event.code === "ArrowRight") {
      if (tabCounter < tabMax) {
        tabCounter++;
        classChangeFn();
      }
    }
  }