File hint and datetime fieldset

file-hint-and-datetime-fieldset

File: `hintText` states max size / types / count; `dragAreaText` names drag-and-drop; `addedFileAriaText` is read before the filename; `removeFileText` names remove. Dual-cite USWDS prefer-one-file. Datetime combo: wrap date+time in a fieldset with a legend; desktop uses external HintText/StatusText ids on `aria-describedby`; mobile uses built-in hint/status because fields stack.

Description

Suomi.fi file inputs expose hint text for max size, types, and count, name drag-and-drop and remove strings, and place added-file screen-reader text before the filename (dual-cite USWDS prefer-one-file). Date-plus-time combos wrap both controls in a fieldset with a legend; desktop wires external HintText/StatusText ids through `aria-describedby`, while mobile uses built-in hint/status on stacked fields. Missing file constraints or unrelated date/time fields without a shared legend fail the pattern.

When to use

Building file upload fields or combined date-and-time entry patterns.

Not when

Single text fields, or date-only / time-only controls that are not a combo.

Agent hint

State file size/types/count hints; wrap date+time in a fieldset with the cited describedby pattern.

Pass

File hints name size/types/count; drag and remove strings are named; added-file SR text precedes the filename. Date+time share a fieldset/legend; desktop external hint/status ids; mobile built-in hint/status on stacked fields.

Fail

File input has no size/types/count hint; date+time are unrelated fields with no shared legend; desktop omits external describedby ids while claiming this pattern.

Citations

Suomi.fi — FileInput · Date+time pattern https://designsystem.suomi.fi/patterns/datetime/

https://designsystem.suomi.fi/components/fileinput/