Inaccessible tabbed container w/ the ARIA added

inaccessible-tabbed-container-ARIA-added.css

body {
  font-family: sans-serif;
}

#tabbed-container {
  border: 2px solid black;
  width: 90vw;
  min-height: 200px;
  display: grid;
  grid-template-rows: 1.125rem auto;
  grid-template-columns: auto;
  grid-template-areas: "tabs-container", "panes-container";
}

#tabs-container {
  border-bottom: 1px solid gray;
  display: flex;
}

[role="tab"] {
  min-width: 80px;
  border-right: 1px solid gray;
  text-align: center;
  cursor: pointer;
}

[role="tab"][aria-selected="true"] {
  font-weight: bold;
}

[role="tab"]:hover {
  background-color: lightcyan;
}

#panes-container {
  font-size: 1rem;
  position: relative;
  background-color: lightyellow;
}

[role="tabpanel"] {
  display: none;
}

[role="tabpanel"].active {
  display: block;
}

inaccessible-tabbed-container-ARIA-added.html

<!DOCTYPE html>
<html>
  <head>
    <title>Inaccessible Tabbed Container Example</title>
    <meta charset="UTF-8" />
    <link href="src/styles.css" />
  </head>

  <body>
    <div id="app">
      <h1>Inaccessible Tabbed Container Example</h1>
      <div id="tabbed-container">
        <div id="tabs-container" role="tablist">
          <div
            id="tab-1"
            role="tab"
            aria-controls="panel-1"
            aria-selected="true"
          >
            Tab #1
          </div>
          <div id="tab-2" role="tab" aria-controls="panel-2">Tab #2</div>
          <div id="tab-3" role="tab" aria-controls="panel-3">Tab #3</div>
          <div id="tab-4" role="tab" aria-controls="panel-4">Tab #4</div>
        </div>
        <div id="panes-container">
          <div
            id="panel-1"
            class="active"
            role="tabpanel"
            aria-labelledby="tab-1"
          >
            Pane #1 Lorem Ipsum blah blah blah
          </div>
          <div id="panel-2" role="tabpanel" aria-labelledby="tab-2">
            Pane #2 Lorem Ipsum blah blah blah
            <a href="https://www.alexnied.com">website</a>
          </div>
          <div id="panel-3" role="tabpanel" aria-labelledby="tab-3">
            Pane #3 Lorem Ipsum blah blah blah
          </div>
          <div id="panel-4" role="tabpanel" aria-labelledby="tab-4">
            Pane #4 Lorem Ipsum blah blah blah
          </div>
        </div>
      </div>
    </div>

    <script src="src/index.js"></script>
  </body>
</html>

inaccessible-tabbed-container-ARIA-added.js

const tabsContainer = document.querySelector("#tabs-container");

tabsContainer.addEventListener("click", (e) => {
  if (e.target && e.target.matches("[role='tab']")) {
    const tabs = document.querySelectorAll("[role='tab']");
    const panes = document.querySelectorAll("[role='tabpanel']");
    tabs.forEach((tab) => tab.removeAttribute("aria-selected"));
    panes.forEach((pane) => pane.classList.remove("active"));

    const newActiveTab = e.target;
    const newActivePane = document.querySelector(
      `#${newActiveTab.getAttribute("aria-controls")}`
    );

    newActiveTab.setAttribute("aria-selected", "true");
    newActivePane.classList.add("active");
  }
});