Make the folder fields a button, so Chromium draws none of their text

[ryanwelcher]

Why

The folder fields in the create-site dialog ("Location") and the settings ("New sites go here") were a native file input. Chromium draws that input's "Choose Files" button and "No file chosen" in its own language, which follows the OS or --lang but not the language chosen in the settings, and has no en-XA pack. So with an English OS and Dutch chosen in the settings, those two strings stay English. Screen readers also heard "No file chosen" in English, as the input's value.

What changes

• Button instead of input. Each folder field is now a design-system button that says "Choose folder…" and opens the system's folder dialog, as the input's click already did. Every string in the field is now ours.
• Accessible name and description. The button is named by the field label and its own text ("Location Choose folder…"), so a voice control user can say what they see. The folder line is a field description, so a screen reader hears the chosen folder, or "No folder selected yet.", on the button.
• Drop path removed. Dropping a folder on the input was the one thing it did that a button can't, and Dropping a folder on the Create site location button is half-supported #228 closed that route as unsupported (it resolved to '' or C:\fakepath). Its handler and directoryFromFileEntry go, along with the three unit tests that recorded that unsupported route.

How to test this

The en-XA journey covers what was reported: npx playwright test --project=journeys tests/e2e/journeys/i18n.spec.js from the repository root. Its two new checks, one per field, fail without this change and pass with it. tests/e2e/journeys/create-site.spec.js checks the button's description before and after a folder is chosen.

What the journeys can't reach is the real system dialog, so by hand, on either platform, on the current head:

Starting state: the app open with no sites, or any state with the Create site button.

1. Click Create site. Under Location there is a Choose folder… button and "No folder selected yet." under it.
2. Click Choose folder…. The system's folder dialog opens. Pick a folder. Its path replaces "No folder selected yet.".
3. Tab to the button and press Enter, then Space. Each opens the dialog. Cancel it. The path from step 2 is still there.
4. Open Settings (gear in the footer). Under New sites go here, Choose folder… does the same, and Forget this folder appears once a folder is chosen.
5. Optional: with VoiceOver or NVDA on, focus the button. It is read as "Location, Choose folder…, button", followed by the folder line.

What must not have happened: pressing Choose folder… inside the create-site dialog must not submit the form (no "Please provide a site name." appears). Under npx electron . --lang=en-XA, neither field shows "Choose Files" or "No file chosen".

Risks and limitations

• Dropping a folder on the field no longer does anything. Before, it set C:\fakepath or nothing, per Dropping a folder on the Create site location button is half-supported #228.
• The folder line now uses the description's grey instead of body text colour.
• The app menu's standard items (Edit, View, Window…) and the OK/Cancel of alert() and confirm() are other places Electron draws English. They are out of scope here.

Related

Fixes #655. Part of #659, under #622.

---

Design decisions and alternatives considered

The issue first proposed keeping the input and hiding Chromium's text with CSS (::file-selector-button and a transparent colour), with our own label drawn over it. That fixes the screen but not the accessibility tree: Chromium still reports the input's value as "No file chosen" in English, and CSS can't change that. Once the drop route is accepted as unsupported, the input adds nothing a button doesn't, so it goes.

The name is set with an explicit aria-labelledby over a span in the label and a span in the button, because Field.Control otherwise names its control by the label alone. Props passed to Field.Control are merged after its own, so the explicit value wins.

Review outcome (required — see AGENTS.md)

• Review 1: completed. Fresh-context agent on the uncommitted tree over base c328144. 2 [fix here] · 0 [follow-up], both fixed:
  • The docs screenshot showed the old input. Regenerated with npm run shots, and only create-site-modal.png is committed (the other captures drifted with nothing in them changed by this PR).
  • The button's name was the label alone and it didn't carry the chosen folder. Fixed as described above.
  • A wording note in site-folder.cjs was applied too.
• Review 2: completed. Fresh-context agent on c2a819d / base c328144. 0 [fix here] · 1 [follow-up]. It confirmed both fixes against Base UI's source. The follow-up predates this PR: chooseFolder in create-site-dialog.jsx swallows a failed chooseDirectory() with an empty catch. The settings field's choose does the same. Deferred, since it is unrelated to the translation.
• Since review: none. The head is c2a819d.
• CodeRabbit: not requested yet.
• Checks: lint clean, unit 2078 passed, journeys 147/147 passed.

Screenshots or recording

Before: Chromium's file input, "Choose Files" and "No file chosen", in English under every language.

After:

🤖 Generated with Claude Code

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

• Configuration used: Repository: WordPress/contributor-toolkit/.coderabbit.yaml
• Review profile: CHILL
• Plan: Advanced
• Run ID: b256f46b-855a-4103-b8c8-6810ebbc79eb

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

• Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}