diff --git a/js/src/helper.js b/js/src/helper.js
index 5e594502fe96ff1004c7cff86bddcd83e4556fc2..07664f00d90f30938dc26a45e30cf1c1e130d523 100644
--- a/js/src/helper.js
+++ b/js/src/helper.js
@@ -25,8 +25,10 @@ const Helper = (() => {
   }
 
   const Event = {
-    INPUTCHANGE : `change${EVENT_KEY}`,
-    FORMRESET   : `reset${EVENT_KEY}`
+    INPUTCHANGE   : `change${EVENT_KEY}`,
+    FORMRESET     : `reset${EVENT_KEY}`,
+    INPUTFOCUSIN  : `focusin${EVENT_KEY}`,
+    INPUTFOCUSOUT : `focusout${EVENT_KEY}`
   }
 
   const ClassName = {
@@ -41,6 +43,16 @@ const Helper = (() => {
     }
   }
 
+  function handleFocusin() {
+    // Needed for keyboard users in firefox
+    $(this).addClass('focus')
+  }
+
+  function handleFocusout() {
+    // Needed for keyboard users in firefox
+    $(this).removeClass('focus')
+  }
+
   function handleFormReset() {
     const $filesControl = $(this).find(`.${ClassName.CUSTOMFILE}`).children(`.${ClassName.CUSTOMFILECONTROL}`)
     if ($filesControl.length > 0) {
@@ -55,7 +67,10 @@ const Helper = (() => {
    */
 
   $(document).on(Event.INPUTCHANGE, Selector.CUSTOMFILE, handleInputChange)
+  $(document).on(Event.INPUTFOCUSIN, Selector.CUSTOMFILE, handleFocusin)
+  $(document).on(Event.INPUTFOCUSOUT, Selector.CUSTOMFILE, handleFocusout)
   $(document).on(Event.FORMRESET, Selector.FORM, handleFormReset)
+
 })($)
 
 export default Helper
diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 41dae4d7605ec39ee7f8c1bf4891b73d5fe5fb61..bbca225f73642e30747704ba2545f0c4abfe3c38 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -205,7 +205,8 @@
   margin: 0;
   opacity: 0;
 
-  &:focus ~ .custom-file-control {
+  &:focus ~ .custom-file-control,
+  &.focus ~ .custom-file-control {
     box-shadow: $custom-file-focus-box-shadow;
   }
 }