fix(settings): advance focus and set IME hints on the password form

[vbudhram]

Because

• On Android, the keyboard showed "Go" on the new password field. The key did nothing, because the submit button stays disabled until the form is valid.
• Enter in the new password field did not move the user to the confirm field.

This pull request

• Adds enterKeyHint and onKeyDown props to InputText, and forwards both through InputPassword.
• Sets enterKeyHint="next" on the new password field when the confirm field renders, and "done" when it does not.
• Sets enterKeyHint="done" and a DOM ref on the confirm field in FormPasswordWithInlineCriteria.
• Adds an onKeyDown handler. On Enter it moves focus to the confirm field and does not submit the form. Some browsers ignore enterKeyHint, so the label alone is not enough.
• Ignores the Enter key that ends an IME composition. The input method keeps that key.

Issue that this pull request solves

Closes: https://mozilla-hub.atlassian.net/browse/FXA-12595

Checklist

Put an x in the boxes that apply

• My commit is GPG signed.
• If applicable, I have modified or added tests which pass locally.
• I have added necessary documentation (if appropriate).
• I have verified that my changes render correctly in RTL (if appropriate).
• I have manually reviewed all AI generated code.

How to review (Optional)

• Key files/areas to focus on: the onNewPwdKeyDown handler and the confirm field ref in FormPasswordWithInlineCriteria/index.tsx. The two new props in InputText/index.tsx are pass-through only.
• Suggested review order: InputText, then InputPassword, then FormPasswordWithInlineCriteria, then the tests.
• Risky or complex parts: the composition guard reads event.nativeEvent.isComposing. userEvent cannot set that flag, so that test uses fireEvent and asserts on the return value.

Screenshots (Optional)

No screenshots. The change is not visible on desktop. Only the label on the mobile soft keyboard changes.

Other information (Optional)

Local results:

• The InputText, InputPassword and FormPasswordWithInlineCriteria test files: 25 passed, 0 failed.
• nx lint fxa-settings: exit 0.

The Playwright functional tests did not run here. CI runs them.

Review round one asked for two more tests. This branch now checks that Enter still submits the signup form, which has no confirm field, and that the composing Enter is not cancelled.

[Copilot]

🔵 Needs a closer look

Android IME behavior requires device validation, and key handler branches need stronger tests.

Pull request overview

Improves password-form keyboard behavior and Android IME hints.

Changes:

• Forwards enterKeyHint and onKeyDown through password inputs.
• Advances Enter focus to confirmation while preserving IME composition.
• Adds component tests and injectable form submission mocks.

File summaries

File	Description
packages/fxa-settings/src/components/InputText/index.tsx	Adds keyboard hint and handler props.
packages/fxa-settings/src/components/InputText/index.test.tsx	Tests the new props.
packages/fxa-settings/src/components/InputPassword/index.tsx	Forwards the new input props.
packages/fxa-settings/src/components/InputPassword/index.test.tsx	Tests prop forwarding.
packages/fxa-settings/src/components/FormPasswordWithInlineCriteria/mocks.tsx	Supports injected submit handlers.
packages/fxa-settings/src/components/FormPasswordWithInlineCriteria/index.tsx	Adds focus advancement and IME handling.
packages/fxa-settings/src/components/FormPasswordWithInlineCriteria/index.test.tsx	Tests hints and Enter behavior.

Review details

Suppressed comments (2)

packages/fxa-settings/src/components/InputText/index.test.tsx:74

• This ordinary keyboard interaction uses fireEvent, which bypasses the real focus/input/keydown sequence. The component-test convention in .claude/rules/testing/react.md:36-49 requires userEvent here; make the test async, target the input by its label, and send Enter with userEvent (unlike the IME test, this case does not need a synthetic isComposing value).

    fireEvent.keyDown(screen.getByTestId('input-field'), { key: 'Enter' });

packages/fxa-settings/src/components/InputPassword/index.test.tsx:63

• This ordinary keyboard interaction uses fireEvent, which bypasses the real focus/input/keydown sequence. The component-test convention in .claude/rules/testing/react.md:36-49 requires userEvent here; make the test async, target the input by its label, and send Enter with userEvent (unlike the IME test, this case does not need a synthetic isComposing value).

  fireEvent.keyDown(screen.getByTestId('input-field'), { key: 'Enter' });

• Files reviewed: 7/7 changed files
• Comments generated: 2
• Review effort level: Balanced

---

💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

Copilot review overview

🟢 Approval recommended

The implementation is focused and correct, with only non-blocking test-maintainability feedback remaining.

Review effort: Balanced
Findings: None

Resolved since last review (2)

• The IME test only checks focus, so it would still pass if the handler called preventDefault() and…
• This verifies the hint but not the handler's no-confirm path. If the handler later prevents every…

[Copilot]

Copilot review overview

🟢 Approval recommended

The focused behavior change preserves form submission semantics and has adequate regression coverage.

Review effort: Balanced
Findings: None