@koehler8/cms 1.0.0-beta.9 → 1.1.0

package/src/components/ComingSoonModal.vue

@@ -48,7 +48,8 @@
 </template>
 
 <script setup>
-import { computed, onMounted, onBeforeUnmount, ref, watch } from 'vue';
+import { computed, ref } from 'vue';
+import { useFocusTrap } from '../composables/useFocusTrap.js';
 
 const props = defineProps({
   open: {
@@ -68,7 +69,6 @@ const props = defineProps({
 const emit = defineEmits(['close']);
 
 const dialogRef = ref(null);
-const focusableSelector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
 const dialogTitleId = computed(() => 'coming-soon-title');
 const dialogDescriptionId = computed(() => 'coming-soon-message');
 
@@ -76,58 +76,7 @@ const emitClose = () => {
   emit('close');
 };
 
-const trapFocus = (event) => {
-  if (!props.open) return;
-  if (typeof document === 'undefined') return;
-  if (event.key !== 'Tab') return;
-  const dialogEl = dialogRef.value;
-  if (!dialogEl) return;
-  const focusable = dialogEl.querySelectorAll(focusableSelector);
-  if (!focusable.length) {
-    event.preventDefault();
-    return;
-  }
-  const first = focusable[0];
-  const last = focusable[focusable.length - 1];
-  if (event.shiftKey && document.activeElement === first) {
-    event.preventDefault();
-    last.focus();
-  } else if (!event.shiftKey && document.activeElement === last) {
-    event.preventDefault();
-    first.focus();
-  }
-};
-
-watch(
-  () => props.open,
-  (isOpen) => {
-    if (typeof document === 'undefined') return;
-    if (isOpen) {
-      if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
-        window.requestAnimationFrame(() => {
-          dialogRef.value?.focus();
-        });
-      } else {
-        dialogRef.value?.focus();
-      }
-      document.addEventListener('keydown', trapFocus);
-    } else {
-      document.removeEventListener('keydown', trapFocus);
-    }
-  }
-);
-
-onMounted(() => {
-  if (typeof document === 'undefined') return;
-  if (props.open) {
-    document.addEventListener('keydown', trapFocus);
-  }
-});
-
-onBeforeUnmount(() => {
-  if (typeof document === 'undefined') return;
-  document.removeEventListener('keydown', trapFocus);
-});
+useFocusTrap(dialogRef, () => props.open, { onEscape: emitClose });
 </script>
 
 <style scoped>
@@ -200,31 +149,54 @@ onBeforeUnmount(() => {
 }
 
 .coming-soon-cta:hover,
-.coming-soon-cta:focus {
+.coming-soon-cta:focus-visible {
   opacity: 0.92;
   transform: translateY(-1px);
 }
 
-.coming-soon-cta:focus {
+.coming-soon-cta:focus-visible {
   outline: 2px solid #111111;
   outline-offset: 2px;
 }
 
 .coming-soon-close {
   position: absolute;
-  top: 0.75rem;
-  right: 0.75rem;
+  top: 0.5rem;
+  right: 0.5rem;
   background: transparent;
   border: none;
   font-size: 1.5rem;
   line-height: 1;
   cursor: pointer;
-  color: #888;
-  padding: 0.25rem;
+  /* AA-safe color (#595959 = 7:1 on white) and a 32×32 hit area for
+     2.5.8 Target Size (Minimum). */
+  color: #595959;
+  padding: 0;
+  min-width: 32px;
+  min-height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
 }
 
 .coming-soon-close:hover,
-.coming-soon-close:focus {
+.coming-soon-close:focus-visible {
   color: #111111;
 }
+.coming-soon-close:focus-visible {
+  outline: 2px solid #1f2a44;
+  outline-offset: 2px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .coming-soon-cta {
+    transition: none;
+  }
+
+  .coming-soon-cta:hover,
+  .coming-soon-cta:focus-visible {
+    transform: none;
+  }
+}
 </style>

package/src/components/Contact.vue

@@ -1,5 +1,5 @@
 <template>
-  <section id="contact" class="contact-section ui-section ui-section--stacked" data-analytics-section="contact">
+  <section v-if="hasContent" id="contact" class="contact-section ui-section ui-section--stacked" data-analytics-section="contact">
     <div class="container">
       <header class="section-header text-center">
         <div class="section-heading">
@@ -9,9 +9,15 @@
         <p class="section-description">{{ subtitle }}</p>
       </header>
       <div class="contact-wrapper">
-        <form id="signup" class="contact-form ui-card ui-card-surface" :action="formAction" method="POST">
+        <form
+          id="signup"
+          ref="formRef"
+          class="contact-form ui-card ui-card-surface"
+          :action="formAction"
+          method="POST"
+          @submit.prevent="handleSubmit"
+        >
           <!-- Google Forms requires these hidden fields -->
-          <input type="hidden" name="entry.1210125274" id="siteToken">
           <input type="hidden" name="fvv" :value="hiddenFields.fvv">
           <!-- Replace the fbzx value with the real one from your form's HTML source or prefilled link -->
           <input type="hidden" name="fbzx" :value="hiddenFields.fbzx">
@@ -21,55 +27,122 @@
 
           <div class="contact-grid">
             <div class="contact-field">
-              <input class="ui-form-control" type="text" :placeholder="placeholders.name" name="entry.757423084" required>
+              <label class="contact-label ui-label-sm" for="contact-name">
+                {{ placeholders.name }}<span class="contact-required" aria-hidden="true">*</span>
+              </label>
+              <input
+                id="contact-name"
+                class="ui-form-control"
+                type="text"
+                :placeholder="placeholders.name"
+                name="entry.757423084"
+                autocomplete="name"
+                required
+                aria-required="true"
+              >
             </div>
             <div class="contact-field">
-              <input class="ui-form-control" type="email" :placeholder="placeholders.email" name="entry.886201522" required>
+              <label class="contact-label ui-label-sm" for="contact-email">
+                {{ placeholders.email }}<span class="contact-required" aria-hidden="true">*</span>
+              </label>
+              <input
+                id="contact-email"
+                class="ui-form-control"
+                type="email"
+                :placeholder="placeholders.email"
+                name="entry.886201522"
+                autocomplete="email"
+                required
+                aria-required="true"
+              >
             </div>
             <div class="contact-field">
-              <input class="ui-form-control" type="text" :placeholder="placeholders.subject" name="entry.270717970">
+              <label class="contact-label ui-label-sm" for="contact-subject">{{ placeholders.subject }}</label>
+              <input
+                id="contact-subject"
+                class="ui-form-control"
+                type="text"
+                :placeholder="placeholders.subject"
+                name="entry.270717970"
+              >
             </div>
             <div class="contact-field">
-              <input class="ui-form-control" type="tel" :placeholder="placeholders.phone" name="entry.1570175907">
+              <label class="contact-label ui-label-sm" for="contact-phone">{{ placeholders.phone }}</label>
+              <input
+                id="contact-phone"
+                class="ui-form-control"
+                type="tel"
+                :placeholder="placeholders.phone"
+                name="entry.1570175907"
+                autocomplete="tel"
+              >
             </div>
             <div class="contact-field contact-field--full">
-              <textarea class="ui-form-control ui-form-textarea" rows="6" :placeholder="placeholders.message" name="entry.1743462629" required></textarea>
+              <label class="contact-label ui-label-sm" for="contact-message">
+                {{ placeholders.message }}<span class="contact-required" aria-hidden="true">*</span>
+              </label>
+              <textarea
+                id="contact-message"
+                class="ui-form-control ui-form-textarea"
+                rows="6"
+                :placeholder="placeholders.message"
+                name="entry.1743462629"
+                required
+                aria-required="true"
+              ></textarea>
             </div>
             <div class="contact-field contact-field--full">
-              <label class="contact-label ui-label-sm">{{ challenge.label }}</label>
+              <label class="contact-label ui-label-sm" for="contact-challenge">
+                {{ challenge.label }}<span class="contact-required" aria-hidden="true">*</span>
+              </label>
               <small
                 v-if="challenge.instructions"
+                id="contact-challenge-hint"
                 class="contact-hint ui-form-hint"
                 :class="{ 'contact-hint--inline': challenge.label.length < 18 }"
               >
                 {{ challenge.instructions }}
               </small>
               <div class="ui-input-group">
-                <span class="ui-input-group__addon">{{ challenge.question }}</span>
+                <span class="ui-input-group__addon" id="contact-challenge-prompt">{{ challenge.question }}</span>
                 <input
+                  id="contact-challenge"
                   type="text"
                   class="ui-input-group__input"
                   :placeholder="challenge.placeholder"
                   v-model="challengeAnswer"
                   autocomplete="off"
                   required
+                  aria-required="true"
+                  :aria-describedby="challengeDescribedBy"
+                  :aria-invalid="hasChallengeError ? 'true' : null"
                 >
               </div>
             </div>
           </div>
 
+          <p class="contact-required-note">
+            <span class="contact-required" aria-hidden="true">*</span> Required fields
+          </p>
+
           <div class="contact-actions">
-            <div
-              v-if="isConfirmationVisible"
-              class="submitted"
-              role="status"
-              aria-live="polite"
-            >
-              {{ confirmationText }}
-            </div>
-            <button class="primary-button contact-submit" type="submit">{{ submitLabel }}</button>
+            <button
+              class="primary-button contact-submit"
+              type="submit"
+              :disabled="!isFormConfigured"
+            >{{ submitLabel }}</button>
           </div>
-          <small id="msg" class="contact-feedback"></small>
+          <p v-if="!isFormConfigured" class="contact-feedback">
+            The contact form isn't accepting messages right now.
+          </p>
+          <p
+            id="msg"
+            class="contact-feedback"
+            :class="feedbackKind ? `contact-feedback--${feedbackKind}` : null"
+            role="status"
+            aria-live="polite"
+            aria-atomic="true"
+          >{{ feedbackText }}</p>
         </form>
       </div>
     </div>
@@ -77,28 +150,32 @@
 </template>
 
 <script setup>
-import { inject, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
+import { computed, inject, onMounted, reactive, ref, watch } from 'vue'
 import { trackEvent } from '../utils/analytics.js';
+import { readStoredLocale } from '../utils/webStorage.js';
 
 const title = ref('Contact Us')
 const subtitle = ref("Send us a message and we'll keep you updated.")
 const formAction = ref('')
 const submitLabel = ref('Send Message')
 const confirmationText = ref('Your message has been sent successfully.')
-const isConfirmationVisible = ref(false)
 const honeypotMessage = ref('Thanks!')
 const pendingMessage = ref('Submitting…')
 const successMessage = ref('Thanks! Your message was sent.')
 const errorMessage = ref('Sorry—something went wrong. Please try again.')
 
-const SUBMISSION_TOKEN = '';
+// Single live feedback region (#msg): success, error, and pending states all
+// announce through it exactly once.
+const feedbackText = ref('')
+const feedbackKind = ref('')
+
+// A configured action URL is the only way a submission can go anywhere.
+// Without one the form is inert and says so — previously it posted to the
+// page's own URL and reported success.
+const isFormConfigured = computed(() => /^https?:\/\//i.test(formAction.value || ''))
 
 function getTrackedLocale() {
-  try {
-    const stored = localStorage.getItem('locale');
-    if (stored) return stored;
-  } catch (_) {}
-  return 'default';
+  return readStoredLocale() || 'default';
 }
 
 const placeholders = reactive({
@@ -129,6 +206,14 @@ const challenge = reactive({
 })
 
 const challengeAnswer = ref('')
+const hasChallengeError = ref(false)
+
+const challengeDescribedBy = computed(() => {
+  const ids = ['contact-challenge-prompt']
+  if (challenge.instructions) ids.push('contact-challenge-hint')
+  if (hasChallengeError.value) ids.push('msg')
+  return ids.join(' ')
+})
 
 let expectedChallengeAnswer = ''
 let activeChallengeType = 'arithmetic'
@@ -243,6 +328,11 @@ function normalizeChallengeType(type) {
 }
 
 function generateChallenge() {
+  // Deferred until mount: generating during setup ran on both the server and
+  // the client with different random values, so the prerendered question
+  // never matched what the client validated against — a guaranteed hydration
+  // mismatch on every page load.
+  if (!isMounted.value) return
   const configuredTypes = Array.isArray(challenge.types) && challenge.types.length
     ? challenge.types
     : [...DEFAULT_CHALLENGE_TYPES]
@@ -258,8 +348,6 @@ function generateChallenge() {
   activeChallengeType = chosenType
 }
 
-generateChallenge()
-
 function answersMatch(expected, received) {
   const expectedValue = String(expected ?? '').trim()
   const receivedValue = String(received ?? '').trim()
@@ -276,12 +364,16 @@ function isChallengeAnswerCorrect(answer) {
   return answersMatch(expectedChallengeAnswer, answer)
 }
 
-let formElement
-let submitHandler
-let tokenField
+const formRef = ref(null)
+const isMounted = ref(false)
 
 const pageContent = inject('pageContent', ref({}))
 
+// components[] contract: no content.contact block → render nothing. A
+// contact form can't work without configuration anyway (the default form
+// action is empty), so an unconfigured Contact rendered a decoy form.
+const hasContent = computed(() => Object.keys(pageContent.value?.contact || {}).length > 0)
+
 const defaultTitle = title.value
 const defaultSubtitle = subtitle.value
 const defaultFormAction = formAction.value
@@ -314,7 +406,6 @@ watch(
     formAction.value = formCopy.action ?? defaultFormAction
     submitLabel.value = formCopy.submitLabel ?? defaultSubmitLabel
     confirmationText.value = formCopy.confirmationText ?? defaultConfirmationText
-    isConfirmationVisible.value = false
     honeypotMessage.value = formCopy.honeypotMessage ?? defaultHoneypot
     pendingMessage.value = formCopy.pendingMessage ?? defaultPending
     successMessage.value = formCopy.successMessage ?? defaultSuccess
@@ -354,103 +445,97 @@ watch(
 )
 
 onMounted(() => {
-  formElement = document.getElementById('signup')
-  const msg = document.getElementById('msg')
-  tokenField = document.getElementById('siteToken')
-
-  const resetTokenField = () => {
-    if (tokenField) {
-      tokenField.value = SUBMISSION_TOKEN
-      tokenField.defaultValue = SUBMISSION_TOKEN
-    }
-  }
-
-  resetTokenField()
+  isMounted.value = true
+  challengeAnswer.value = ''
+  generateChallenge()
+})
 
-  if (!formElement || !msg) return
+async function handleSubmit() {
+  const formElement = formRef.value
+  if (!formElement) return
 
-  submitHandler = async (e) => {
-    e.preventDefault()
-    isConfirmationVisible.value = false
+  feedbackKind.value = ''
+  feedbackText.value = ''
 
-    const startedAt = typeof performance !== 'undefined' && typeof performance.now === 'function'
-      ? performance.now()
-      : undefined
-    const baseParams = {
-      locale: getTrackedLocale()
-    }
-    const emitSubmitEvent = (status, extra = {}) => {
-      const params = { ...baseParams, status, challenge_type: activeChallengeType, ...extra }
-      if (startedAt !== undefined && typeof performance !== 'undefined' && typeof performance.now === 'function') {
-        params.duration_ms = Math.round(performance.now() - startedAt)
-      }
-      trackEvent('contact_form_submit', params)
+  const startedAt = typeof performance !== 'undefined' && typeof performance.now === 'function'
+    ? performance.now()
+    : undefined
+  const baseParams = {
+    locale: getTrackedLocale()
+  }
+  const emitSubmitEvent = (status, extra = {}) => {
+    const params = { ...baseParams, status, challenge_type: activeChallengeType, ...extra }
+    if (startedAt !== undefined && typeof performance !== 'undefined' && typeof performance.now === 'function') {
+      params.duration_ms = Math.round(performance.now() - startedAt)
     }
+    trackEvent('contact_form_submit', params)
+  }
 
-    emitSubmitEvent('attempt')
-
-    const hp = formElement.querySelector('input[name="website"]')
-    if (hp && hp.value) {
-      msg.textContent = honeypotMessage.value
-      formElement.reset()
-      challengeAnswer.value = ''
-      generateChallenge()
-      resetTokenField()
-      trackEvent('contact_form_honeypot_triggered', {
-        ...baseParams,
-        challenge_type: 'honeypot_field'
-      })
-      return
-    }
+  emitSubmitEvent('attempt')
 
-    if (!isChallengeAnswerCorrect(challengeAnswer.value)) {
-      msg.textContent = challenge.errorMessage
-      emitSubmitEvent('challenge_failed')
-      challengeAnswer.value = ''
-      generateChallenge()
-      return
-    }
+  if (!isFormConfigured.value) {
+    feedbackKind.value = 'error'
+    feedbackText.value = errorMessage.value
+    emitSubmitEvent('unconfigured')
+    return
+  }
 
-    msg.textContent = pendingMessage.value
-
-    try {
-      resetTokenField()
-      const formData = new FormData(formElement)
-      formData.set('entry.1210125274', SUBMISSION_TOKEN)
-
-      await fetch(formElement.action, {
-        method: 'POST',
-        mode: 'no-cors',
-        body: formData
-      })
-      msg.textContent = successMessage.value
-      formElement.reset()
-      challengeAnswer.value = ''
-      generateChallenge()
-      resetTokenField()
-      isConfirmationVisible.value = !!(confirmationText.value && confirmationText.value.trim())
-      emitSubmitEvent('success')
-    } catch (err) {
-      console.error('[Contact] Form submission failed:', err)
-      msg.textContent = errorMessage.value
-      emitSubmitEvent('error', {
-        error_name: err?.name || 'unknown',
-        error_code: err?.code || 'unknown'
-      })
-      challengeAnswer.value = ''
-      generateChallenge()
-      resetTokenField()
-    }
+  const hp = formElement.querySelector('input[name="website"]')
+  if (hp && hp.value) {
+    feedbackKind.value = 'success'
+    feedbackText.value = honeypotMessage.value
+    formElement.reset()
+    challengeAnswer.value = ''
+    generateChallenge()
+    trackEvent('contact_form_honeypot_triggered', {
+      ...baseParams,
+      challenge_type: 'honeypot_field'
+    })
+    return
   }
 
-  formElement.addEventListener('submit', submitHandler)
-})
+  if (!isChallengeAnswerCorrect(challengeAnswer.value)) {
+    feedbackKind.value = 'error'
+    feedbackText.value = challenge.errorMessage
+    hasChallengeError.value = true
+    emitSubmitEvent('challenge_failed')
+    challengeAnswer.value = ''
+    generateChallenge()
+    return
+  }
 
-onUnmounted(() => {
-  if (formElement && submitHandler) {
-    formElement.removeEventListener('submit', submitHandler)
+  hasChallengeError.value = false
+  feedbackKind.value = 'pending'
+  feedbackText.value = pendingMessage.value
+
+  try {
+    const formData = new FormData(formElement)
+    await fetch(formAction.value, {
+      method: 'POST',
+      mode: 'no-cors',
+      body: formData
+    })
+    // no-cors responses are opaque: resolving means the request reached the
+    // endpoint, not that it was accepted — the strongest claim available.
+    feedbackKind.value = 'success'
+    feedbackText.value = (confirmationText.value || '').trim() || successMessage.value
+    formElement.reset()
+    challengeAnswer.value = ''
+    generateChallenge()
+    emitSubmitEvent('success')
+  } catch (err) {
+    // Network-level failure: report it and keep everything the visitor typed.
+    console.error('[Contact] Form submission failed:', err)
+    feedbackKind.value = 'error'
+    feedbackText.value = errorMessage.value
+    emitSubmitEvent('error', {
+      error_name: err?.name || 'unknown',
+      error_code: err?.code || 'unknown'
+    })
+    challengeAnswer.value = ''
+    generateChallenge()
   }
-})
+}
 </script>
 
 <style scoped>
@@ -491,6 +576,17 @@ onUnmounted(() => {
   color: var(--contact-label-color, var(--ui-text-primary, #1f2a44));
 }
 
+.contact-required {
+  margin-left: 0.2em;
+  color: var(--contact-required-color, #a83838); /* AA-safe critical text */
+}
+
+.contact-required-note {
+  margin: -8px 0 0;
+  font-size: 0.8rem;
+  color: var(--contact-required-note-color, var(--ui-text-muted, #54627b));
+}
+
 .contact-hint--inline {
   display: inline-block;
   margin-left: 6px;