fix: illegal button inside button is header

src/components/topbar/Topbar.tsx

@@ -34,72 +34,68 @@ function Tab({
   onConnect: (dsp: DSP) => void;
   onDisconnect: (dsp: DSP) => void;
 }) {
-  const handleLedClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
+  const isConnected = dsp.status === 'connected';
 
-    if (dsp.status === 'connected') {
-      onDisconnect(dsp);
-    } else {
-      onConnect(dsp);
+  const handleTabKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      onSelect();
     }
   };
 
   return (
-    <button
-      type="button"
-      className={
-        'tab' +
-        (active ? ' tab--active' : '') +
-        (dimmed ? ' tab--dimmed' : '')
-      }
+    <div
+      className={[
+        'tab',
+        active && 'tab--active',
+        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"
-        tabIndex={0}
-        onClick={handleLedClick}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            e.stopPropagation();
+        aria-label={
+          isConnected
+            ? `Disconnect ${dsp.name}`
+            : `Connect ${dsp.name}`
+        }
+        onClick={(e) => {
+          e.stopPropagation();
 
-            if (dsp.status === 'connected') {
-              onDisconnect(dsp);
-            } else {
-              onConnect(dsp);
-            }
+          if (isConnected) {
+            onDisconnect(dsp);
+          } else {
+            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>
   );
 }