Refactor code structure for improved readability and maintainability

Author: emmanuelknafo

images/lab-04/lab-04-a11y-findings.png

@@ -0,0 +1,25 @@
+flowchart LR
+    subgraph POUR["WCAG 2.2 Level AA — POUR Principles"]
+        direction TB
+        subgraph P["🔵 Perceivable"]
+            P1["1.1.1 Non-text Content · Level A\n🔴 Missing alt text on images\nproducts/page.tsx · products/[id]/page.tsx"]
+            P2["1.3.1 Info and Relationships · Level A\n🔴 Missing form labels\npage.tsx · Header.tsx heading-order"]
+            P3["1.4.3 Contrast Minimum · Level AA\n🟠 Low color contrast #999 / #aaa\npage.tsx lines 12, 42"]
+        end
+        subgraph O["🟢 Operable"]
+            O1["2.4.1 Bypass Blocks · Level A\n🟠 No skip-navigation link\nlayout.tsx"]
+            O2["2.5.8 Target Size · Level AA\n🟠 Touch targets below 24×24 px\npage.tsx nav links"]
+        end
+        subgraph U["🟡 Understandable"]
+            U1["3.1.1 Language of Page · Level A\n🔴 Missing lang attribute on html\nlayout.tsx ✅ FIXED"]
+        end
+        subgraph R["🟣 Robust"]
+            R1["4.1.2 Name Role Value · Level A\n🟠 nav elements lack aria-label\nHeader.tsx · page.tsx"]
+        end
+    end
+
+    style P fill:#dbeafe,stroke:#2563eb
+    style O fill:#dcfce7,stroke:#16a34a
+    style U fill:#fef9c3,stroke:#ca8a04
+    style R fill:#f3e8ff,stroke:#9333ea
+    style POUR fill:#f8fafc,stroke:#64748b

images/lab-04/lab-04-prompt-file.png

@@ -0,0 +1,58 @@
+---
+title: "Coverage After Test Generation (Exercise 5.4)"
+---
+block-beta
+  columns 4
+
+  block:header:4
+    columns 4
+    h1["59 Tests Passed"] h2["2 Suites"] h3["67.97% Lines"] h4["95.06% Branch"]
+  end
+
+  block:utils:4
+    columns 1
+    u1["utils.ts — 100% Stmts | 100% Branch | 100% Funcs | 100% Lines ✅"]
+  end
+
+  block:auth:2
+    columns 1
+    a1["auth.ts — 0% Stmts | 0% Branch | 0% Funcs | 0% Lines ❌"]
+  end
+
+  block:db:2
+    columns 1
+    d1["db.ts — 0% Stmts | 0% Branch | 0% Funcs | 0% Lines ❌"]
+  end
+
+  block:pages:2
+    columns 1
+    p1["layout.tsx — 0%"]
+    p2["page.tsx — 0%"]
+    p3["products/page.tsx — 0%"]
+    p4["products/[id]/page.tsx — 0%"]
+  end
+
+  block:comps:2
+    columns 1
+    c1["Header.tsx — 0%"]
+    c2["ProductCard.tsx — 0%"]
+  end
+
+  block:before:2
+    columns 1
+    b1["BEFORE: 1.30% Lines | 0% Branch | 4.34% Funcs"]
+  end
+
+  block:after:2
+    columns 1
+    af1["AFTER: 67.97% Lines | 95.06% Branch | 30.43% Funcs"]
+  end
+
+  style utils fill:#dcfce7,stroke:#16a34a
+  style auth fill:#fef2f2,stroke:#dc2626
+  style db fill:#fef2f2,stroke:#dc2626
+  style pages fill:#fef9c3,stroke:#ca8a04
+  style comps fill:#fef9c3,stroke:#ca8a04
+  style before fill:#fee2e2,stroke:#ef4444
+  style after fill:#dbeafe,stroke:#2563eb
+  style header fill:#f1f5f9,stroke:#64748b