feat: Input label accessibility for signature image upload

bcgov · Aug 28, 2020 · 9861335 · 9861335
1 parent 00ebf3d
commit 9861335
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/app/containers/Forms/CertificationSignature.tsx b/app/containers/Forms/CertificationSignature.tsx
@@ -96,11 +96,14 @@ export const CertificationSignature: React.FunctionComponent<Props> = ({
           {submitted ? (
             <span style={{color: 'green'}}>Signed Successfully!</span>
           ) : (
-            <input
-              accept="image/*"
-              type="file"
-              onChange={(e) => readImage(e)}
-            />
+            <label>
+              Upload an existing signature image:
+              <input
+                accept="image/*"
+                type="file"
+                onChange={(e) => readImage(e)}
+              />
+            </label>
           )}
         </Col>
         <Col md={{offset: 2, span: 3}}>

diff --git a/app/tests/unit/containers/Forms/__snapshots__/CertificationSignature.test.tsx.snap b/app/tests/unit/containers/Forms/__snapshots__/CertificationSignature.test.tsx.snap
@@ -36,12 +36,17 @@ exports[`The Confirmation Component matches the snapshot 1`] = `
     <Col
       md={6}
     >
-      <input
-        accept="image/*"
+      <label
         className="jsx-2877110858"
-        onChange={[Function]}
-        type="file"
-      />
+      >
+        Upload an existing signature image:
+        <input
+          accept="image/*"
+          className="jsx-2877110858"
+          onChange={[Function]}
+          type="file"
+        />
+      </label>
     </Col>
     <Col
       md={