MultiUpload: HTML output - place error and input elements outside of the label element

[brightpixels]

Is your feature request related to a problem? Please describe.
We are using the MultiUpload component and based on GDS guidelines, we expecting the HTML output to be in a certain way.

The MultiUpload html output is:
<label class="govuk-label" aria-controls="multiupload-id" for="multiupload-id"> <span>Upload the CSV file from your device</span> <span id="file-error-message" class="govuk-error-message">The selected file must be a CSV</span> <input type="file" id="multiupload-id" name="productCsvFile" accept=".csv" class="govuk-file-upload"> </label>

However, GDS output is (inspect the html): https://design-system.service.gov.uk/components/file-upload/error/index.html

Describe the solution you'd like
Error and input tags to be located outside the label element to match output of GDS https://design-system.service.gov.uk/components/file-upload/error/index.html

Please follow the following instruction to create the new branch:

git checkout release/0.6
git pull
git checkout -b 'feature/multi-html'

[cg-julian-taylor]

@brightpixels Should the html match GDS spec exactly? The error text we return is a different structure to what is recommended. We use a <span> tag instead of a <p> tag.

[brightpixels]

Leave it as span as long we can pass a class and the order of the element is labal, error then the upload button, we should be good.

[daniele-zurico]

PR merged