fixed some accessiblity issues

Author: AbdennourHachemi

Form-Controls/index.html

@@ -28,61 +28,61 @@ <h1>Product Pick</h1>
 			<div class="colorSelection">
 				<label>Please pick a color:</label> <br>
 				<div class="colorOption">
-					<label>Blue</label>
-					<div class="square" id="blueOption">
-						<input type="radio" name="color" value="blue">
+					<label for="blueOption">Blue</label>
+					<div class="square" id="blueOptions">
+						<input type="radio" name="color"  id="blueOption" value="blue">
 					</div>
 				</div>
 				<div class="colorOption">
-					<label>Green</label>
-					<div class="square" id="greenOption">
-						<input type="radio" name="color" value="green">
+					<label for="greenOption">Green</label>
+					<div class="square" id="greenOptions">
+						<input type="radio" name="color" id="greenOption"value="green">
 					</div>
 				</div>
 				<div class="colorOption">
-					<label>Red</label>
-					<div class="square" id="redOption">
-						<input type="radio" name="color" value="red" required>
+					<label for="redOption">Red</label>
+					<div class="square" id="redOptions">
+						<input type="radio" name="color" id="redOption" value="red" required>
 					</div>
 				</div>
 			</div>
 			<div id="sizediv">
-				<label>Please select the t-shirt size:</label> <br>
+				<label>Please select the t-shirt size:</label> <br> .
 				<div class="colorSelection">
 					<div class="sizeOption">
-						<label>XS</label>
+						<label for="xs">XS</label>
 						<div>
-							<input type="radio" name="size" value="xs">
+							<input type="radio" name="size" value="xs" id="xs">
 						</div>
 					</div>
 					<div class="sizeOption">
-						<label>S</label>
+						<label for="s">S</label>
 						<div>
-							<input type="radio" name="size" value="s">
+							<input type="radio" name="size"  id="s" value="s">
 						</div>
 					</div>
 					<div class="sizeOption">
-						<label>M</label>
+						<label for="m">M</label>
 						<div>
-							<input type="radio" name="size" value="m">
+							<input type="radio" name="size" id="m" value="m">
 						</div>
 					</div>
 					<div class="sizeOption">
-						<label>L</label>
+						<label for="l">L</label>
 						<div>
-							<input type="radio" name="size" value="l">
+							<input type="radio" id="l" name="size" value="l">
 						</div>
 					</div>
 					<div class="sizeOption">
-						<label>XL</label>
+						<label for="xl">XL</label>
 						<div>
-							<input type="radio" name="size" value="xl">
+							<input type="radio" id="xl" name="size" value="xl">
 						</div>
 					</div>
 					<div class="sizeOption">
-						<label>XXL</label>
+						<label for="sizexxl">XXL</label>
 						<div>
-							<input type="radio" name="size" value="xxl">
+							<input type="radio" id ="sizexxl" name="size" value="xxl">
 						</div>
 					</div>
 				</div>

Form-Controls/styles.css

@@ -17,15 +17,15 @@
     width: 25px;
 }
 
-#blueOption {
+#blueOptions {
     background-color: #180fcb;
 }
 
-#greenOption {
+#greenOptions {
     background-color: green;
 }
 
-#redOption {
+#redOptions {
     background-color: red;
 }