FileDropzone

Role and semantics

Inside the zone is a real “Choose files” button (Button); it opens the file chooser, and the description and error are linked to it with aria-describedby too. The visually hidden native input type="file" is named by the label and submits the files with the form, but it is not in the tab order. The zone is only for pointer dragging and clicking; keyboard and screen reader users use the button. When more than one file is rejected, each one has its own line in a list named “Files not added”. Chosen files are in a list named “Chosen files”; each Remove button carries the file name.

Keyboard

Key	Behaviour
Tab	To the “Choose files” button; then to each retry and Remove button.
Enter, Space	Opens the file chooser.

Focus

The focus ring is drawn around the “Choose files” button. When a file is removed or its upload is cancelled, focus returns to the “Choose files” button so it is not lost with the button that went away.

Screen reader output

Example	Output
Button	“Choose files, button, PDF or image, up to 2 MB each.”
Files added	“2 files added”
Removed	“a.pdf removed”
Rejected	“a.txt: this file type is not accepted”
Uploads finished	“1 of 2 files uploaded, 1 files failed”
Remove button while uploading	“Cancel upload of a.pdf, button”

Contrast

The dashed border has 3:1 against the background, text 4.5:1.

WCAG 2.2

Criterion	How FileDropzone meets it	What product teams must do
2.1.1 Keyboard	A native file input.	—
2.5.7 Dragging movements	Dragging is not required; the chooser is always there.	—
3.3.1 Error identification	A reason for every rejected file.	Write server errors with error.
4.1.3 Status messages	Adding and removing are announced.	Announce upload progress.