From e96845cd75f9daaf0276e095424da6050b83378f Mon Sep 17 00:00:00 2001
From: allornothingai <allornothingai@icloud.com>
Date: Wed, 18 Mar 2026 10:35:06 -0400
Subject: [PATCH 1/3] fix: accessibility and css color bugs in toggle and
 imageviewer

---
 .../cortex/primitives/CortexToggle.tsx        |  2 ++
 src/components/ui/Toggle.tsx                  | 24 ++++++++++++-------
 src/components/viewers/ImageViewer.tsx        |  4 ++--
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/components/cortex/primitives/CortexToggle.tsx b/src/components/cortex/primitives/CortexToggle.tsx
index 9a35872e..b0ab16cb 100644
--- a/src/components/cortex/primitives/CortexToggle.tsx
+++ b/src/components/cortex/primitives/CortexToggle.tsx
@@ -12,6 +12,7 @@ import { Component, JSX, splitProps } from "solid-js";
 import { CortexIcon } from "./CortexIcon";
 
 export interface CortexToggleProps {
+  id?: string;
   checked?: boolean;
   onChange?: (checked: boolean) => void;
   disabled?: boolean;
@@ -117,6 +118,7 @@ export const CortexToggle: Component<CortexToggleProps> = (props) => {
 
   return (
     <button
+      id={local.id}
       type="button"
       class={local.class}
       style={trackStyle()}
diff --git a/src/components/ui/Toggle.tsx b/src/components/ui/Toggle.tsx
index a1c4571c..0bc86074 100644
--- a/src/components/ui/Toggle.tsx
+++ b/src/components/ui/Toggle.tsx
@@ -4,10 +4,11 @@
  * @deprecated Prefer importing CortexToggle from "@/components/cortex/primitives" for new code.
  * This wrapper delegates to CortexToggle while preserving the legacy API.
  */
-import { JSX, splitProps, Show } from "solid-js";
+import { JSX, splitProps, Show, createUniqueId } from "solid-js";
 import { CortexToggle } from "../cortex/primitives/CortexToggle";
 
 export interface ToggleProps {
+  id?: string;
   checked?: boolean;
   onChange?: (checked: boolean) => void;
   label?: string;
@@ -20,12 +21,15 @@ export interface ToggleProps {
 
 export function Toggle(props: ToggleProps) {
   const [local] = splitProps(props, [
-    "checked", "onChange", "label", "description", "disabled", "size", "style", "aria-label"
+    "id", "checked", "onChange", "label", "description", "disabled", "size", "style", "aria-label"
   ]);
 
+  const id = local.id || createUniqueId();
+
   return (
     <div style={{ display: "flex", "align-items": "center", gap: "10px", ...local.style }}>
       <CortexToggle
+        id={id}
         checked={local.checked}
         onChange={local.onChange}
         disabled={local.disabled}
@@ -34,13 +38,17 @@ export function Toggle(props: ToggleProps) {
       <Show when={local.label || local.description}>
         <div style={{ display: "flex", "flex-direction": "column", gap: "2px" }}>
           <Show when={local.label}>
-            <span style={{
-              "font-size": "13px",
-              color: "var(--cortex-text-primary)",
-              "font-family": "var(--cortex-font-sans)",
-            }}>
+            <label 
+              for={id}
+              style={{
+                "font-size": "13px",
+                color: "var(--cortex-text-primary)",
+                "font-family": "var(--cortex-font-sans)",
+                cursor: local.disabled ? "not-allowed" : "pointer",
+              }}
+            >
               {local.label}
-            </span>
+            </label>
           </Show>
           <Show when={local.description}>
             <span style={{
diff --git a/src/components/viewers/ImageViewer.tsx b/src/components/viewers/ImageViewer.tsx
index 70131341..1ca79804 100644
--- a/src/components/viewers/ImageViewer.tsx
+++ b/src/components/viewers/ImageViewer.tsx
@@ -370,7 +370,7 @@ export function ImageViewer(props: ImageViewerProps) {
         {/* Left: File info */}
         <div class="flex items-center gap-2">
           <Icon name="image" class="w-4 h-4" style={{ color: "var(--text-weak)" }} />
-          <span class="text-xs" style={{ color: "var(--text-base)" }}>
+          <span class="text-xs" style={{ color: "var(--cortex-text-primary)" }}>
             {props.name}
           </span>
           <Show when={primaryImageInfo()}>
@@ -393,7 +393,7 @@ export function ImageViewer(props: ImageViewerProps) {
 
           <span 
             class="w-14 text-center text-xs tabular-nums"
-            style={{ color: "var(--text-base)" }}
+            style={{ color: "var(--cortex-text-primary)" }}
           >
             {zoomPercent()}
           </span>

From 934509983cebd80f3b4d83dcdee71424525918b9 Mon Sep 17 00:00:00 2001
From: allornothingai <allornothingai@icloud.com>
Date: Wed, 18 Mar 2026 10:44:14 -0400
Subject: [PATCH 2/3] fix: batch accessibility improvements for model selector,
 copilot status, and message input

---
 src/components/ai/CopilotStatus.tsx | 1 +
 src/components/ai/MessageInput.tsx  | 1 +
 src/components/ai/ModelSelector.tsx | 1 +
 3 files changed, 3 insertions(+)

diff --git a/src/components/ai/CopilotStatus.tsx b/src/components/ai/CopilotStatus.tsx
index cf6c292e..d1415a3c 100644
--- a/src/components/ai/CopilotStatus.tsx
+++ b/src/components/ai/CopilotStatus.tsx
@@ -298,6 +298,7 @@ export function CopilotSignInModal(props: CopilotSignInModalProps) {
                 {/* Device Code Display */}
                 <button
                   onClick={copyCode}
+                  aria-label="Copy device code"
                   class="w-full px-4 py-3 rounded-lg font-mono text-2xl tracking-widest flex items-center justify-center gap-3 transition-colors"
                   style={{
                     background: "var(--surface-hover)",
diff --git a/src/components/ai/MessageInput.tsx b/src/components/ai/MessageInput.tsx
index ff2e29f2..7bdf02cc 100644
--- a/src/components/ai/MessageInput.tsx
+++ b/src/components/ai/MessageInput.tsx
@@ -989,6 +989,7 @@ export function MessageInput(props: MessageInputProps) {
                       textareaRef?.focus();
                     }}
                     title={mention.description}
+                    aria-label={mention.description}
                   >
                     <Icon name={mention.icon} class="w-3 h-3" />
                     <span class="hidden sm:inline">{mention.label}</span>
diff --git a/src/components/ai/ModelSelector.tsx b/src/components/ai/ModelSelector.tsx
index 75bd1ded..10e07f58 100644
--- a/src/components/ai/ModelSelector.tsx
+++ b/src/components/ai/ModelSelector.tsx
@@ -536,6 +536,7 @@ export function ModelSelectorCompact(
         disabled={props.disabled}
         aria-haspopup="listbox"
         aria-expanded={open()}
+        aria-label="Select AI Model"
       >
         <Show when={selectedModel()} fallback={<span class="text-foreground-muted">Model</span>}>
           {(model) => (

From c4667f37b61b368498e62568a36c8d4b5b77c881 Mon Sep 17 00:00:00 2001
From: allornothingai <allornothingai@icloud.com>
Date: Wed, 18 Mar 2026 10:44:56 -0400
Subject: [PATCH 3/3] fix: add aria-live and role to message input drag overlay

---
 src/components/ai/MessageInput.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/ai/MessageInput.tsx b/src/components/ai/MessageInput.tsx
index 7bdf02cc..97b58ff9 100644
--- a/src/components/ai/MessageInput.tsx
+++ b/src/components/ai/MessageInput.tsx
@@ -873,6 +873,8 @@ export function MessageInput(props: MessageInputProps) {
       <Show when={isDragging()}>
         <div
           class="absolute inset-0 z-40 rounded-lg flex items-center justify-center"
+          role="status"
+          aria-live="polite"
           style={{
             background: `color-mix(in srgb, ${tokens.colors.semantic.primary} 15%, transparent)`,
             border: `2px dashed ${tokens.colors.semantic.primary}`,