Summary

Improved file input instructions on mobile devices. The file input now removes drag-and-drop language on coarse pointer devices and uses “Choose from folder” as the visible instruction and aria label.

Breaking change

⚠️ This is potentially a breaking change.

Related issue

Closes #3567

Related pull requests

None.

Preview link

Preview link: N/A

Problem statement

The file input displayed “Drag file here or choose from folder” on mobile devices, where dragging a file from another window is not a sensible interaction. This could make the instruction confusing for mobile users and assistive technology users.

Solution

Updated the file input instructions to detect coarse pointer devices and hide the drag-and-drop instruction in that context. Desktop file inputs keep the existing “Drag file here or choose from folder” instruction, while coarse pointer devices show and announce “Choose from folder.”

Major changes

• Added coarse pointer detection for file input instructions.
• Removed visible drag text on coarse pointer devices.
• Updated the default aria-label to match the visible mobile-safe instruction.
• Added unit coverage for desktop and coarse pointer instruction behavior.

Testing and review

Tested locally with:

npx prettier --check packages/usa-file-input/src/index.js packages/usa-file-input/src/test/single-file-input.spec.js
ESLINT_USE_FLAT_CONFIG=true npx eslint --config='eslint.config.mjs' packages/usa-file-input/src/index.js packages/usa-file-input/src/test/single-file-input.spec.js
./node_modules/.bin/mocha --require jsdom-global/register packages/usa-file-input/src/test/*.spec.js
git diff --check