ETT-586: fix data-hathi-trigger component instantiation for wordpress feedback modal

src/js/components/FeedbackFormBasic/index.svelte

@@ -9,6 +9,9 @@
     summaryError = $state(),
     descriptionError = $state(false);
 
+  const id = $props.id();
+  const form = `form#${id}`;
+
   //takes long string output of document.cookie and splits it into a usable javascript object
   let cookies = document.cookie
     .split(';')
@@ -26,8 +29,6 @@
 
   /**
    * @typedef {Object} Props
-   * @property {any} [id]
-   * @property {any} [form]
    * @property {any} postResponseStatusCode
    * @property {boolean} [loading] - when true, spinner on submit button animates
    * @property {boolean} [hidden] - when true, hides the element (in this case, the form)
@@ -38,8 +39,6 @@
 
   /** @type {Props} */
   let {
-    id = `id${new Date().getTime()}`,
-    form = `form#${id}`,
     postResponseStatusCode = $bindable(),
     loading = $bindable(false),
     hidden = $bindable(false),
@@ -86,16 +85,16 @@
       event.stopPropagation();
       loading = false;
       formValid.classList.add('was-validated');
-      if (formValid.querySelector('#name.form-control:invalid')) {
+      if (formValid.querySelector(`#${id}-name.form-control:invalid`)) {
         nameError = true;
       }
-      if (formValid.querySelector('#email.form-control:invalid')) {
+      if (formValid.querySelector(`#${id}-email.form-control:invalid`)) {
         emailError = true;
       }
-      if (formValid.querySelector('#summary.form-control:invalid')) {
+      if (formValid.querySelector(`#${id}-summary.form-control:invalid`)) {
         summaryError = true;
       }
-      if (formValid.querySelector('#description.form-control:invalid')) {
+      if (formValid.querySelector(`#${id}-description.form-control:invalid`)) {
         descriptionError = true;
       }
       errorMessage = true;
@@ -143,70 +142,79 @@
 <main>
   <form {onsubmit} class:hidden class="needs-validation mb-3" name="feedback" novalidate {id}>
     <div class="mb-3">
-      <label for="name" class="form-label">Name <span class="required" aria-hidden="true">(required)</span> </label>
+      <label for="{id}-name" class="form-label"
+        >Name <span class="required" aria-hidden="true">(required)</span>
+      </label>
       <input
-        aria-describedby="name-error"
+        aria-describedby="{id}-name-error"
         type="name"
         class="form-control"
-        id="name"
+        id="{id}-name"
         name="name"
         autocomplete="name"
         required
       />
-      <div class="invalid-feedback" id="name-error">
+      <div class="invalid-feedback" id="{id}-name-error">
         {#if nameError}
           <span>Error: Please provide your name.</span>
         {/if}
       </div>
     </div>
     <div class="mb-3">
-      <label for="email" class="form-label"
+      <label for="{id}-email" class="form-label"
         >Email address <span class="required" aria-hidden="true">(required)</span></label
       >
       <input
         type="email"
         class="form-control"
-        id="email"
+        id="{id}-email"
         name="email"
-        aria-describedby="email-error"
+        aria-describedby="{id}-email-error"
         autocomplete="email"
         required
       />
-      <div class="invalid-feedback" id="email-error">
+      <div class="invalid-feedback" id="{id}-email-error">
         {#if emailError}<span>Error: Please provide an email address.</span>{/if}
       </div>
     </div>
     <div class="mb-3">
-      <label for="summary" class="form-label"
+      <label for="{id}-summary" class="form-label"
         >Short summary <span class="required" aria-hidden="true">(required)</span></label
       >
-      <input type="text" class="form-control" id="summary" name="summary" aria-describedby="summary-error" required />
-      <div class="invalid-feedback" id="summary-error">
+      <input
+        type="text"
+        class="form-control"
+        id="{id}-summary"
+        name="summary"
+        aria-describedby="{id}-summary-error"
+        required
+      />
+      <div class="invalid-feedback" id="{id}-summary-error">
         {#if summaryError}<span>Error: Please provide a title or subject line to summarize your feedback.</span>{/if}
       </div>
     </div>
     <div class="mb-3">
-      <label for="bookDescription" class="form-label"
+      <label for="{id}-bookDescription" class="form-label"
         >If your question is related to a specific book, what is the title or URL? <span
           class="required"
           aria-hidden="true">(optional)</span
         ></label
       >
-      <input type="text" class="form-control" id="bookDescription" name="bookDescription" />
+      <input type="text" class="form-control" id="{id}-bookDescription" name="bookDescription" />
     </div>
     <div class="mb-3">
-      <label for="description" class="form-label"
+      <label for="{id}-description" class="form-label"
         >Full description of problem or question <span class="required" aria-hidden="true">(required)</span></label
       >
       <textarea
         class="form-control"
-        aria-describedby="description-error"
-        id="description"
+        aria-describedby="{id}-description-error"
+        id="{id}-description"
         name="description"
         rows="3"
         required
       ></textarea>
-      <div class="invalid-feedback" id="description-error">
+      <div class="invalid-feedback" id="{id}-description-error">
         {#if descriptionError}<span
             >Error: Please provide some background or details for your feedback or question.</span
           >{/if}

src/js/components/FeedbackFormModal/index.svelte

@@ -80,6 +80,16 @@
         <FeedbackFormBasic />
       {/snippet}
     </Modal>
+  {:else if form == 'contact'}
+    <Modal bind:this={modal} focusButtonOnClose scrollable>
+      {#snippet title()}
+        Contact HathiTrust
+      {/snippet}
+      {#snippet body()}
+        {#if winterBreak}<p>{@html message}</p>{/if}
+        <FeedbackFormBasic />
+      {/snippet}
+    </Modal>
   {:else}
     <Modal bind:this={modal} focusHelpOnClose scrollable>
       {#snippet title()}

src/js/components/Modal/index.svelte

@@ -15,6 +15,7 @@
    * @property {boolean} [fullscreenOnMobile]
    * @property {boolean} [focusHelpOnClose]
    * @property {boolean} [focusMyAccountOnClose]
+   * @property {boolean} [focusButtonOnClose]
    * @property {import('svelte').Snippet} [title]
    * @property {import('svelte').Snippet} [body]
    * @property {import('svelte').Snippet} [footer]
@@ -33,6 +34,7 @@
     fullscreenOnMobile = false,
     focusHelpOnClose = false,
     focusMyAccountOnClose = false,
+    focusButtonOnClose = false,
     title,
     body,
     footer,
@@ -57,7 +59,7 @@
     }
     isOpen = true;
     dialog.showModal();
-    if (focusHelpOnClose || focusMyAccountOnClose) {
+    if (focusHelpOnClose || focusMyAccountOnClose || focusButtonOnClose) {
       window.addEventListener('keydown', logKeys);
     }
   };
@@ -81,6 +83,9 @@
     if (focusMyAccountOnClose) {
       document.querySelector('#my-account a').focus();
     }
+    if (focusButtonOnClose) {
+      document.querySelector('#feedback-form').focus();
+    }
   };
 
   onMount(() => {

src/js/main.svelte.js

@@ -131,7 +131,7 @@ document.documentElement.dataset.suportsInert = document.body.inert !== undefine
 document.querySelectorAll('[data-hathi-trigger]').forEach((el) => {
   let slug = el.dataset.hathiTrigger;
   let props = buildProps(el);
-  el.component = new apps[slug]({
+  el.component = mount(apps[slug], {
     target: document.body,
     props: props,
     intro: true,