Merge pull request #88 from hathitrust/DEV-1177-feedback-form

DEV-1177: finish up feedback form fixes

src/js/components/FeedbackFormBasic/index.svelte

@@ -134,7 +134,15 @@
   <form on:submit|preventDefault={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>
-      <input aria-describedby="name-error" type="name" class="form-control" id="name" name="name" required />
+      <input
+        aria-describedby="name-error"
+        type="name"
+        class="form-control"
+        id="name"
+        name="name"
+        autocomplete="name"
+        required
+      />
       <div class="invalid-feedback" id="name-error">
         {#if nameError}
           <span>Error: Please provide your name.</span>
@@ -145,7 +153,15 @@
       <label for="email" class="form-label"
         >Email address <span class="required" aria-hidden="true">(required)</span></label
       >
-      <input type="email" class="form-control" id="email" name="email" aria-describedby="email-error" required />
+      <input
+        type="email"
+        class="form-control"
+        id="email"
+        name="email"
+        aria-describedby="email-error"
+        autocomplete="email"
+        required
+      />
       <div class="invalid-feedback" id="email-error">
         {#if emailError}<span>Error: Please provide an email address.</span>{/if}
       </div>

src/js/components/FeedbackFormCatalog/index.svelte

@@ -136,7 +136,7 @@
   <form on:submit|preventDefault={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>
-      <input type="name" class="form-control" id="name" name="name" required />
+      <input type="name" class="form-control" id="name" autocomplete="name" name="name" required />
       <div class="invalid-feedback">
         {#if nameError}
           <span>Error: Please provide your name.</span>
@@ -148,7 +148,7 @@
       <label for="email" class="form-label"
         >Email address <span class="required" aria-hidden="true">(required)</span></label
       >
-      <input type="email" class="form-control" id="email" name="email" required />
+      <input type="email" class="form-control" id="email" autocomplete="email" name="email" required />
       <div class="invalid-feedback">
         {#if emailError}<span>Error: Please provide an email address.</span>{/if}
       </div>

src/js/components/FeedbackFormContent/index.svelte

@@ -141,7 +141,15 @@
   <form on:submit|preventDefault={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>
-      <input aria-describedby="name-error" type="name" class="form-control" id="name" name="name" required />
+      <input
+        aria-describedby="name-error"
+        type="name"
+        autocomplete="name"
+        class="form-control"
+        id="name"
+        name="name"
+        required
+      />
       <div class="invalid-feedback" id="name-error">
         {#if nameError}<span>Error: Please provide your name.</span>{/if}
       </div>
@@ -151,7 +159,15 @@
       <label for="email" class="form-label"
         >Email address <span class="required" aria-hidden="true">(required)</span></label
       >
-      <input type="email" aria-describedby="email-error" class="form-control" id="email" name="email" required />
+      <input
+        type="email"
+        aria-describedby="email-error"
+        autocomplete="email"
+        class="form-control"
+        id="email"
+        name="email"
+        required
+      />
       <div class="invalid-feedback" id="email-error">
         {#if emailError}<span>Error: Please provide an email address.</span>{/if}
       </div>

src/js/components/FeedbackFormModal/index.svelte

@@ -13,9 +13,6 @@
     modal.show();
   };
 
-  export const hide = function () {
-    modal.hide();
-  };
   onMount(() => {
     if (isOpen && modal) {
       modal.show();
@@ -25,9 +22,6 @@
   $: if (modal && isOpen) {
     show();
   }
-  $: if (modal && !isOpen) {
-    hide();
-  }
 
   let today = new Date();
 
@@ -50,31 +44,31 @@
 
 <div>
   {#if form == 'catalog'}
-    <Modal bind:this={modal} scrollable>
+    <Modal bind:this={modal} focusHelpOnClose scrollable>
       <svelte:fragment slot="title">Catalog Quality Correction</svelte:fragment>
       <svelte:fragment slot="body">
         {#if winterBreak}<p>{@html message}</p>{/if}
         <FeedbackFormCatalog />
       </svelte:fragment>
     </Modal>
   {:else if form == 'content'}
-    <Modal bind:this={modal} scrollable>
+    <Modal bind:this={modal} focusHelpOnClose scrollable>
       <svelte:fragment slot="title">Content Quality Correction</svelte:fragment>
       <svelte:fragment slot="body">
         {#if winterBreak}<p>{@html message}</p>{/if}
         <FeedbackFormContent />
       </svelte:fragment>
     </Modal>
   {:else if form == 'basic'}
-    <Modal bind:this={modal} scrollable>
+    <Modal bind:this={modal} focusHelpOnClose scrollable>
       <svelte:fragment slot="title">Questions?</svelte:fragment>
       <svelte:fragment slot="body">
         {#if winterBreak}<p>{@html message}</p>{/if}
         <FeedbackFormBasic />
       </svelte:fragment>
     </Modal>
   {:else}
-    <Modal bind:this={modal} scrollable>
+    <Modal bind:this={modal} focusHelpOnClose scrollable>
       <svelte:fragment slot="title">Questions?</svelte:fragment>
       <svelte:fragment slot="body">
         {#if winterBreak}<p>{@html message}</p>{/if}

src/js/components/Modal/index.svelte

@@ -12,6 +12,7 @@
   export let mode = 'alert';
   export let modalLarge = false;
   export let fullscreenOnMobile = false;
+  export let focusHelpOnClose = false;
 
   let modalBody;
 
@@ -23,9 +24,6 @@
     }
     isOpen = true;
     dialog.showModal();
-    // setTimeout(() => {
-    //   dialog.querySelector('button').focus();
-    // })
   };
 
   export const hide = function () {
@@ -39,6 +37,10 @@
     isOpen = false;
     onClose();
     console.log('-- dialog is closed');
+
+    if (focusHelpOnClose) {
+      document.getElementById('get-help').focus();
+    }
   };
 
   onMount(() => {

src/js/components/Navbar/index.svelte

@@ -319,6 +319,7 @@
           <a
             href="#"
             role="button"
+            id="get-help"
             aria-expanded="false"
             class="nav-link dropdown-toggle text-uppercase d-flex flex-row justify-content-between align-items-center gap-2"
             data-bs-toggle="dropdown"
@@ -338,6 +339,7 @@
               <li class="px-3">
                 <a
                   href="#"
+                  id="ask-a-question"
                   class="dropdown-item px-0 d-flex flex-row justify-content-between align-items-center"
                   on:click|preventDefault={() => openFeedback('questions')}
                 >
@@ -348,6 +350,7 @@
               <li class="px-3">
                 <a
                   href="#"
+                  id="report-a-problem"
                   class="dropdown-item px-0 d-flex flex-row justify-content-between align-items-center"
                   on:click|preventDefault={() => openFeedback(location)}
                 >
@@ -621,6 +624,7 @@
     --bs-dropdown-link-color: var(--color-neutral-800);
     --bs-dropdown-link-hover-color: var(--color-netural-800);
     --bs-dropdown-link-hover-bg: var(--color-neutral-50);
+
     div {
       padding-top: 0.5rem;
       @media (min-width: 1200px) {