Wrap inputs in label tag

[mmazanec22]

Describe the bug

In Internet Explorer 10 on Windows 7 using the pattern described in the USWDS documentation, only the label is clickable and the area that appears to be clickable does not trigger any events. Changing the component code to wrap the entire thing in the label fixed it:

    <label htmlFor={id}>{label}
      {ariaDescribedByText && (
        <span id={`${id}-aria-describedby`}> {ariaDescribedByText}</span>
      )}
      <input
        id={id}
        type="file"
        className="usa-file-input"
        aria-describedby={
          ariaDescribedByText ? `${id}-aria-describedby` : undefined
        }
        onChange={onChange}
      />
    </label>

Steps to reproduce the bug

1. Go to the example from the docs (or a page that implements that pattern) in IE 10 on Windows 7
2. Click within the file input box-- there will be no popup to select a file
3. Click on the label-- there will be a popup to select the file

Expected behavior

I would expect that clicking on the blue underlined text would trigger the file selection popup.

System setup

• USWDS version: whatever is in the docs (we're on 2.9.0 and this also happens there)
• Device: Browserstack-- unknown
• Operating system: Windows 7
• Browser and version: IE 10

Additional context

Wrapping the input int he label fixes this issue, so it may just be a matter of updating the docs if that is the intended pattern.