Merge pull request #3144 from r0hit-gupta/msft149

MSFT-149

Author: sushilshinde

src/shared/components/SubmissionPage/Submit/index.jsx

@@ -316,14 +316,15 @@ Please follow the instructions on the Challenge Details page regarding
                 <input
                   type="checkbox"
                   id="agree"
+                  aria-label="I understand and agree"
                   onChange={e => setAgreed(e.target.checked)}
                 />
                 <label htmlFor="agree">
-                  <div styleName="tc-checkbox-label">
-I UNDERSTAND AND AGREE
-                  </div>
                   <input type="hidden" />
                 </label>
+                <div styleName="tc-checkbox-label">
+I UNDERSTAND AND AGREE
+                </div>
               </div>
               <PrimaryButton
                 type="submit"

src/shared/components/SubmissionPage/Submit/styles.scss

@@ -187,7 +187,12 @@
       margin-bottom: 30px;
 
       input[type=checkbox] {
-        display: none;
+        visibility: visible;
+        position: absolute;
+        opacity: 0;
+        cursor: pointer;
+        height: 0;
+        width: 0;
       }
 
       label {
@@ -230,6 +235,10 @@
         border-color: $tc-dark-blue;
       }
 
+      input[type=checkbox]:focus ~ label {
+        outline: 2px auto $tc-dark-blue;
+      }
+
       input[type=checkbox]:checked + label::after {
         opacity: 1;
         border-color: $tc-white;