Modify file input markup to allow for focus styling (#452)

* modify markup to allow for focus styling * modify styles and html structure to make this not a breaking change * keep overflow hidden on wrapper div * v5.1.0 * revert local package changes
LaunchPadLab · Oct 22, 2020 · f172bc9 · f172bc9
1 parent f1b2695
commit f172bc9
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 40 deletions.
diff --git a/.storybook/styles/components/_forms.scss b/.storybook/styles/components/_forms.scss
@@ -270,33 +270,28 @@ Uploader
   .button-secondary-light{
     overflow: hidden;
     position: relative;
-    vertical-align: middle;
-    background-color: $grey-base;
-    box-shadow: none;
-    border: none;
-    cursor: pointer;
-    color: $white-base;
-    text-align: center;
 
-    &:hover{
-      background-color: darken($grey-base, 8%);
-    }
-
-    .fileupload-exists{
+    span{
+      background-color: $grey-base;
+      cursor: pointer;
       color: $white-base;
-    }
-  }
+      text-align: center;
+      display: block;
+      @include rem(padding, 20px 0px);
+      color: $black-base;
+
+      &:hover{
+        background-color: darken($grey-base, 8%);
+      }
 
-  &.fileupload-exists{
-    div{
-      padding: 0px !important;
+      &.fileupload-exists{
+        color: $white-base;
+      }
+    }
 
-      span{
-        //border: 1px solid $grey-base;
-        display: inline-block;
-        //@include rem(padding, 15px);
-        @include rem(margin, 20px 0px);
-        color: $black-base;
+    &.fileupload-exists{
+      div{
+        padding: 0px !important;
       }
     }
   }
@@ -310,6 +305,18 @@ Uploader
     filter:alpha(opacity=0);
     transform:translate(-300px, 0) scale(4);
     cursor: pointer;
+
+    &:focus + span{
+      outline-width: 2px;
+      outline-style: solid;
+      outline-color: Highlight;
+
+      /* WebKit gets its native focus styles. */
+      @media (-webkit-min-device-pixel-ratio:0){
+        outline-color: -webkit-focus-ring-color;
+        outline-style: auto;
+      }
+    }
   }
 }
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@launchpadlab/lp-components",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "engines": {
     "node": "^8.0.0 || ^10.13.0 || ^12.0.0"
   },

diff --git a/src/forms/inputs/file-input/file-input.js b/src/forms/inputs/file-input/file-input.js
@@ -114,22 +114,23 @@ class FileInput extends React.Component {
     return (
       <LabeledField { ...this.props }>
         <div className="fileupload fileupload-exists">
-          { 
-            !hidePreview &&
-            renderPreview({ file, value, ...rest })
-          }
-          <div className={ wrapperClass }>
-            <span className="fileupload-exists"> Select File </span>
-              <input 
-                {...{
-                  id: name,
-                  name,
-                  type: 'file',
-                  onChange: this.loadFile,
-                  accept,
-                  'aria-describedby': hasInputError(meta) ? generateInputErrorId(name) : null,
-                }}
-              />
+          {!hidePreview && renderPreview({ file, value, ...rest })}
+          <div className={wrapperClass}>
+            <input
+              {...{
+                id: name,
+                name,
+                type: 'file',
+                onChange: this.loadFile,
+                accept,
+                'aria-labelledby': name + '-label',
+                'aria-describedby': hasInputError(meta)
+                  ? generateInputErrorId(name)
+                  : null,
+              }}
+            />
+            {/* Include after input to allowing for styling with adjacent sibling selector */}
+            <span className='fileupload-exists' id={name + '-label'}> Select File </span>
           </div>
         </div>
       </LabeledField>