add unique ids to form labels

Author: carylwyatt

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),
@@ -143,12 +142,14 @@
 <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"
         type="name"
         class="form-control"
-        id="name"
+        id="{id}-name"
         name="name"
         autocomplete="name"
         required
@@ -160,13 +161,13 @@
       </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"
         autocomplete="email"
@@ -177,31 +178,38 @@
       </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 />
+      <input
+        type="text"
+        class="form-control"
+        id="{id}-summary"
+        name="summary"
+        aria-describedby="summary-error"
+        required
+      />
       <div class="invalid-feedback" 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"
+        id="{id}-description"
         name="description"
         rows="3"
         required