Modify file input markup to allow for focus styling

[danparnella]

Enables focus styling on the span (when focusing on the input) by moving it after the input, which allows for the use of adjacent sibling css selector (+).

Author Checklist

• [x] Add unit test(s)
  • I attempted to add one to check for a style change, but doesn't look like there's a good way to grab non-inline styles applied by external css files. Open to any ideas on how to apply a test here!
• [x] Update version in package.json (see the versioning guidelines)
  • Would you consider this a patch or minor update?
• [x] Update documentation (if necessary)
  • Should anything be updated to mention adding adjacent sibling focus styles? I haven't seen that kind of documentation mentioned for other components.
• [x] Add story to storybook (if necessary)
• [x] Assign dev reviewer

[danparnella]

I was able to convert this to a non-breaking change by keeping the wrapperClass on the wrapping div and just making additional style modifications to achieve what we're looking for (a highlight outline around the whole file input "button"). If no style changes are made on current projects, there will be no breaking change to the component.

Current projects can even just add focus styles to the, now adjacent, span (without modifying any other styles) to at least provide an outline around the text of the "button".

Otherwise, the "button" specific styles can be moved from the wrapperClass to the inner span to achieve the ideal state.