fix(ui): Tabs is an ARIA tab list with roving focus and a wired panel

The rail was a row of aria-pressed toggles: every tab a Tab stop, no arrows,
nothing tying a tab to its content. tablist/tab/aria-selected, one Tab stop,
arrows on either axis, Home/End, and useTabPanel for aria-controls/labelledby.

frontend/src/components/DownloadCenter.tsx

@@ -15,6 +15,7 @@ import {
   UploadCloud,
 } from "lucide-react";
 import Tabs from "./ui/Tabs";
+import { useTabPanel } from "./ui/tabPanel";
 import { PageToolbar } from "./ui/PageShell";
 import { LoadingState, StateMessage } from "./ui/QueryState";
 // Lazy: these dialogs/editors open on demand, so they stay out of the Downloads page chunk until
@@ -50,6 +51,7 @@ export default function DownloadCenter() {
   // Always land on the queue tab (not a persisted last-tab) — the queue is where new work and
   // any failures are, so it's the useful default every visit.
   const [tab, setTab] = useState("queue");
+  const panel = useTabPanel();
   const [addUrl, setAddUrl] = useState("");
   const [addSource, setAddSource] = useState<string | null>(null);
   const [upload, setUpload] = useState(false);
@@ -146,7 +148,13 @@ export default function DownloadCenter() {
           nav rail and the tab title name the page, the shell's hidden h1 names it to a screen reader. */}
       <PageToolbar>
         <div className="px-4 pt-2 pb-2 max-w-4xl w-full mx-auto flex flex-wrap items-center justify-between gap-2">
-          <Tabs tabs={tabs} active={tab} onChange={setTab} className="flex flex-wrap gap-1" />
+          <Tabs
+            idBase={panel.idBase}
+            tabs={tabs}
+            active={tab}
+            onChange={setTab}
+            className="flex flex-wrap gap-1"
+          />
           <Button
             variant="ghost"
             size="sm"
@@ -159,7 +167,7 @@ export default function DownloadCenter() {
         </div>
       </PageToolbar>
 
-      <div className="px-4 pb-4 pt-3 max-w-4xl w-full mx-auto">
+      <div {...panel.panelProps(tab)} className="px-4 pb-4 pt-3 max-w-4xl w-full mx-auto">
         {tab === "queue" && (
           <>
             {/* The field takes the whole line when the buttons would squeeze it (at 375 it had 57px). */}