fix: illegal button inside button is header

src/components/topbar/Topbar.css

@@ -134,11 +134,12 @@
   gap: var(--space-3);
   height: var(--tab-height);
   padding: 0 var(--space-3);
-  border: var(--border-width-active) solid transparent;
+  border: var(--border-width-active) solid var(--border-hairline);
   border-radius: var(--radius-lg);
   background: transparent;
   color: var(--text-muted);
   font-family: var(--font-ui);
+  font-size: var(--font-md);
   cursor: pointer;
   box-sizing: border-box;
   scroll-snap-align: start;
@@ -157,15 +158,19 @@
   border-color: var(--accent-brand);
 }
 
-.tab span[title] {
+.tab-name {
+  flex: 1 1 auto;
+  min-width: 0;
+
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  min-width: 0;
+
+  user-select: none;
 }
 
 .tab-led {
-  height: 40%;
+  height: 50%;
   aspect-ratio: 1 / 1;
 
   flex: 0 0 auto;
@@ -174,26 +179,33 @@
   align-items: center;
   justify-content: center;
 
-  min-height: 0;
+  border: 0;
-  min-width: 0;
-
   border-radius: var(--radius-sm);
+
+  background: transparent;
+
+  padding: 0;
 }
 
 .tab-close {
   height: 50%;
   aspect-ratio: 1 / 1;
 
+  flex: 0 0 auto;
+
   display: flex;
   align-items: center;
   justify-content: center;
-  flex: 0 0 auto;
+
+  border: 0;
+  border-radius: var(--radius-sm);
+
   margin-left: auto;
   padding: 0;
   font-size: var(--tab-close-font);
-  line-height: 1;
   color: var(--text-muted);
-  border-radius: var(--radius-sm);
+  
+  background: transparent;
 }
 
 .tab--active {
@@ -249,4 +261,4 @@
     (var(--space-3) * 2) + (var(--tab-height) * 0.5) + (var(--space-2) * 2) + 4ch +
       var(--tab-close-size)
   );
-}
+}

src/components/topbar/Topbar.tsx

@@ -34,72 +34,68 @@ function Tab({
   onConnect: (dsp: DSP) => void;
   onDisconnect: (dsp: DSP) => void;
 }) {
-  const handleLedClick = (e: React.MouseEvent) => {
+  const isConnected = dsp.status === 'connected';
-    e.stopPropagation();
 
-    if (dsp.status === 'connected') {
+  const handleTabKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-      onDisconnect(dsp);
+    if (e.key === 'Enter' || e.key === ' ') {
-    } else {
+      e.preventDefault();
-      onConnect(dsp);
+      onSelect();
     }
   };
 
   return (
-    <button
+    <div
-      type="button"
+      className={[
-      className={
+        'tab',
-        'tab' +
+        active && 'tab--active',
-        (active ? ' tab--active' : '') +
+        dimmed && 'tab--dimmed',
-        (dimmed ? ' tab--dimmed' : '')
+      ]
-      }
+        .filter(Boolean)
+        .join(' ')}
       data-step={step}
+      tabIndex={0}
+      role="tab"
+      aria-selected={active}
       onClick={onSelect}
+      onKeyDown={handleTabKeyDown}
     >
-      <span
+      <button
+        type="button"
         className="tab-led"
-        role="button"
+        aria-label={
-        tabIndex={0}
+          isConnected
-        onClick={handleLedClick}
+            ? `Disconnect ${dsp.name}`
-        onKeyDown={(e) => {
+            : `Connect ${dsp.name}`
-          if (e.key === 'Enter' || e.key === ' ') {
+        }
-            e.preventDefault();
+        onClick={(e) => {
-            e.stopPropagation();
+          e.stopPropagation();
 
-            if (dsp.status === 'connected') {
+          if (isConnected) {
-              onDisconnect(dsp);
+            onDisconnect(dsp);
-            } else {
+          } else {
-              onConnect(dsp);
+            onConnect(dsp);
-            }
           }
         }}
       >
         <Led status={dsp.status} />
-      </span>
+      </button>
 
       <span className="tab-name" title={dsp.name}>
         {dsp.name}
       </span>
 
-      <span
+      <button
+        type="button"
         className="tab-close"
-        role="button"
-        tabIndex={0}
         aria-label={`Remove ${dsp.name}`}
         onClick={(e) => {
           e.stopPropagation();
           onRemove();
         }}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            e.stopPropagation();
-            onRemove();
-          }
-        }}
       >
         <CloseIcon />
-      </span>
+      </button>
-    </button>
+    </div>
   );
 }