add p tags around radio buttom labels to meet 24px touch target spacing requirement for fingers, improves accessibility

Author: remimarcelle

Form-Controls/index.html

@@ -17,26 +17,32 @@ <h1>Product Pick</h1>
 
         <!-- requirement: ask for customer's full name -->
         <!-- validation: name must be at least 2 characters -->
-        <label for="name">What’s your full name?</label>
-        <input 
-          type="text" 
-          id="name" 
-          name="name" 
-          required 
-          minlength="2" 
-          placeholder="e.g. Abel T. Abelson" 
-        />
+         <p>
+          <label for="name">What’s your full name?</label>
+          <input 
+            type="text" 
+            id="name" 
+            name="name" 
+            required 
+            minlength="2" 
+            placeholder="e.g. Abel T. Abelson" 
+          />
+         </p>
+        
+    
 
         <!-- requirement: ask for customer's email address -->
         <!-- validation: must match a valid email format -->
-        <label for="email">Your email address:</label>
-        <input 
-          type="email" 
-          id="email" 
-          name="email" 
-          required 
-          placeholder="e.g. you@example.com"
-        />
+         <p>
+          <label for="email">Your email address:</label>
+          <input 
+            type="email" 
+            id="email" 
+            name="email" 
+            required 
+            placeholder="e.g. you@example.com"
+          />
+          </p>
 
         <!-- requirement: customer must choose one t-shirt colour -->
         <!-- validation: limit choice to 3 fixed colour options -->
@@ -49,19 +55,21 @@ <h1>Product Pick</h1>
 
         <!-- requirement: customer must select a t-shirt size -->
         <!-- validation: size must be one of 6 defined options -->
-        <label for="size">Select your size:</label>
-        <select id="size" name="size" required>
-          <option value="">-- Choose one --</option>
-          <option value="XS">Extra Small (XS)</option>
-          <option value="S">Small (S)</option>
-          <option value="M">Medium (M)</option>
-          <option value="L">Large (L)</option>
-          <option value="XL">Extra Large (XL)</option>
-          <option value="XXL">Double XL (XXL)</option>
-        </select>
+         <p>
+          <label for="size">Select your size:</label>
+          <select id="size" name="size" required>
+            <option value="">-- Choose one --</option>
+            <option value="XS">Extra Small (XS)</option>
+            <option value="S">Small (S)</option>
+            <option value="M">Medium (M)</option>
+            <option value="L">Large (L)</option>
+            <option value="XL">Extra Large (XL)</option>
+            <option value="XXL">Double XL (XXL)</option>
+          </select>
 
-        <!-- requirement: a submit button must be present -->
-        <button type="submit">Place Order</button>
+          <!-- requirement: a submit button must be present -->
+          <button type="submit">Place Order</button>
+          </p>
       </form>
     </main>
     <footer>