From bbd9a7ebdc988def0b0f7474adc0a448e0b2b75d Mon Sep 17 00:00:00 2001
From: Francis Storr <francis.storr@intel.com>
Date: Mon, 24 Mar 2025 12:26:36 -0700
Subject: [PATCH 1/7] update package lock

---
 package-lock.json | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 package-lock.json

diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..9addd883
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "fixable",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

From 5d3e446bd39febe981bbb63ee2f644964f3357d9 Mon Sep 17 00:00:00 2001
From: Francis Storr <francis.storr@intel.com>
Date: Mon, 24 Mar 2025 12:27:39 -0700
Subject: [PATCH 2/7] =?UTF-8?q?=E2=80=9Cdid=20you=20mean=E2=80=9D=20email?=
 =?UTF-8?q?=20address=20in=20volunteer=20form?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/pages/museum/volunteer/index.astro | 30 ++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/site/src/pages/museum/volunteer/index.astro b/site/src/pages/museum/volunteer/index.astro
index 06f4b528..dd72f1f0 100644
--- a/site/src/pages/museum/volunteer/index.astro
+++ b/site/src/pages/museum/volunteer/index.astro
@@ -20,8 +20,10 @@ import Layout from "@/layouts/Layout.astro";
     </label>
     <label
       >Email address
-      <Fixable as="input" fixed={{ type: "email" }} name="email" />
+      <Fixable as="input" broken={{ type: "text" }} fixed={{ type: "email", "aria-describedby":"email-suggestion" }}  name="email" id="email" />
     </label>
+    <Fixable as="div" broken={{"class":"email-did-you-mean__broken"}} fixed={{"class":"email-did-you-mean__fixed", "role":"alert"}} id="email-suggestion">
+    </Fixable>
     <label
       >Phone number
       <Fixable as="input" fixed={{ type: "tel" }} name="phone" />
@@ -29,6 +31,20 @@ import Layout from "@/layouts/Layout.astro";
     <button type="submit">Submit</button>
   </FormLayout>
 </Layout>
+<style>
+  #email-suggestion{
+    display:none;
+    margin-block-start: -1rem;
+  }
+
+  .email-did-you-mean__broken{
+    color:var(--red-warm-400);
+  }
+
+  .email-did-you-mean__fixed{
+    color:var(--red-warm-500);
+  }
+</style>
 
 <script>
   import { disableInputs } from "@/lib/client/form";
@@ -42,4 +58,16 @@ import Layout from "@/layouts/Layout.astro";
     });
     disableInputs(document.querySelector("main form") as HTMLFormElement);
   }, 60000);
+
+  document.getElementById('email')!.addEventListener('input', function() {
+    const email = this.value;
+    const suggestion = document.getElementById('email-suggestion')!;
+    if (email && !email.endsWith('@gmail.com') && !email.endsWith('@hotmail.com')) {
+      suggestion.style.display = 'block';
+      suggestion.textContent = 'did you mean gmail or hotmail?';
+    } else {
+      suggestion.textContent = '';
+      suggestion.style.display = 'none';
+    }
+  });
 </script>

From 622617b62d030c0a043bb804e59b4a5d69fb4f4d Mon Sep 17 00:00:00 2001
From: Francis Storr <francis.storr@intel.com>
Date: Mon, 24 Mar 2025 12:32:01 -0700
Subject: [PATCH 3/7] =?UTF-8?q?update=20issues=20for=20=E2=80=9Cdid=20you?=
 =?UTF-8?q?=20mean=E2=80=9D=20email=20prompt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/src/pages/index.astro | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
index ba424524..aeaee148 100644
--- a/site/src/pages/index.astro
+++ b/site/src/pages/index.astro
@@ -673,6 +673,9 @@ import MetaLayout from "@/layouts/MetaLayout.astro";
           The navigation bar content overflows its background on mobile viewports,
           making the cart link nearly invisible.
         </dd>
+        <dd>
+          The "did you mean" email prompt in the volunteer sign-up form has insufficient contrast.
+        </dd>
         <dt>1.4.13: Content on Hover or Focus</dt>
         <dd>
           In the top navigation bar, nested items open on hover and can only be dismissed by moving the pointer.
@@ -735,6 +738,9 @@ import MetaLayout from "@/layouts/MetaLayout.astro";
           When the payment form becomes disabled, the toast that appears
           does not grab focus and is not announced.
         </dd>
+        <dd>
+          The "did you mean" email prompt in the volunteer sign-up doesn't grab focus and isn't announced.
+        </dd>
       </dl>
 
       <dl slot="wcag3">

From edadcb7c592588d6f11c521a487b0b7cf1a26f46 Mon Sep 17 00:00:00 2001
From: Francis Storr <francis.storr@intel.com>
Date: Mon, 24 Mar 2025 13:30:14 -0700
Subject: [PATCH 4/7] fix value issue

---
 site/src/pages/museum/volunteer/index.astro | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/pages/museum/volunteer/index.astro b/site/src/pages/museum/volunteer/index.astro
index dd72f1f0..2ab6c9c5 100644
--- a/site/src/pages/museum/volunteer/index.astro
+++ b/site/src/pages/museum/volunteer/index.astro
@@ -60,7 +60,7 @@ import Layout from "@/layouts/Layout.astro";
   }, 60000);
 
   document.getElementById('email')!.addEventListener('input', function() {
-    const email = this.value;
+    const email = (this as HTMLInputElement).value || '';
     const suggestion = document.getElementById('email-suggestion')!;
     if (email && !email.endsWith('@gmail.com') && !email.endsWith('@hotmail.com')) {
       suggestion.style.display = 'block';

From f7e216591b808d6efb4d942660e112e553279a19 Mon Sep 17 00:00:00 2001
From: "Kenneth G. Franqueiro" <kfranqueiro@users.noreply.github.com>
Date: Wed, 26 Mar 2025 10:50:58 -0400
Subject: [PATCH 5/7] Remove spurious top-level package-lock (we have one under
 site/)

---
 package-lock.json | 6 ------
 1 file changed, 6 deletions(-)
 delete mode 100644 package-lock.json

diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index 9addd883..00000000
--- a/package-lock.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "name": "fixable",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {}
-}

From df0cdf06e1d961f95a4dd51a5a517432cfd638ea Mon Sep 17 00:00:00 2001
From: "Kenneth G. Franqueiro" <kfranqueiro@users.noreply.github.com>
Date: Thu, 27 Mar 2025 15:07:05 -0400
Subject: [PATCH 6/7] Move break documentation to correct section and populate
 for WCAG 3

---
 site/src/pages/index.astro | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
index aeaee148..fe91008e 100644
--- a/site/src/pages/index.astro
+++ b/site/src/pages/index.astro
@@ -673,9 +673,6 @@ import MetaLayout from "@/layouts/MetaLayout.astro";
           The navigation bar content overflows its background on mobile viewports,
           making the cart link nearly invisible.
         </dd>
-        <dd>
-          The "did you mean" email prompt in the volunteer sign-up form has insufficient contrast.
-        </dd>
         <dt>1.4.13: Content on Hover or Focus</dt>
         <dd>
           In the top navigation bar, nested items open on hover and can only be dismissed by moving the pointer.
@@ -738,9 +735,6 @@ import MetaLayout from "@/layouts/MetaLayout.astro";
           When the payment form becomes disabled, the toast that appears
           does not grab focus and is not announced.
         </dd>
-        <dd>
-          The "did you mean" email prompt in the volunteer sign-up doesn't grab focus and isn't announced.
-        </dd>
       </dl>
 
       <dl slot="wcag3">
@@ -1010,6 +1004,10 @@ import MetaLayout from "@/layouts/MetaLayout.astro";
       <p>This section includes task completion and form based failures. This includes a small number of errors.</p>
 
       <dl slot="wcag2">
+        <dt>1.4.3 and 1.4.6: Contrast</dt>
+        <dd>
+          The "did you mean" email prompt has insufficient contrast.
+        </dd>
         <dt>2.2.3: No Timing</dt>
         <dd>
           The volunteer form becomes unsubmittable after a short time,
@@ -1024,9 +1022,20 @@ import MetaLayout from "@/layouts/MetaLayout.astro";
           When the form becomes disabled, the toast that appears
           does not grab focus and is not announced.
         </dd>
+        <dd>
+          The "did you mean" email prompt doesn't grab focus and isn't announced.
+        </dd>
       </dl>
 
       <dl slot="wcag3">
+        <dt>Minimum text contrast</dt>
+        <dd>
+          The "did you mean" email prompt has insufficient contrast.
+        </dd>
+        <dt>Error identification</dt>
+        <dd>
+          The "did you mean" email prompt isn't programmatically associated with the error source.
+        </dd>
         <dt>Persistent error notification</dt>
         <dd>
           The timeout notification toast dismisses itself automatically

From 65ec28940f1a953732d288c894664df5fc13424e Mon Sep 17 00:00:00 2001
From: "Kenneth G. Franqueiro" <kfranqueiro@users.noreply.github.com>
Date: Fri, 4 Apr 2025 10:07:43 -0400
Subject: [PATCH 7/7] Switch event handler to onblur; formatting pass

---
 site/src/pages/museum/volunteer/index.astro | 49 ++++++++++++++-------
 1 file changed, 32 insertions(+), 17 deletions(-)

diff --git a/site/src/pages/museum/volunteer/index.astro b/site/src/pages/museum/volunteer/index.astro
index 2ab6c9c5..f4ebaaa4 100644
--- a/site/src/pages/museum/volunteer/index.astro
+++ b/site/src/pages/museum/volunteer/index.astro
@@ -20,10 +20,20 @@ import Layout from "@/layouts/Layout.astro";
     </label>
     <label
       >Email address
-      <Fixable as="input" broken={{ type: "text" }} fixed={{ type: "email", "aria-describedby":"email-suggestion" }}  name="email" id="email" />
+      <Fixable
+        as="input"
+        broken={{ type: "text" }}
+        fixed={{ type: "email", "aria-describedby": "email-suggestion" }}
+        name="email"
+        id="email"
+      />
     </label>
-    <Fixable as="div" broken={{"class":"email-did-you-mean__broken"}} fixed={{"class":"email-did-you-mean__fixed", "role":"alert"}} id="email-suggestion">
-    </Fixable>
+    <Fixable
+      as="div"
+      broken={{ class: "email-did-you-mean__broken" }}
+      fixed={{ class: "email-did-you-mean__fixed", role: "alert" }}
+      id="email-suggestion"
+    />
     <label
       >Phone number
       <Fixable as="input" fixed={{ type: "tel" }} name="phone" />
@@ -32,17 +42,17 @@ import Layout from "@/layouts/Layout.astro";
   </FormLayout>
 </Layout>
 <style>
-  #email-suggestion{
-    display:none;
+  #email-suggestion {
+    display: none;
     margin-block-start: -1rem;
   }
 
-  .email-did-you-mean__broken{
-    color:var(--red-warm-400);
+  .email-did-you-mean__broken {
+    color: var(--red-warm-400);
   }
 
-  .email-did-you-mean__fixed{
-    color:var(--red-warm-500);
+  .email-did-you-mean__fixed {
+    color: var(--red-warm-500);
   }
 </style>
 
@@ -59,15 +69,20 @@ import Layout from "@/layouts/Layout.astro";
     disableInputs(document.querySelector("main form") as HTMLFormElement);
   }, 60000);
 
-  document.getElementById('email')!.addEventListener('input', function() {
-    const email = (this as HTMLInputElement).value || '';
-    const suggestion = document.getElementById('email-suggestion')!;
-    if (email && !email.endsWith('@gmail.com') && !email.endsWith('@hotmail.com')) {
-      suggestion.style.display = 'block';
-      suggestion.textContent = 'did you mean gmail or hotmail?';
+  document.getElementById("email")!.addEventListener("blur", function () {
+    const email = (this as HTMLInputElement).value || "";
+    const suggestion = document.getElementById("email-suggestion")!;
+    if (
+      email &&
+      email.includes("@") &&
+      !email.endsWith("@gmail.com") &&
+      !email.endsWith("@hotmail.com")
+    ) {
+      suggestion.style.display = "block";
+      suggestion.textContent = "Did you mean gmail.com or hotmail.com?";
     } else {
-      suggestion.textContent = '';
-      suggestion.style.display = 'none';
+      suggestion.style.display = "";
+      suggestion.textContent = "";
     }
   });
 </script>