From ac0c6b983abca5e242b42f4b93d802bf4e93c58a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 22 Mar 2026 18:54:58 +0000
Subject: [PATCH 1/7] Initial plan


From 5d4756657cb59eaf8659b508ce09973f396ea545 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 22 Mar 2026 18:57:50 +0000
Subject: [PATCH 2/7] feat: add dialog accessibility semantics and focus
 management to project modals

Co-authored-by: itziarZG <70289074+itziarZG@users.noreply.github.com>
Agent-Logs-Url: https://github.com/itziarZG/me/sessions/acdd7d81-9ce8-4ee1-be85-625decdc9be6
---
 index.html | 15 +++++++++++++++
 js/main.js | 27 +++++++++++++++++++++++++--
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index aaaf93a..0ddd89d 100644
--- a/index.html
+++ b/index.html
@@ -612,6 +612,9 @@
     <div
       id="project-1-modal"
       class="hidden fixed inset-0 bg-black/50 dark:bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="project-1-modal-title"
       onclick="closeModal('project-1')"
     >
       <div
@@ -621,6 +624,7 @@
         <div class="p-8 md:p-12">
           <div class="flex justify-between items-start mb-6">
             <h2
+              id="project-1-modal-title"
               class="text-3xl font-serif italic text-slate-900 dark:text-white"
             >
               AI Knowledge Pipeline
@@ -628,6 +632,7 @@
             <button
               class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
               onclick="closeModal('project-1')"
+              aria-label="Close dialog"
             >
               ✕
             </button>
@@ -718,6 +723,9 @@
     <div
       id="project-2-modal"
       class="hidden fixed inset-0 bg-black/50 dark:bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="project-2-modal-title"
       onclick="closeModal('project-2')"
     >
       <div
@@ -727,6 +735,7 @@
         <div class="p-8 md:p-12">
           <div class="flex justify-between items-start mb-6">
             <h2
+              id="project-2-modal-title"
               class="text-3xl font-serif italic text-slate-900 dark:text-white"
             >
               ChefGPT
@@ -734,6 +743,7 @@
             <button
               class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
               onclick="closeModal('project-2')"
+              aria-label="Close dialog"
             >
               ✕
             </button>
@@ -832,6 +842,9 @@
     <div
       id="project-3-modal"
       class="hidden fixed inset-0 bg-black/50 dark:bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="project-3-modal-title"
       onclick="closeModal('project-3')"
     >
       <div
@@ -841,6 +854,7 @@
         <div class="p-8 md:p-12">
           <div class="flex justify-between items-start mb-6">
             <h2
+              id="project-3-modal-title"
               class="text-3xl font-serif italic text-slate-900 dark:text-white"
             >
               Content Processing Automation
@@ -848,6 +862,7 @@
             <button
               class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
               onclick="closeModal('project-3')"
+              aria-label="Close dialog"
             >
               ✕
             </button>
diff --git a/js/main.js b/js/main.js
index 000feb5..5c3316b 100644
--- a/js/main.js
+++ b/js/main.js
@@ -58,20 +58,37 @@ function scrollToContact() {
 // Modal Management
 // ============================================
 
+/** Element that had focus before a modal was opened */
+let _modalPreviousFocus = null;
+
 /**
- * Open modal by project ID
+ * Open modal by project ID.
+ * Saves the currently focused element and moves focus into the modal.
  * @param {string} projectId - The project identifier
  */
 function openModal(projectId) {
   const modal = document.getElementById(projectId + "-modal");
   if (modal) {
+    _modalPreviousFocus = document.activeElement;
     modal.classList.remove("hidden");
     document.body.style.overflow = "hidden";
+
+    // Move focus to the first focusable element inside the modal
+    const focusable = modal.querySelectorAll(
+      'button, [href], input, select, textarea, [contenteditable="true"], [tabindex]:not([tabindex="-1"])'
+    );
+    if (focusable.length > 0) {
+      focusable[0].focus();
+    } else {
+      modal.setAttribute("tabindex", "-1");
+      modal.focus();
+    }
   }
 }
 
 /**
- * Close modal by project ID
+ * Close modal by project ID.
+ * Restores focus to the element that was focused before the modal opened.
  * @param {string} projectId - The project identifier
  */
 function closeModal(projectId) {
@@ -79,6 +96,12 @@ function closeModal(projectId) {
   if (modal) {
     modal.classList.add("hidden");
     document.body.style.overflow = "auto";
+
+    // Return focus to the element that triggered the modal
+    if (_modalPreviousFocus) {
+      _modalPreviousFocus.focus();
+      _modalPreviousFocus = null;
+    }
   }
 }
 

From d5d6c904f524d85cc570b8e7300b261d137fd419 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 22 Mar 2026 18:58:42 +0000
Subject: [PATCH 3/7] Initial plan


From d219e66637dce76a6c0e5e350b4a849a25c34dfa Mon Sep 17 00:00:00 2001
From: Itziar ZG <70289074+itziarZG@users.noreply.github.com>
Date: Sun, 22 Mar 2026 19:58:45 +0100
Subject: [PATCH 4/7] Update index.html

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index aaaf93a..f6a2929 100644
--- a/index.html
+++ b/index.html
@@ -281,7 +281,7 @@
                 <div class="aspect-video relative overflow-hidden">
                   <img
                     class="object-cover w-full h-full group-hover:scale-110 transition-transform duration-700"
-                    data-alt="Visualization of an AI neural network and data pipeline"
+                    alt="Visualization of an AI neural network and data pipeline"
                     src="https://lh3.googleusercontent.com/aida-public/AB6AXuA8RWItHd5HSWHY1TZGhviEiYL0nH49aw4shoKawpqU6-sXM8PS5yl17suDdKzrYINIOcJ6UMBjTl-c66Ul8JUBHK9PNN0cXxr_1selPrAOi0plM8CipkLw1D-0QUKa05GZg7AzHFCCYWLdicp0_M6TMYPWiEu7cdxASk_G9GTfhUXkNQKjFA0qrxqtqdDAzG-gpLV-XOs7L3hELHIUam_iE_0w4i5DNlONlsACvbS5kTTDB7FOFb7SAMKe0VH_9c5J3F0eQyyjokw"
                   />
                   <div

From 1f49d33fbf872860a5bd49bdfe9e0061c20f3f62 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 22 Mar 2026 19:00:01 +0000
Subject: [PATCH 5/7] fix: move tailwind.config script before Tailwind CDN
 include

Co-authored-by: itziarZG <70289074+itziarZG@users.noreply.github.com>
Agent-Logs-Url: https://github.com/itziarZG/me/sessions/07421ef8-e38c-44b4-ac0b-1c6b7a8f1ec2
---
 index.html | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index aaaf93a..ab62524 100644
--- a/index.html
+++ b/index.html
@@ -4,15 +4,6 @@
     <meta charset="utf-8" />
     <meta content="width=device-width, initial-scale=1.0" name="viewport" />
     <title>Itziar ZG | AI &amp; Automation Developer</title>
-    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
-    <link
-      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;family=Instrument+Serif:ital@0;1&amp;display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
-      rel="stylesheet"
-    />
     <script id="tailwind-config">
       tailwind.config = {
         darkMode: "class",
@@ -37,6 +28,15 @@
         },
       };
     </script>
+    <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;family=Instrument+Serif:ital@0;1&amp;display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
+      rel="stylesheet"
+    />
     <link rel="stylesheet" href="css/styles.css" />
   </head>
   <body

From f548d8d32469113741cb2536461aaffdf3201e6e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 22 Mar 2026 19:00:07 +0000
Subject: [PATCH 6/7] Initial plan


From 41f0549be75aab6a1dd2bd35108e24174b0a2c40 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 22 Mar 2026 19:01:41 +0000
Subject: [PATCH 7/7] fix: swap :root and html.dark CSS variable values to
 match theme semantics

Co-authored-by: itziarZG <70289074+itziarZG@users.noreply.github.com>
Agent-Logs-Url: https://github.com/itziarZG/me/sessions/ee66b887-a211-40ee-b381-8096d4e0efe8
---
 styles/main.css | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/styles/main.css b/styles/main.css
index 787a295..7a39466 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -9,27 +9,27 @@
 :root {
   --primary: #3b82f6;
   --primary-light: #60a5fa;
-  --background: #0a0a0a;
-  --surface: #171717;
-  --text-primary: #ffffff;
-  --text-secondary: #94a3b8;
-  --border: rgba(255, 255, 255, 0.1);
-  --accent: #8b5cf6;
-  --glass-bg: rgba(255, 255, 255, 0.03);
-  --glass-border: rgba(255, 255, 255, 0.1);
-}
-
-/* Dark mode - when html has class="dark" */
-html.dark {
   --background: #ffffff;
   --surface: #f8fafc;
   --text-primary: #0a0a0a;
   --text-secondary: #64748b;
   --border: rgba(0, 0, 0, 0.1);
+  --accent: #8b5cf6;
   --glass-bg: rgba(0, 0, 0, 0.03);
   --glass-border: rgba(0, 0, 0, 0.1);
 }
 
+/* Dark mode - when html has class="dark" */
+html.dark {
+  --background: #0a0a0a;
+  --surface: #171717;
+  --text-primary: #ffffff;
+  --text-secondary: #94a3b8;
+  --border: rgba(255, 255, 255, 0.1);
+  --glass-bg: rgba(255, 255, 255, 0.03);
+  --glass-border: rgba(255, 255, 255, 0.1);
+}
+
 /* Typography */
 body {
   font-family: