The tabs

<div class="tabs">
  <h3 id="tabs-title">Desk lamp</h3>
  <!-- Tab list: hidden until the script has run -->
  <div
    class="tabs__list"
    role="tablist"
    aria-labelledby="tabs-title"
    hidden>
    <!-- Selected tab: the only tab stop in the list -->
    <button
      id="tab-1"
      type="button"
      role="tab"
      aria-selected="true"
      aria-controls="tabpanel-1">
      Description
    </button>
    <button
      id="tab-2"
      type="button"
      role="tab"
      aria-selected="false"
      aria-controls="tabpanel-2"
      tabindex="-1">
      Dimensions
    </button>
    <!-- Tabs 3 to 5: same model -->
  </div>
  <!-- Panels: with no script, they all show, each under its heading -->
  <div id="tabpanel-1" class="tabs__panel">
    <h4 class="tabs__title">Description</h4>
    <p>…</p>
  </div>
  <div id="tabpanel-2" class="tabs__panel">
    <h4 class="tabs__title">CSS</h4>
    <p>…</p>
  </div>
</div>

<script>
  // Automatic activation: the tab that gets focus shows
  const list = document.querySelector('.tabs [role="tablist"]');
  const tabs = [...list.querySelectorAll('[role="tab"]')];
  const panel = (t) => document.getElementById(t.getAttribute('aria-controls'));
  const select = (tab) => {
    for (const t of tabs) {
      t.setAttribute('aria-selected', t === tab);
      t.tabIndex = t === tab ? 0 : -1;
      // until-found: Ctrl+F finds the text of a hidden panel.
      // aria-hidden removes the empty panel from the accessibility tree.
      if (t === tab) {
        panel(t).removeAttribute('hidden');
        panel(t).removeAttribute('aria-hidden');
        panel(t).tabIndex = 0;
      } else {
        panel(t).setAttribute('hidden', 'until-found');
        panel(t).setAttribute('aria-hidden', 'true');
        panel(t).removeAttribute('tabindex');
      }
    }
  };
  list.addEventListener('click', (e) => {
    const tab = e.target.closest('[role="tab"]');
    if (tab) select(tab);
  });
  list.addEventListener('keydown', (e) => {
    const i = tabs.indexOf(e.target);
    const n = tabs.length;
    const keys = { ArrowLeft: i - 1, ArrowRight: i + 1, Home: 0, End: n - 1 };
    const next = keys[e.key];
    if (next === undefined) return;
    e.preventDefault();
    const tab = tabs[(next + n) % n];
    tab.focus();
    select(tab);
  });
  // Panels: role and name. If Ctrl+F finds text
  // in a hidden panel, its tab shows.
  for (const t of tabs) {
    panel(t).setAttribute('role', 'tabpanel');
    panel(t).setAttribute('aria-labelledby', t.id);
    panel(t).addEventListener('beforematch', () => select(t));
  }
  list.hidden = false;
  select(tabs[0]);
</script>

/* With the script, the tab list replaces the panel headings */
.tabs:has(.tabs__list:not([hidden])) .tabs__title {
  display: none;
}

.tabs__list:not([hidden]) {
  display: flex;
  gap: 4px;
}

/* The selected tab: color and a bar at the top of the tab */
.tabs [aria-selected="true"] {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: inset 0 4px 0 var(--highlight);
}

.tabs [role="tab"]:focus-visible,
.tabs [role="tabpanel"]:focus-visible {
  outline: 3px solid var(--highlight);
}