Merge pull request #214 from SaplingLearn/a11y/wave2-phase2

Wave 2 Phase 2 — accessibility: contrast (#107) + focus/labels (#108)

Author: Jose-Gael-Cruz-Lopez

frontend/src/app/(shell)/notetaker/page.tsx

@@ -768,7 +768,6 @@ function NotesList({
               border: "1px solid var(--border)",
               borderRadius: "var(--r-sm)",
               color: "var(--text)",
-              outline: "none",
             }}
           />
         </div>
@@ -987,7 +986,6 @@ function NoteEditor({
             color: "var(--text)",
             background: "transparent",
             border: "none",
-            outline: "none",
             padding: 0,
             transition: "font-size var(--dur-slow) var(--ease)",
           }}
@@ -1021,7 +1019,6 @@ function NoteEditor({
             width: "100%",
             minHeight: fullscreen ? "calc(100vh - 280px)" : 320,
             border: "none",
-            outline: "none",
             resize: "none",
             background: "transparent",
             fontSize: fullscreen ? 14 : 15,
@@ -1248,7 +1245,6 @@ function NoteDetail({
               style={{
                 background: "var(--bg-input)",
                 border: "1px dashed var(--border-strong)",
-                outline: "none",
                 color: "var(--text)",
                 width: 80,
               }}
@@ -1640,7 +1636,6 @@ function ConceptPickerModal({
               border: "1px solid var(--border)",
               borderRadius: "var(--r-sm)",
               color: "var(--text)",
-              outline: "none",
             }}
           />
         </div>
@@ -1895,7 +1890,6 @@ function AIChatPanel({ noteId, userId }: { noteId: string; userId: string }) {
             border: "1px solid var(--border)",
             borderRadius: "var(--r-sm)",
             color: "var(--text)",
-            outline: "none",
           }}
         />
         <button

frontend/src/app/globals.css

@@ -61,7 +61,7 @@
   --border-strong: rgba(42, 39, 31, 0.18);
   --text:      var(--ink-800);
   --text-dim:  var(--ink-600);
-  --text-muted:var(--ink-400);
+  --text-muted:#6f6857;  /* WCAG AA: darkened from --ink-400 (#8a8372, 3.4:1) to ≥4.5:1 on paper/inset */
   --accent:    #8a9a5b;
   --accent-fg: #ffffff;
   --accent-soft: var(--sap-50);
@@ -189,7 +189,7 @@ body { font-size: 14px; line-height: 1.5; }
   border: 1px solid var(--border);
   text-transform: uppercase;
 }
-.chip--accent { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }
+.chip--accent { background: var(--accent-soft); color: var(--sap-600); border-color: var(--accent-border); }
 .chip--warn   { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
 .chip--err    { background: var(--err-soft); color: var(--err); border-color: transparent; }
 .chip--info   { background: var(--info-soft); color: var(--info); border-color: transparent; }
@@ -201,8 +201,8 @@ body { font-size: 14px; line-height: 1.5; }
   transition: all var(--dur-fast) var(--ease);
 }
 .btn:hover { border-color: var(--border-strong); background: var(--bg-subtle); }
-.btn--primary { background: var(--accent); color: var(--accent-fg); border-color: transparent; }
-.btn--primary:hover { filter: brightness(1.05); background: var(--accent); }
+.btn--primary { background: var(--brand-forest); color: var(--accent-fg); border-color: transparent; }
+.btn--primary:hover { filter: brightness(1.05); background: var(--brand-forest); }
 .btn--ghost { background: transparent; border-color: transparent; }
 .btn--ghost:hover { background: var(--bg-soft); }
 .btn--danger { color: var(--err); border-color: rgba(168,58,58,0.3); }

frontend/src/app/page.tsx

@@ -694,10 +694,10 @@ export default function LandingPage() {
         }}
       >
         <div className="max-w-[88%] mx-auto flex items-center justify-between w-full">
-          <div className="flex items-center cursor-pointer group" style={{ gap: '4px' }} onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
-            <img src="/sapling-icon.svg" alt="Sapling" style={{ width: '26px', height: '26px', flexShrink: 0, position: 'relative', top: '-2px' }} />
+          <button type="button" aria-label="Sapling — scroll to top" className="flex items-center cursor-pointer group" style={{ gap: '4px' }} onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
+            <img src="/sapling-icon.svg" alt="" style={{ width: '26px', height: '26px', flexShrink: 0, position: 'relative', top: '-2px' }} />
             <span style={{ fontFamily: "var(--font-spectral), 'Spectral', Georgia, serif", fontWeight: 700, fontSize: '20px', color: '#1a5c2a', letterSpacing: '-0.02em', lineHeight: 1.1 }}>Sapling</span>
-          </div>
+          </button>
           <div className="flex items-center">
             <button onClick={() => { setSignInError(null); setSignInOpen(true); }} className="text-[var(--brand-text2)] hover:text-[var(--brand-text1)] font-medium text-sm tracking-wide transition-all duration-300 mr-6 hidden sm:block">Sign In</button>
             <button onClick={startOnboarding} className="relative overflow-hidden group bg-[var(--brand-forest)] text-white px-7 py-2.5 rounded-full font-medium text-sm tracking-wide shadow-sm hover:shadow-md transition-all duration-400 hover:scale-[1.04] active:scale-[0.97] landing-btn-shimmer">
@@ -1124,7 +1124,7 @@ export default function LandingPage() {
                       width: '100%', padding: '14px 16px', fontSize: 14,
                       background: 'rgba(255,255,255,0.6)',
                       border: '1.5px solid rgba(107,114,128,0.25)',
-                      borderRadius: 10, outline: 'none',
+                      borderRadius: 10,
                       transition: 'border-color 0.15s, box-shadow 0.15s',
                       fontFamily: "var(--font-dm-sans), 'DM Sans', sans-serif",
                       color: '#1a1a1a', boxSizing: 'border-box',

frontend/src/components/AchievementUnlockToast.tsx

@@ -87,7 +87,7 @@ export function AchievementUnlockToast({ achievement }: Props) {
           fontWeight: 600,
           textTransform: "uppercase",
           letterSpacing: "0.04em",
-          color: borderColor,
+          color: "var(--text)",
           flexShrink: 0,
         }}
       >

frontend/src/components/ChatPanel.tsx

@@ -155,6 +155,7 @@ const ChatInputBar = React.memo(function ChatInputBar({
         }}
       >
         <textarea
+          aria-label="Message"
           value={text}
           onChange={e => setText(e.target.value)}
           onKeyDown={e => {
@@ -172,7 +173,6 @@ const ChatInputBar = React.memo(function ChatInputBar({
             background: "transparent",
             fontSize: 14,
             lineHeight: 1.5,
-            outline: "none",
             padding: "6px 0",
             fontFamily: "var(--font-sans)",
             maxHeight: 160,

frontend/src/components/FunctionPlot.tsx

@@ -123,6 +123,8 @@ export function FunctionPlot({ spec }: { spec: string }) {
   return (
     <div
       ref={containerRef}
+      role="img"
+      aria-label={`Function plot: ${spec.replace(/\s+/g, " ").trim()}`}
       style={{
         margin: "10px 0 14px",
         padding: "8px",

frontend/src/components/KnowledgeGraph2D.tsx

@@ -99,6 +99,20 @@ type DragState =
 const MIN_ZOOM = 0.4;
 const MAX_ZOOM = 3;
 
+// Visually-hidden but screen-reader-available. Mirrors KnowledgeGraph3D so the
+// pointer-only SVG graph still exposes its nodes as a navigable text list.
+const SR_ONLY: React.CSSProperties = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0,0,0,0)",
+  whiteSpace: "nowrap",
+  border: 0,
+};
+
 function KnowledgeGraph2DImpl({
   nodes,
   edges,
@@ -372,6 +386,8 @@ function KnowledgeGraph2DImpl({
         ref={svgRef}
         width={width}
         height={height}
+        role="img"
+        aria-label="Knowledge graph"
         style={{
           display: "block",
           cursor: dragRef.current?.kind === "pan" ? "grabbing" : "grab",
@@ -629,6 +645,19 @@ function KnowledgeGraph2DImpl({
           )}
         </div>
       )}
+      <ul style={SR_ONLY} aria-label="Knowledge graph nodes">
+        {nodes.map((n) =>
+          onNodeClick ? (
+            <li key={n.id}>
+              <button type="button" onClick={() => onNodeClick(n)}>
+                {n.name}
+              </button>
+            </li>
+          ) : (
+            <li key={n.id}>{n.name}</li>
+          ),
+        )}
+      </ul>
     </div>
   );
 }

frontend/src/components/ManageCoursesModal.tsx

@@ -114,6 +114,7 @@ export function ManageCoursesModal({ open, userId, courses, onClose, onChanged }
           <div style={{ position: "relative", marginBottom: 10 }}>
             <input
               autoFocus
+              aria-label="Search courses"
               value={query}
               onChange={e => setQuery(e.target.value)}
               placeholder="Search by code or name (e.g. MATH 242)"

frontend/src/components/MermaidBlock.tsx

@@ -94,6 +94,8 @@ export function MermaidBlock({ code }: { code: string }) {
 
   return (
     <div
+      role="img"
+      aria-label={`Diagram: ${code.replace(/\s+/g, " ").trim()}`}
       style={{ margin: "10px 0 14px", overflowX: "auto", textAlign: "center" }}
       dangerouslySetInnerHTML={{ __html: svg }}
     />

frontend/src/components/ModelToggle.tsx

@@ -37,14 +37,14 @@ export function ModelToggle({
     {
       value: "fast",
       label: "Fast",
-      color: "#3B82F6",
+      color: "#1D4ED8",
       soft: "rgba(59, 130, 246, 0.12)",
       border: "rgba(59, 130, 246, 0.35)",
     },
     {
       value: "smart",
       label: "Smart",
-      color: "#8A63D2",
+      color: "#6D28D9",
       soft: "rgba(138, 99, 210, 0.14)",
       border: "rgba(138, 99, 210, 0.4)",
     },