a11y: add skip-nav, ARIA landmarks, keyboard support, remove alert()

ComBba · claude · ComBba · commit 3f996ba2a7a7 · 2026-04-07T12:45:50.000+09:00
1. layout.tsx: add skip-to-main-content link for keyboard/screen reader users
2. zero-prompt-landing.tsx: add &lt;label&gt; for YouTube URL input; replace
   alert() Start button with disabled "Admin Only" state + tooltip
3. kanban-board.tsx: add role="region" + aria-label on board container
4. kanban-column.tsx: add role="group" + aria-label with column name
   and item count for screen readers
5. action-feed.tsx: add role="button", tabIndex, aria-pressed, and
   keyboard handlers (Enter/Space) to all filter badges
6. demo/page.tsx: add aria-hidden="true" to decorative cursor animation

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/web/src/app/demo/page.tsx b/web/src/app/demo/page.tsx
@@ -262,6 +262,7 @@ export default function DemoPage() {
       </AnimatePresence>
 
       <motion.div
+        aria-hidden="true"
         className="pointer-events-none fixed left-0 top-0 z-[120]"
         initial={false}
         animate={{
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
@@ -39,7 +39,12 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased bg-background text-foreground`}
       >
-        <ErrorBoundary>{children}</ErrorBoundary>
+        <a href="#main-content" className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:rounded-md focus:bg-primary focus:px-4 focus:py-2 focus:text-primary-foreground">
+          Skip to main content
+        </a>
+        <main id="main-content">
+          <ErrorBoundary>{children}</ErrorBoundary>
+        </main>
       </body>
     </html>
   );
diff --git a/web/src/components/zero-prompt-landing.tsx b/web/src/components/zero-prompt-landing.tsx
@@ -152,19 +152,23 @@ export function ZeroPromptLanding({ youtubeUrl, onYoutubeUrlChange, startAction,
           <Card className="border-border/50 overflow-hidden">
             <CardContent className="pt-6 space-y-4">
               <div className="flex gap-2">
+                <label htmlFor="youtube-url-input" className="sr-only">YouTube video URL</label>
                 <Input
+                  id="youtube-url-input"
                   ref={inputRef}
                   value={youtubeUrl}
                   onChange={(e) => onYoutubeUrlChange(e.target.value)}
                   placeholder="https://www.youtube.com/watch?v=..."
                   className="font-mono text-sm"
+                  aria-label="YouTube video URL"
                 />
                 <Button
-                  className="shrink-0 gap-2 bg-gradient-to-r from-red-600 to-red-500 hover:from-red-500 hover:to-red-400"
-                  onClick={() => alert("This feature is restricted to admin users and authorized IPs only.")}
+                  disabled
+                  className="shrink-0 gap-2 opacity-50 cursor-not-allowed"
+                  title="Admin access required — use Zero-Prompt Start for the full pipeline"
                 >
                   <Lock className="w-4 h-4" />
-                  Start
+                  Admin Only
                 </Button>
               </div>
 
diff --git a/web/src/components/zero-prompt/action-feed.tsx b/web/src/components/zero-prompt/action-feed.tsx
@@ -73,19 +73,27 @@ export function ActionFeed({ actions }: ActionFeedProps) {
             />
           </div>
           <div className="flex gap-1 overflow-x-auto pb-1 sm:pb-0 hide-scrollbar">
-            <Badge 
+            <Badge
+              role="button"
+              tabIndex={0}
+              aria-pressed={typeFilter === null}
               variant={typeFilter === null ? "default" : "outline"}
               className="cursor-pointer text-[10px] whitespace-nowrap"
               onClick={() => setTypeFilter(null)}
+              onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setTypeFilter(null); } }}
             >
               All
             </Badge>
             {uniqueTypes.map(type => (
-              <Badge 
+              <Badge
                 key={type}
+                role="button"
+                tabIndex={0}
+                aria-pressed={typeFilter === type}
                 variant={typeFilter === type ? "default" : "outline"}
                 className="cursor-pointer text-[10px] whitespace-nowrap"
                 onClick={() => setTypeFilter(type === typeFilter ? null : type)}
+                onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setTypeFilter(type === typeFilter ? null : type); } }}
               >
                 {type}
               </Badge>
diff --git a/web/src/components/zero-prompt/kanban-board.tsx b/web/src/components/zero-prompt/kanban-board.tsx
@@ -69,7 +69,7 @@ export function KanbanBoard({ cards, deployedCards = [], sessionId, onQueueBuild
 
   return (
     <>
-      <div className="grid grid-cols-1 md:grid-cols-5 gap-4 mb-6 overflow-x-auto pb-4">
+      <div role="region" aria-label="Idea pipeline Kanban board" className="grid grid-cols-1 md:grid-cols-5 gap-4 mb-6 overflow-x-auto pb-4">
         {COLUMNS.map((col) => (
           <KanbanColumn
             key={col.id}
diff --git a/web/src/components/zero-prompt/kanban-column.tsx b/web/src/components/zero-prompt/kanban-column.tsx
@@ -27,7 +27,7 @@ export function KanbanColumn({ title, statuses, cards, maxItems, onDeleteRejecte
   const isWindowed = typeof maxItems === "number" && columnCards.length > maxItems;
 
   return (
-    <div className="flex flex-col min-w-[280px] bg-muted/30 rounded-xl p-3 border border-border/50">
+    <div role="group" aria-label={`${title} column, ${columnCards.length} items`} className="flex flex-col min-w-[280px] bg-muted/30 rounded-xl p-3 border border-border/50">
       <div className="mb-3 space-y-2 px-1">
         <div className="flex items-center justify-between gap-2">
           <h3 className="font-semibold text-sm">{title}</h3>
