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/ChannelPage.tsx

@@ -22,6 +22,7 @@ import {
 } from "lucide-react";
 import Avatar from "./ui/Avatar";
 import Tabs from "./ui/Tabs";
+import { useTabPanel } from "./ui/tabPanel";
 import Feed from "./Feed";
 import ChannelAboutContent from "./ChannelAbout";
 import { PageToolbar } from "./ui/PageShell";
@@ -76,6 +77,7 @@ export default function ChannelPage({
   // inherit it instead of forcing Live/Upcoming on. The channel toolbar can still toggle these.
   const globalFilters = useFeedFilters();
   const [tab, setTab] = useState<"videos" | "about">("videos");
+  const panel = useTabPanel();
   // The whole channel chrome (banner, identity, tabs, toolbar) is fixed: it portals into the shell's
   // fixed band so only the video grid scrolls. This node sits at the bottom of that chrome and is
   // where the channelScoped Feed portals ITS toolbar (via the overridden PageToolbarSlot below), so
@@ -424,6 +426,7 @@ export default function ChannelPage({
             within a few pixels of each other instead of across the page. */}
           <div className="flex items-center gap-2 mt-3 border-b border-border pb-2">
             <Tabs
+              idBase={panel.idBase}
               className="flex gap-1"
               active={tab}
               onChange={(id) => setTab(id as "videos" | "about")}
@@ -569,43 +572,45 @@ export default function ChannelPage({
       {/* Tab content — the feed's toolbar portals up into the fixed chrome via this slot override;
           only the grid (and About) render here, in the scroller. */}
       <PageToolbarSlot.Provider value={chromeSlot}>
-        {tab === "videos" ? (
-          <>
-            <Feed
-              filters={filters}
-              setFilters={setFilters}
-              view={view}
-              setView={setView}
-              canRead={me.can_read}
-              isDemo={me.is_demo}
-              ytSearch={null}
-              onYtSearch={() => {}}
-              onExitYtSearch={() => {}}
-              channelScoped
-            />
-            {!ch?.subscribed && nextToken && (
-              <div className="flex justify-center pb-6">
-                <Button
-                  // Busy blocks the click, not the focus (see Block above).
-                  variant="outline"
-                  icon={<RefreshCw />}
-                  loading={exploring}
-                  onClick={() => runExplore(nextToken)}
-                >
-                  {t("channel.loadMore")}
-                </Button>
-              </div>
-            )}
-          </>
-        ) : (
-          <div className="px-4 sm:px-6 py-4 max-w-3xl">
-            {ch ? (
-              <ChannelAboutContent ch={ch} />
-            ) : (
-              <p className="text-sm text-muted">{t("channel.noDescription")}</p>
-            )}
-          </div>
-        )}
+        <div {...panel.panelProps(tab)}>
+          {tab === "videos" ? (
+            <>
+              <Feed
+                filters={filters}
+                setFilters={setFilters}
+                view={view}
+                setView={setView}
+                canRead={me.can_read}
+                isDemo={me.is_demo}
+                ytSearch={null}
+                onYtSearch={() => {}}
+                onExitYtSearch={() => {}}
+                channelScoped
+              />
+              {!ch?.subscribed && nextToken && (
+                <div className="flex justify-center pb-6">
+                  <Button
+                    // Busy blocks the click, not the focus (see Block above).
+                    variant="outline"
+                    icon={<RefreshCw />}
+                    loading={exploring}
+                    onClick={() => runExplore(nextToken)}
+                  >
+                    {t("channel.loadMore")}
+                  </Button>
+                </div>
+              )}
+            </>
+          ) : (
+            <div className="px-4 sm:px-6 py-4 max-w-3xl">
+              {ch ? (
+                <ChannelAboutContent ch={ch} />
+              ) : (
+                <p className="text-sm text-muted">{t("channel.noDescription")}</p>
+              )}
+            </div>
+          )}
+        </div>
       </PageToolbarSlot.Provider>
     </>
   );