<ul role="tablist">
  <li role="presentation">
    <button id="tab1" role="tab" aria-selected="true">Tomato</button>
  </li>
  <li role="presentation">
    <button id="tab2" role="tab" tabindex="-1">Onion</button>
  </li>
  <li role="presentation">
    <button id="tab3" role="tab" tabindex="-1">Celery</button>
  </li>
  <li role="presentation">
    <button id="tab4" role="tab" tabindex="-1">Carrot</button>
  </li>
</ul>
<div class="tablist-container">
  <section role="tabpanel" aria-labelledby="tab1" tabindex="0">
    <img src="https://images.unsplash.com/photo-1607305387299-a3d9611cd469?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="A red tomato">
  </section>
  <section role="tabpanel" aria-labelledby="tab2" tabindex="0" hidden>
    <img src="https://images.unsplash.com/photo-1587049633312-d628ae50a8ae?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80" alt="Two yellow onions">
  </section>
  <section role="tabpanel" aria-labelledby="tab3" tabindex="0" hidden>
    <img src="https://images.unsplash.com/photo-1580391564590-aeca65c5e2d3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" alt="A celery">
  </section>
  <section role="tabpanel" aria-labelledby="tab4" tabindex="0" hidden>
    <img src="https://images.unsplash.com/photo-1589927986089-35812388d1f4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="3 carrots on a wooden table">
  </section>
</div>

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

[aria-selected="true"] {
  background-color: tomato;
}

[role="tablist"] {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

[role="tablist"] > * {
  flex-grow: 1;
  flex-basis: calc(( 500px - 100%) * 999);
}

[role="tab"] {
  padding: 0.5em 1em;
  width: 100%;
  font-size: 1.2rem;
  font-family: inherit;
  border-color: black;
}

[role="tab"]:focus-visible {
  outline-offset: -4px;
  outline: 2px solid currentcolor
}

img {
  display: block;
  margin-inline: auto;
  max-width: 100%;
  max-height: 80vh;
}

[role="tabpanel"] {
  padding: 1rem;
}

[role="tabpanel"]:focus-visible {
  background-color: #ffcdbf;
  outline-color: transparent; 
}

const TABLIST = document.querySelector("[role='tablist']");
const TABS = [...TABLIST.querySelectorAll("[role='tab']")];
const TABPANELS = [...document.querySelectorAll("[role='tabpanel']")];

const createKeyboardNavigation = () => {
  const firstTab = TABS[0];
  const lastTab = TABS[TABS.length - 1];

  TABS.forEach((element) => {
    element.addEventListener("keydown", function (e) {
      if (e.key === "ArrowUp" || e.key === "ArrowLeft") {
        e.preventDefault();
        if (element == firstTab) {
          lastTab.focus();
        } else {
          const focusableElement = TABS.indexOf(element) - 1;
          TABS[focusableElement].focus();
        }
      } else if (e.key === "ArrowDown" || e.key === "ArrowRight") {
        e.preventDefault();
        if (element == lastTab) {
          firstTab.focus();
        } else {
          const focusableElement = TABS.indexOf(element) + 1;
          TABS[focusableElement].focus();
        }
      } else if (e.key === "Home") {
        e.preventDefault();
        firstTab.focus()
      } else if (e.key === "End") {
        e.preventDefault();
        lastTab.focus()
      }
    });
  });
};

const showActivePanel = (element) => {
  const selectedId = element.target.id;
  TABPANELS.forEach((e) => {
    e.hidden = "true";
  });
  const activePanel = document.querySelector(
    `[aria-labelledby="${selectedId}"]`
  );
  activePanel.removeAttribute("hidden");
};

const handleSelectedTab = (element) => {
  const selectedId = element.target.id;
  TABS.forEach((e) => {
    const id = e.getAttribute("id");
    if (id === selectedId) {
      e.removeAttribute("tabindex", "0");
      e.setAttribute("aria-selected", "true");
    } else {
      e.setAttribute("tabindex", "-1");
      e.setAttribute("aria-selected", "false");
    }
  });
};

createKeyboardNavigation();

TABS.forEach((element) => {
  element.addEventListener("click", (element) => {
    showActivePanel(element), handleSelectedTab(element);
  });

  element.addEventListener("focus", (element) => {
    showActivePanel(element), handleSelectedTab(element);
  });
});