fix accessability issues.

Dagim-Daniel · Dagim-Daniel · commit 1e6e7524030e · 2026-03-07T21:37:01.000Z
diff --git a/Form-Controls/index.html b/Form-Controls/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -14,13 +14,24 @@ <h1>Product Pick</h1>
     </header>
     <main>
       <form>
-        <p> please enter the required (*) information to order your T-shirt.  </p>
+        <p>please enter the required (*) information to order your T-shirt.</p>
         <fieldset>
           <legend>Customer Information</legend>
           <label for="name">Name:*</label>
-          <input type="text" id="name" name="name" required pattern="[A-Za-z\s]{2,50}" />
-          <br /> 
-          <span class="error-message">Please enter a valid name (2-50 characters, letters and spaces only).</span>
+          <input
+            type="text"
+            id="name"
+            name="name"
+            required
+            pattern="[A-Za-z\s]{2,50}"
+          />
+          <br />
+          <span class="error-message"
+            ><p>
+              Please enter a valid name (2-50 characters, letters and spaces
+              only).
+            </p>
+          </span>
           <br />
           <label for="email">Email:*</label>
           <input type="email" id="email" name="email" required />
@@ -35,15 +46,15 @@ <h1>Product Pick</h1>
           color of T-shire (choose one from 3 option)
           size of T-shirt (choose one from xs, s, m, l, xl,xxl)-->
         <fieldset>
-          <legend>Product Information</legend>  
+          <legend>Product Information</legend>
           <label for="color">Color:*</label>
           <select id="color" name="color" required>
             <option value="">--Please choose a color--</option>
             <option value="red">Red</option>
             <option value="blue">Blue</option>
             <option value="green">Green</option>
           </select>
-          <br /> 
+          <br />
           <label for="size">Size:*</label>
           <select id="size" name="size" required>
             <option value="">--Please choose a size--</option>
@@ -54,9 +65,9 @@ <h1>Product Pick</h1>
             <option value="xl">XL</option>
             <option value="xxl">XXL</option>
           </select>
-        </fieldset> 
-        <label for ="submit"></label>
-        <input type="submit" id="submit" value="Submit Order"/>
+        </fieldset>
+        <label for="submit"></label>
+        <input type="submit" id="submit" value="Submit Order" />
       </form>
     </main>
     <footer>
diff --git a/Form-Controls/style.css b/Form-Controls/style.css
@@ -1,6 +1,6 @@
 :root {
   --paper: oklch(7 0 0);
-  --ink: color-mix(in oklab, var(--color) 5%, black);
+  --ink: color-mix(in oklab, var(--color) 5%, Green);
   --font: 100%/1.5 system-ui;
   --space: clamp(6px, 6px + 2vw, 15px);
   --container: 1280px;
@@ -20,28 +20,27 @@ body {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
 }
+p {
+  margin: auto;
+}
 h1 {
-  
   text-align: center;
 }
-input:invalid
-{
-  border-color:red;
+input:invalid {
+  border-color: rgb(255, 64, 0);
 }
 span {
-  color: grey;
+  font-size: smaller;
 }
-input:valid
-{
-  border-color:green;
+input:valid {
+  border-color: green;
 }
 fieldset:focus-within {
-  border-color:blue;
+  border-color: green;
 }
-footer{
-  background-image: linear-gradient(to right, grey, lightgreen);
-  width:var(--container);
+footer {
+  width: var(--container);
   position: fixed;
   bottom: 0;
   text-align: center;
-}
+}
