Created by: tmorehouse
Firefox does not correctly work with the input[type="file"]:focus ~ .custom-file-control sibling selector, as it considers the browse button inside the file input to have focus and not the actual input[type="file"), when either clicking the browse button or tabbing into the input.
See the answer for question https://stackoverflow.com/questions/20095105/input-type-file-focus-adjacent-selector-in-css (its an old question from 2015, but it is still applicable).
Proposed solution:
The <label> wrapper does make focus styling work for mouse users, but does not work for keyboard users (the inner browse button of the file input gets focus, not the actual file input when tabbing into the file input).
Adding a focusin/focusout handler (in helpers.js) that adds/removes the class .focus, and adding the class selector in _custom-forms.scss addresses this issue.