Add guidance about HTML attributes to File Upload component

Co-authored-by: Calvin Lau <77630796+calvin-lau-sig7@users.noreply.github.com>

Author: selfthinker

src/components/file-upload/index.md

@@ -108,6 +108,30 @@ This example shows you how to enable the improved File upload component:
 
 {{ example({ group: "components", item: "file-upload", example: "enhanced", html: true, nunjucks: true, open: false, size: "m" }) }}
 
+### About HTML attributes
+
+Some HTML attributes applied to the input might not work or work differently.
+
+JavaScript creates the improved version of the component out of the file input and then hides the input. The improved version consists of a button with a few `<span>`s.
+
+It takes some of its HTML attributes from the original file input:
+
+- `id` and its value are added to the button and renamed on the input
+- `disabled` is copied and synchronised with any changes that happen on the input
+- `multiple` is not directly copied but the behaviour of the button is adjusted accordingly
+- `aria-describedby` is copied
+
+It leaves some attributes on the original file input because they only work on there, such as:
+
+- `name`
+- `accept`
+- `capture`
+- `accesskey`
+
+To add other attributes to the improved version, you'll have to either add them to the parent `<div>` or via JavaScript to the button.
+
+Screen readers will not read out the `required` attribute in the improved version. Although we [recommend not to use that attribute](/patterns/validation/#turn-off-html5-validation).
+
 ### Changes in the improved component
 
 To make it easier for users to drag and drop files, we’ve made the drop zone: