a11y(frontend): focus rings, ARIA labels, skip-link across ui components

src/components/Layout.tsx

@@ -1,6 +1,7 @@
 import { Outlet } from "react-router-dom";
 import { useIsFetching } from "@tanstack/react-query";
 import { Sidebar } from "./Sidebar";
+import { SkipLink } from "@/components/ui/skip-link";
 
 export function Layout() {
   // useIsFetching() returns the number of in-flight queries and is 0 on
@@ -11,6 +12,9 @@ export function Layout() {
 
   return (
     <div className="relative min-h-screen z-10">
+      {/* Skip link — first Tab stop, jumps past the sidebar.
+           Hidden until focused (see .skip-link in index.css). */}
+      <SkipLink />
       {/*
         Scan element — always in the DOM (no layout shift), 1px tall, full
         width. pointer-events-none so it never blocks clicks. The inner
@@ -28,7 +32,11 @@ export function Layout() {
         />
       </div>
       <Sidebar />
-      <main className="md:pl-60">
+      <main
+        id="main-content"
+        tabIndex={-1}
+        className="md:pl-60 outline-none"
+      >
         <div className="mx-auto max-w-[1400px] px-8 py-10">
           <Outlet />
         </div>