Skip to content

fix(core): include selected filenames in FileInput trigger name#3989

Open
bhamodi wants to merge 1 commit into
facebook:mainfrom
bhamodi:a11y/fileinput-trigger-name
Open

fix(core): include selected filenames in FileInput trigger name#3989
bhamodi wants to merge 1 commit into
facebook:mainfrom
bhamodi:a11y/fileinput-trigger-name

Conversation

@bhamodi

@bhamodi bhamodi commented Jul 15, 2026

Copy link
Copy Markdown
Contributor

Summary

The FileInput trigger is a role="button" div that sets aria-label={label} (FileInput.tsx:737). Per accname computation, aria-label suppresses the element's child content from the accessible name -- and the selected filenames render as children (fileNames in both renderDropzoneContent and renderCompactContent). So a screen-reader user who tabs back to the control after selecting files hears only the field label, with no way to tell what (if anything) is attached. The one-time pick announcement from #3447 (7d90206, useAnnounce) is transient by design; the persistent name never reflected the selection.

This composes the filenames into the label: aria-label={hasFiles && fileNames ? ${label}, ${fileNames} : label}. With files selected the trigger reads e.g. "Document, report.pdf"; with none it stays exactly the label. It reuses the existing hasFiles/fileNames derivations (already comma-joined for multiple files) -- no renderer restructuring, no new strings.

Prior FileInput a11y work: 7dfac3a (#3404, forms-6) moved aria-describedby/required/invalid onto this same focusable trigger, and 7d90206 (#3447, forms-17) added the pick-time live-region announcement. This fills the remaining gap: the persistent accessible name.

Changes

  • FileInput/FileInput.tsx: compose the trigger's aria-label from the label plus fileNames when files are selected (one attribute; falls back to plain label when empty), with a comment explaining why child content alone is not enough.
  • FileInput/FileInput.test.tsx: new trigger accessible name describe block (4 tests) -- single file included in the name, multiple files all present (comma-joined), no files means the name is exactly the label, and dropzone mode covered.
  • .changeset/fileinput-trigger-name.md: patch changeset.

Test plan

  • node_modules/.bin/vitest run --root . packages/core/src/FileInput -- 53 pass (was 49). The 3 positive new tests (single, multiple, dropzone) fail pre-fix with the trigger named only "Document"/"Files"/"Upload"; the label-only test guards against regression in the empty state.
  • node_modules/.bin/vitest run --root . packages/core -- 4585 pass, 203 files (full core suite).
  • node_modules/.bin/tsc --project packages/core/tsconfig.json --noEmit -- clean.
  • node_modules/.bin/eslint + prettier --check on changed files -- clean.

Notes

Found during a broader a11y audit of core components; scoped to one fix per PR.

@vercel

vercel Bot commented Jul 15, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
astryx Ready Ready Preview, Comment Jul 15, 2026 2:34pm

Request Review

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Meta Open Source bot. label Jul 15, 2026
@github-actions github-actions Bot added community Authored by a community contributor (not on the eng/design team) needs:code-review High-risk change (new package/component/API) — needs human code review before merge labels Jul 15, 2026
@github-actions

Copy link
Copy Markdown
Contributor

PR Analysis Report

No new or modified components detected.

Bundle Size Summary

Package Size (ESM) Size (CJS) Gzipped
@astryxdesign/core N/A 4.6KB 0B

Accessibility Audit

Status: No accessibility violations detected.


Generated by PR Enrichment workflow | View full report

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Meta Open Source bot. community Authored by a community contributor (not on the eng/design team) needs:code-review High-risk change (new package/component/API) — needs human code review before merge

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant