a11y: Add labels to input fields

Fixes errors about this by lint:hbs ember-template-lint. https://github.com/ember-template-lint/ember-template-lint/blob/v5.11.0/docs/rule/require-input-label.md
peternowee · Jul 14, 2023 · 74fe382 · 74fe382
1 parent b89659b
commit 74fe382
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 18 deletions.
diff --git a/app/templates/individual-products.hbs b/app/templates/individual-products.hbs
@@ -14,15 +14,25 @@
 <hr />
 <form {{on "submit" this.createIndividualProduct}} >
   <dl>
-    <dt>Serial number</dt>
+    <dt><label for="individual-product-serial-number">
+      Serial number
+    </label></dt>
     <dd>
-       <Input @value={{this.newSerialNumber}}
-              placeholder="1234567890" />
+      <Input
+        id="individual-product-serial-number"
+        @value={{this.newSerialNumber}}
+        placeholder="1234567890"
+      />
     </dd>
-    <dt>Name</dt>
+    <dt><label for="individual-product-name">
+      Name
+    </label></dt>
     <dd>
-       <Input @value={{this.newName}}
-              placeholder="Frontier OLCF-5" />
+      <Input
+        id="individual-product-name"
+        @value={{this.newName}}
+        placeholder="Frontier OLCF-5"
+      />
     </dd>
   </dl>
   <button type="submit">Create</button>

diff --git a/app/templates/people.hbs b/app/templates/people.hbs
@@ -12,10 +12,15 @@
 <hr />
 <form {{on "submit" this.createPerson}} >
   <dl>
-    <dt>Person name</dt>
+    <dt><label for="person-name">
+      Person name
+    </label></dt>
     <dd>
-       <Input @value={{this.newName}}
-              placeholder="Grace" />
+      <Input
+        id="person-name"
+        @value={{this.newName}}
+        placeholder="Grace"
+      />
     </dd>
   </dl>
   <button type="submit">Create</button>

diff --git a/app/templates/transactions.hbs b/app/templates/transactions.hbs
@@ -26,20 +26,35 @@
 <hr />
 <form {{on "submit" this.createTransaction}} >
   <dl>
-    <dt>Date and time</dt>
+    <dt><label for="transaction-datetime">
+      Date and time
+    </label></dt>
     <dd>
-       <Input @value={{this.newTransactionDatetime}}
-              placeholder="2023-01-01 00:00" />
+      <Input
+        id="transaction-datetime"
+        @value={{this.newTransactionDatetime}}
+        placeholder="2023-01-01 00:00"
+      />
     </dd>
-    <dt>New owner ID</dt>
+    <dt><label for="transaction-new-owner">
+      New owner ID
+    </label></dt>
     <dd>
-       <Input @value={{this.newOwner}}
-              placeholder="64A68A6AB3020C92BA8D9DE4" />
+      <Input
+        id="transaction-new-owner"
+        @value={{this.newOwner}}
+        placeholder="64A68A6AB3020C92BA8D9DE4"
+      />
     </dd>
-    <dt>Received product ID</dt>
+    <dt><label for="transaction-received-product">
+      Received product ID
+    </label></dt>
     <dd>
-       <Input @value={{this.receivedProduct}}
-              placeholder="64A8036EDDF042E61F69B2C4" />
+      <Input
+        id="transaction-received-product"
+        @value={{this.receivedProduct}}
+        placeholder="64A8036EDDF042E61F69B2C4"
+      />
     </dd>
   </dl>
   <button type="submit">Create</button>