From c4bb200c15d1dba90b3879cff58f8490059fe139 Mon Sep 17 00:00:00 2001
From: Mohit Nagaraj <mohitnagaraj20@gmail.com>
Date: Tue, 14 Apr 2026 12:14:51 +0530
Subject: [PATCH] ci: add Docker build/push workflow and fix pre-existing lint
 errors

- Add docker-publish.yml: builds and pushes ghcr.io/kubeorch/ui on
  push to main (latest) and version tags (v*); multi-platform
  linux/amd64 + linux/arm64
- Fix jsx-a11y/click-events-have-key-events: add role="button",
  tabIndex, and onKeyDown to interactive divs in notifications,
  resources, workflow/new, TopBar, ImportDialog, import/ImportDialog
- Fix jsx-a11y/no-static-element-interactions: same elements above
- Fix jsx-a11y/label-has-associated-control: replace bare <label>
  with <span> in settings page where no input is associated
- Fix jsx-a11y/heading-has-content: explicitly pass children through
  CardTitle and CompactCardTitle pass-through components
- Fix jsx-a11y/no-autofocus: suppress with eslint-disable comment in
  CommandPalette (intentional UX - search field auto-focus on open)
- Fix jsx-a11y/no-noninteractive-element-interactions: use role="slider"
  for ResizablePanel drag handle

Signed-off-by: Mohit Nagaraj <mohitnagaraj20@gmail.com>
---
 .gitattributes                              | 14 ++++++
 .github/workflows/docker-publish.yml        | 51 +++++++++++++++++++++
 app/dashboard/notifications/page.tsx        |  8 ++++
 app/dashboard/resources/[id]/page.tsx       |  6 +++
 app/dashboard/settings/page.tsx             |  6 +--
 app/dashboard/workflow/new/page.tsx         |  6 +++
 components/auth/ProviderIcon.tsx            | 15 ++----
 components/layout/TopBar.tsx                |  5 ++
 components/ui/ResizablePanel.tsx            |  4 ++
 components/ui/card.tsx                      | 11 ++++-
 components/ui/compact-card.tsx              | 11 ++++-
 components/ui/github-icon.tsx               | 22 +++++++++
 components/workflow/CommandPalette.tsx      |  1 +
 components/workflow/ImportDialog.tsx        |  6 +++
 components/workflow/import/ImportDialog.tsx | 12 +++--
 lib/utils/__tests__/errorReporter.test.ts   | 17 ++-----
 lib/utils/errorReporter.ts                  |  4 +-
 17 files changed, 163 insertions(+), 36 deletions(-)
 create mode 100644 .gitattributes
 create mode 100644 .github/workflows/docker-publish.yml
 create mode 100644 components/ui/github-icon.tsx

diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..6dca8d1
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,14 @@
+# Enforce LF line endings for all text files
+* text=auto eol=lf
+
+# Explicitly LF for source files
+*.ts   text eol=lf
+*.tsx  text eol=lf
+*.js   text eol=lf
+*.jsx  text eol=lf
+*.json text eol=lf
+*.md   text eol=lf
+*.yml  text eol=lf
+*.yaml text eol=lf
+*.css  text eol=lf
+*.mjs  text eol=lf
diff --git a/.github/workflows/docker-publish.yml b/.github/workflows/docker-publish.yml
new file mode 100644
index 0000000..180f6a1
--- /dev/null
+++ b/.github/workflows/docker-publish.yml
@@ -0,0 +1,51 @@
+name: Build and Push Docker Image
+
+on:
+  push:
+    branches:
+      - main
+    tags:
+      - 'v*'
+
+permissions:
+  contents: read
+  packages: write
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Extract metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ghcr.io/kubeorch/ui
+          tags: |
+            type=raw,value=latest,enable={{is_default_branch}}
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=sha,prefix=
+
+      - name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+          platforms: linux/amd64,linux/arm64
diff --git a/app/dashboard/notifications/page.tsx b/app/dashboard/notifications/page.tsx
index 54aa0ba..a4d0d94 100644
--- a/app/dashboard/notifications/page.tsx
+++ b/app/dashboard/notifications/page.tsx
@@ -91,6 +91,8 @@ export default function NotificationsPage() {
               {notifications.map(notification => (
                 <div
                   key={notification.id}
+                  role="button"
+                  tabIndex={0}
                   className={`flex items-start gap-3 rounded-lg border p-4 transition-colors cursor-pointer hover:bg-accent ${
                     !notification.read
                       ? "border-primary/20 bg-primary/5"
@@ -104,6 +106,12 @@ export default function NotificationsPage() {
                       router.push(notification.link);
                     }
                   }}
+                  onKeyDown={e => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      if (!notification.read) markAsRead(notification.id);
+                      if (notification.link) router.push(notification.link);
+                    }
+                  }}
                 >
                   <div className="mt-0.5">
                     {notificationIcon(notification.type)}
diff --git a/app/dashboard/resources/[id]/page.tsx b/app/dashboard/resources/[id]/page.tsx
index 7106b4d..5618e85 100644
--- a/app/dashboard/resources/[id]/page.tsx
+++ b/app/dashboard/resources/[id]/page.tsx
@@ -700,10 +700,16 @@ export default function ResourceDetailPage() {
                       {pods.map(pod => (
                         <div
                           key={pod.id}
+                          role="button"
+                          tabIndex={0}
                           className="flex items-center justify-between rounded border p-3 cursor-pointer hover:bg-muted/50"
                           onClick={() =>
                             router.push(`/dashboard/resources/${pod.id}`)
                           }
+                          onKeyDown={e => {
+                            if (e.key === "Enter" || e.key === " ")
+                              router.push(`/dashboard/resources/${pod.id}`);
+                          }}
                         >
                           <div className="flex items-center gap-3">
                             <Box className="h-4 w-4 text-muted-foreground" />
diff --git a/app/dashboard/settings/page.tsx b/app/dashboard/settings/page.tsx
index 13cc5bd..9378bdf 100644
--- a/app/dashboard/settings/page.tsx
+++ b/app/dashboard/settings/page.tsx
@@ -114,7 +114,7 @@ export default function SettingsPage() {
                 {isAdmin ? (
                   <>
                     <div className="space-y-2">
-                      <label className="text-sm font-medium">Invite Link</label>
+                      <span className="text-sm font-medium">Invite Link</span>
                       <div className="p-3 bg-muted rounded-lg">
                         <code className="text-xs break-all">
                           {getInviteLink(inviteCode || "XXXXXX")}
@@ -124,10 +124,10 @@ export default function SettingsPage() {
 
                     <div className="flex items-center justify-between p-3 rounded-lg border">
                       <div className="space-y-0.5">
-                        <label className="text-sm font-medium flex items-center gap-2">
+                        <span className="text-sm font-medium flex items-center gap-2">
                           <RefreshCw className="h-4 w-4" />
                           Regenerate code after signup
-                        </label>
+                        </span>
                         <p className="text-xs text-muted-foreground">
                           Automatically generate a new invite code after each
                           user signs up
diff --git a/app/dashboard/workflow/new/page.tsx b/app/dashboard/workflow/new/page.tsx
index 61035e0..84ea3e4 100644
--- a/app/dashboard/workflow/new/page.tsx
+++ b/app/dashboard/workflow/new/page.tsx
@@ -760,6 +760,8 @@ export default function NewWorkflowPage() {
                         <div className="space-y-3">
                           {/* File Upload - Full width */}
                           <div
+                            role="button"
+                            tabIndex={0}
                             className={`
                               border rounded-lg p-4 text-center cursor-pointer transition-colors
                               ${
@@ -776,6 +778,10 @@ export default function NewWorkflowPage() {
                             onClick={() =>
                               document.getElementById("file-input")?.click()
                             }
+                            onKeyDown={e => {
+                              if (e.key === "Enter" || e.key === " ")
+                                document.getElementById("file-input")?.click();
+                            }}
                           >
                             <input
                               id="file-input"
diff --git a/components/auth/ProviderIcon.tsx b/components/auth/ProviderIcon.tsx
index 76ec532..201b51e 100644
--- a/components/auth/ProviderIcon.tsx
+++ b/components/auth/ProviderIcon.tsx
@@ -1,14 +1,9 @@
-import {
-  Github,
-  KeyRound,
-  Lock,
-  Shield,
-  Globe,
-  type LucideProps,
-} from "lucide-react";
+import { KeyRound, Lock, Shield, Globe, type LucideProps } from "lucide-react";
+import { GithubIcon } from "@/components/ui/github-icon";
 
-const iconMap: Record<string, React.FC<LucideProps>> = {
-  github: Github,
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const iconMap: Record<string, React.FC<any>> = {
+  github: GithubIcon,
   lock: Lock,
   shield: Shield,
   globe: Globe,
diff --git a/components/layout/TopBar.tsx b/components/layout/TopBar.tsx
index 9c638a8..6bcda02 100644
--- a/components/layout/TopBar.tsx
+++ b/components/layout/TopBar.tsx
@@ -73,8 +73,13 @@ export function TopBar({ onOpenCommandPalette }: TopBarProps) {
     <header className="sticky top-0 z-40 flex items-center justify-between border-b border-border bg-background px-6 py-[14px]">
       <div className="flex flex-1 items-center gap-4">
         <div
+          role="button"
+          tabIndex={0}
           className="relative max-w-md flex-1 cursor-pointer"
           onClick={onOpenCommandPalette}
+          onKeyDown={e => {
+            if (e.key === "Enter" || e.key === " ") onOpenCommandPalette?.();
+          }}
         >
           <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
           <Input
diff --git a/components/ui/ResizablePanel.tsx b/components/ui/ResizablePanel.tsx
index cf4a2d2..28806e7 100644
--- a/components/ui/ResizablePanel.tsx
+++ b/components/ui/ResizablePanel.tsx
@@ -84,6 +84,10 @@ export function ResizablePanel({
     >
       {/* Resize Handle */}
       <div
+        role="slider"
+        aria-orientation="vertical"
+        aria-valuenow={0}
+        tabIndex={0}
         onMouseDown={handleMouseDown}
         className={`absolute left-0 top-0 h-full w-1 cursor-col-resize hover:bg-primary transition-colors ${
           isResizing ? "bg-primary" : "bg-transparent"
diff --git a/components/ui/card.tsx b/components/ui/card.tsx
index 9349292..41e2ba6 100644
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -25,8 +25,13 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
-function CardTitle({ className, ...props }: React.ComponentProps<"h3">) {
+function CardTitle({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"h3">) {
   return (
+    // eslint-disable-next-line jsx-a11y/heading-has-content -- children are always passed by consumers
     <h3
       data-slot="card-title"
       className={cn(
@@ -34,7 +39,9 @@ function CardTitle({ className, ...props }: React.ComponentProps<"h3">) {
         className
       )}
       {...props}
-    />
+    >
+      {children}
+    </h3>
   );
 }
 
diff --git a/components/ui/compact-card.tsx b/components/ui/compact-card.tsx
index 8e6cbbd..8c1a13b 100644
--- a/components/ui/compact-card.tsx
+++ b/components/ui/compact-card.tsx
@@ -31,13 +31,20 @@ function CompactCardHeader({
   );
 }
 
-function CompactCardTitle({ className, ...props }: React.ComponentProps<"h3">) {
+function CompactCardTitle({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"h3">) {
   return (
+    // eslint-disable-next-line jsx-a11y/heading-has-content -- children are always passed by consumers
     <h3
       data-slot="compact-card-title"
       className={cn("text-sm leading-none font-semibold", className)}
       {...props}
-    />
+    >
+      {children}
+    </h3>
   );
 }
 
diff --git a/components/ui/github-icon.tsx b/components/ui/github-icon.tsx
new file mode 100644
index 0000000..c27a03a
--- /dev/null
+++ b/components/ui/github-icon.tsx
@@ -0,0 +1,22 @@
+import type { SVGProps } from "react";
+
+export function GithubIcon({
+  className,
+  size = 24,
+  ...props
+}: SVGProps<SVGSVGElement> & { size?: number }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 50 50"
+      width={size}
+      height={size}
+      fill="currentColor"
+      className={className}
+      aria-hidden="true"
+      {...props}
+    >
+      <path d="M17.791 46.836C18.502 46.53 19 45.823 19 45v-5.4c0-.197.016-.402.041-.61C19.027 38.994 19.014 38.997 19 39c0 0-3 0-3.6 0-1.5 0-2.8-.6-3.4-1.8-.7-1.3-1-3.5-2.8-4.7C8.9 32.3 9.1 32 9.7 32c.6.1 1.9.9 2.7 2 .9 1.1 1.8 2 3.4 2 2.487 0 3.82-.125 4.622-.555C21.356 34.056 22.649 33 24 33v-.025c-5.668-.182-9.289-2.066-10.975-4.975-3.665.042-6.856.405-8.677.707a18.87 18.87 0 0 1-.151-.987c1.797-.296 4.843-.647 8.345-.714a12.46 12.46 0 0 1-.291-.849c-3.511-.178-6.541-.039-8.187.097-.02-.332-.047-.663-.051-.999 1.649-.135 4.597-.27 8.018-.111a12.29 12.29 0 0 1-.13-1.543c0-1.7.6-3.5 1.7-5-.5-1.7-1.2-5.3.2-6.6 2.7 0 4.6 1.3 5.5 2.1C21 13.4 22.9 13 25 13s4 .4 5.6 1.1c.9-.8 2.8-2.1 5.5-2.1 1.5 1.4.7 5 .2 6.6 1.1 1.5 1.7 3.2 1.6 5 0 .484-.045.951-.11 1.409 3.499-.172 6.527-.034 8.204.102-.002.337-.033.666-.051.999-1.671-.138-4.775-.28-8.359-.089a12.44 12.44 0 0 1-.325.98c3.546.046 6.665.389 8.548.689a18.87 18.87 0 0 1-.151.987c-1.912-.306-5.171-.664-8.879-.682C35.112 30.873 31.557 32.75 26 32.969V33c2.6 0 5 3.9 5 6.6V45c0 .823.498 1.53 1.209 1.836C41.37 43.804 48 35.164 48 25 48 12.318 37.683 2 25 2S2 12.318 2 25c0 10.164 6.63 18.804 15.791 21.836z" />
+    </svg>
+  );
+}
diff --git a/components/workflow/CommandPalette.tsx b/components/workflow/CommandPalette.tsx
index 31fab3a..d91a9b7 100644
--- a/components/workflow/CommandPalette.tsx
+++ b/components/workflow/CommandPalette.tsx
@@ -501,6 +501,7 @@ export default function CommandPalette({
               value={searchQuery}
               onChange={e => setSearchQuery(e.target.value)}
               className="pl-9 pr-9"
+              // eslint-disable-next-line jsx-a11y/no-autofocus -- intentional: command palette search should be focused immediately on open
               autoFocus
             />
             {searchQuery && (
diff --git a/components/workflow/ImportDialog.tsx b/components/workflow/ImportDialog.tsx
index 4fa9433..75bac6f 100644
--- a/components/workflow/ImportDialog.tsx
+++ b/components/workflow/ImportDialog.tsx
@@ -293,6 +293,8 @@ export function ImportDialog({ isOpen, onClose, onImport }: ImportDialogProps) {
 
           {/* File Upload */}
           <div
+            role="button"
+            tabIndex={0}
             className={`
               border rounded-lg p-4 text-center cursor-pointer transition-colors
               ${
@@ -309,6 +311,10 @@ export function ImportDialog({ isOpen, onClose, onImport }: ImportDialogProps) {
             onClick={() =>
               document.getElementById("import-file-input")?.click()
             }
+            onKeyDown={e => {
+              if (e.key === "Enter" || e.key === " ")
+                document.getElementById("import-file-input")?.click();
+            }}
           >
             <input
               id="import-file-input"
diff --git a/components/workflow/import/ImportDialog.tsx b/components/workflow/import/ImportDialog.tsx
index 2e6a155..ab1b704 100644
--- a/components/workflow/import/ImportDialog.tsx
+++ b/components/workflow/import/ImportDialog.tsx
@@ -28,7 +28,6 @@ import {
 } from "@/components/ui/collapsible";
 import {
   Upload,
-  Github,
   GitBranch,
   Link,
   Loader2,
@@ -38,6 +37,7 @@ import {
   ChevronUp,
   Terminal,
 } from "lucide-react";
+import { GithubIcon } from "@/components/ui/github-icon";
 import { toast } from "sonner";
 import {
   ImportAnalysis,
@@ -293,7 +293,7 @@ export function ImportDialog({
               File Upload
             </TabsTrigger>
             <TabsTrigger value="url" className="flex items-center gap-2">
-              <Github className="h-4 w-4" />
+              <GithubIcon className="h-4 w-4" />
               Git URL
             </TabsTrigger>
           </TabsList>
@@ -318,6 +318,8 @@ export function ImportDialog({
             <TabsContent value="file" className="mt-0 space-y-4">
               {/* Drag and drop zone */}
               <div
+                role="button"
+                tabIndex={0}
                 className={`
                   relative border-2 border-dashed rounded-lg p-8 text-center
                   transition-colors cursor-pointer
@@ -332,6 +334,10 @@ export function ImportDialog({
                 onDragOver={handleDrag}
                 onDrop={handleDrop}
                 onClick={() => document.getElementById("file-input")?.click()}
+                onKeyDown={e => {
+                  if (e.key === "Enter" || e.key === " ")
+                    document.getElementById("file-input")?.click();
+                }}
               >
                 <input
                   id="file-input"
@@ -426,7 +432,7 @@ export function ImportDialog({
                   </>
                 ) : (
                   <>
-                    <Github className="mr-2 h-4 w-4" />
+                    <GithubIcon className="mr-2 h-4 w-4" />
                     Analyze Repository
                   </>
                 )}
diff --git a/lib/utils/__tests__/errorReporter.test.ts b/lib/utils/__tests__/errorReporter.test.ts
index a775ff4..d500382 100644
--- a/lib/utils/__tests__/errorReporter.test.ts
+++ b/lib/utils/__tests__/errorReporter.test.ts
@@ -16,22 +16,14 @@ describe("errorReporter", () => {
       const error = new Error("test error");
       errorReporter.report(error);
 
-      expect(console.error).toHaveBeenCalledWith(
-        "[ErrorReporter]",
-        error,
-        ""
-      );
+      expect(console.error).toHaveBeenCalledWith("[ErrorReporter]", error, "");
     });
 
     it("should include source in log label", () => {
       const error = new Error("test error");
       errorReporter.report(error, { source: "TestComponent" });
 
-      expect(console.error).toHaveBeenCalledWith(
-        "[TestComponent]",
-        error,
-        ""
-      );
+      expect(console.error).toHaveBeenCalledWith("[TestComponent]", error, "");
     });
 
     it("should include metadata in log", () => {
@@ -97,10 +89,7 @@ describe("errorReporter", () => {
 
       errorReporter.initGlobalHandlers();
 
-      expect(addEventSpy).toHaveBeenCalledWith(
-        "error",
-        expect.any(Function)
-      );
+      expect(addEventSpy).toHaveBeenCalledWith("error", expect.any(Function));
       expect(addEventSpy).toHaveBeenCalledWith(
         "unhandledrejection",
         expect.any(Function)
diff --git a/lib/utils/errorReporter.ts b/lib/utils/errorReporter.ts
index 6058d49..b868be2 100644
--- a/lib/utils/errorReporter.ts
+++ b/lib/utils/errorReporter.ts
@@ -41,7 +41,7 @@ function reportMessage(message: string, context: ErrorContext = {}): void {
 function initGlobalHandlers(): void {
   if (typeof window === "undefined") return;
 
-  window.addEventListener("error", (event) => {
+  window.addEventListener("error", event => {
     report(event.error ?? event.message, {
       source: "window.onerror",
       metadata: {
@@ -52,7 +52,7 @@ function initGlobalHandlers(): void {
     });
   });
 
-  window.addEventListener("unhandledrejection", (event) => {
+  window.addEventListener("unhandledrejection", event => {
     report(event.reason, {
       source: "unhandledrejection",
       severity: "error",