[fxa-agent]

Because

• Chrome Translate replaces the bare • text nodes in the password rules with <font> elements.
• On the first keystroke, React tries to remove a text node that is no longer in the page. It throws NotFoundError.
• The error boundary then shows the error page. This happens in Chromium only.

This pull request

• Changes PasswordStrengthInline/index.tsx. Each • is now inside <span translate="no">.
• Each of the 5 bullet and icon pairs is now one ternary. It shows the bullet span or the ValidationIcon.
• The conditions and hasError values are the same. The rendered output looks the same.

Risk

Risk: Medium (the worst of the three below)

• Merge risk: Medium. 1 file, +19 -10: settings and React UI.
• Rollback: Easy. A plain revert; it ships on the next train.
• Verification: Partial. 9 checks pass; no test is shown to fail without the fix. A screenshot or video is attached.
• Would not catch: real Chrome Translate in Chromium. The local checks used jsdom with a simulated swap, and the functional tests ran in Firefox.

Issue that this pull request solves

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

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: packages/fxa-settings/src/components/PasswordStrengthInline/index.tsx
• Suggested review order: one file, top to bottom.
• Risky or complex parts: none. The change is markup only.

Screenshots (Optional)

No visible change. Videos of the two functional flows are attached.

Other information (Optional)

Tests I ran:

• PasswordStrengthInline/index.test.tsx: passed.
• ESLint, Prettier and tsc --noEmit for fxa-settings: passed.
• Related fxa-settings tests, sibling files only: passed. 108 related tests were not run.
• Functional, local stack, Firefox: signup.spec.ts "signup web" passed.
• Functional, local stack, Firefox: resetPassword.spec.ts "can reset password" passed.
• CI runs the full suite.

Reproduction check, not in the PR:

• A temporary spec replaced each bullet text node with <font>•</font>. Then it re-rendered with a non-empty password.
• It also did this for the confirm-match slot (passwordFormType "reset").
• On main: 2 of 2 failed with NotFoundError. With this change: 2 of 2 passed.
• I deleted the spec, so the PR has no test file changes.

Follow-up, out of scope: packages/fxa-settings/src/lib/recovery-phone-utils.tsx also returns a bare • string.

Merge Confidence: 4/5

Wraps each password-requirement bullet in a <span translate="no"> to prevent browser translation from replacing the bullet text node. The existing conditions and validation icons remain unchanged. The change is limited to the password-strength component.

Test results are not verified from the supplied evidence.

[coderabbitai]

No actionable comments were generated in the recent review.

Recent review info

Run configuration

• Source mode: Auto
• Repository: mozilla/fxa
• Branch: main
• File: .coderabbit.yaml
• Commit: 3f78fe7
• Layers: Repository YAML
• Review profile: CHILL
• Plan: Enterprise
• Run ID: 28ca299d-38bc-475d-a47a-dd2c41fbb07f

Commits

Reviewing files that changed from the base of the PR and between 3f78fe7 and 57e0453.

Files selected for processing: 1

• packages/fxa-settings/src/components/PasswordStrengthInline/index.tsx

Included review availability: This review used your included allowance. Your plan provides up to 12 included reviews per hour; 11 remain after this review.

Recent review details

Context from checks skipped due to timeout: 2

• GitHub Check: test_pull_request
• GitHub Check: Build Storybooks

Additional context used

Code guidelines: 3

.claude/rules/code-comments.md — configured
2 cross-repository guideline sources

Path-based instructions: 5

Apply the repository's documented coding guidelines as review criteria, and cite the specific guideline when flagging a deviation.

CodeRabbit configuration file

Files:

• packages/fxa-settings/src/components/PasswordStrengthInline/index.tsx

Source excerpt: A commit message says what changed.

CodeRabbit inference engine (.claude/rules/code-comments.md)

Files:

• packages/fxa-settings/src/components/PasswordStrengthInline/index.tsx

Source excerpt: Our convention for naming FTL id: FTL IDs should be all lower-case alphanumeric characters.

CodeRabbit inference engine (mozilla/ecosystem-platform:docs/reference/localization.md)

Files:

• packages/fxa-settings/src/components/PasswordStrengthInline/index.tsx

Source excerpt: title: Localization :::warning Gettext is on its way out The Backbone client that consumed the gettext `.po` catalogues was deleted in October 2026 ([#21585](https://github.com//pull/21585)).

CodeRabbit inference engine (mozilla/ecosystem-platform:docs/reference/localization.md)

Files:

• packages/fxa-settings/src/components/PasswordStrengthInline/index.tsx

Source excerpt: Only include one React component per file.

CodeRabbit inference engine (mozilla/ecosystem-platform:docs/reference/style-guides/react-style-guide.md)

Files:

• packages/fxa-settings/src/components/PasswordStrengthInline/index.tsx

Additional comments: 1

packages/fxa-settings/src/components/PasswordStrengthInline/index.tsx: 1

73-74: LGTM!

Also applies to: 85-86, 97-98, 110-111, 129-130

Walkthrough

Password requirement indicators now wrap empty-state bullets in spans marked translate="no". Validation icons and the conditions that select bullets or icons are unchanged.

Changes: Password indicators

Layer / File(s)	Summary
Mark empty-state bullets as non-translatable packages/fxa-settings/src/components/PasswordStrengthInline/index.tsx	The minimum-length, not-email, not-common, and password-match indicators wrap their empty-state bullets in spans marked translate="no". Validation icon paths and display conditions are unchanged.

Estimated code review effort: 1 (Trivial) | ~4 minutes

Change: Bug fix

Suggested reviewers: dschom

Merge Risk: Minimal · up to 57e04

The change is ready to merge with no identified functional or availability risk.

Pre-merge checks: 8

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title uses the required fix(scope): subject format, identifies the settings scope and password strength bullet change, uses imperative present tense, starts the subject in lowercase, has no trai…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.
Sensitive Data Protection And Privacy		PASS. The pull request changes only PasswordStrengthInline/index.tsx. It replaces bare bullet text with span translate="no" elements and preserves existing validation conditions. The diff adds no …
Security, Audit, And Regulatory Control Integrity		PASS: The pull request changes only PasswordStrengthInline/index.tsx. It wraps existing bullet characters in span translate="no" elements and preserves the existing password validation conditions …
Performance And Algorithmic Complexity Review		The PR changes only PasswordStrengthInline/index.tsx. It replaces five bare bullet text nodes with translate="no" spans and equivalent ternary branches. The change adds no loops, data-store calls,…
Database Migration Safety		The pull request changes only packages/fxa-settings/src/components/PasswordStrengthInline/index.tsx. No file under packages/db-migrations/databases/*/patches/ or any target-patch.json is modifie…

Full details: Title check

Explanation

The title uses the required fix(scope): subject format, identifies the settings scope and password strength bullet change, uses imperative present tense, starts the subject in lowercase, has no trailing period, and is 69 characters long.

Full details: Sensitive Data Protection And Privacy

Explanation

PASS. The pull request changes only PasswordStrengthInline/index.tsx. It replaces bare bullet text with span translate="no" elements and preserves existing validation conditions. The diff adds no logging, metrics, Sentry events, error messages, data collection, third-party integrations, credentials, or query/cache changes.

Full details: Security, Audit, And Regulatory Control Integrity

Explanation

PASS: The pull request changes only PasswordStrengthInline/index.tsx. It wraps existing bullet characters in span translate="no" elements and preserves the existing password validation conditions and hasError values. The diff contains no changes to authentication, session or token validation, rate limiting, cryptography, webhook verification, audit logging, or PCI/GDPR controls.

Full details: Performance And Algorithmic Complexity Review

Explanation

The PR changes only PasswordStrengthInline/index.tsx. It replaces five bare bullet text nodes with translate="no" spans and equivalent ternary branches. The change adds no loops, data-store calls, unbounded state, synchronous expensive work, or new React rerender paths. The existing useMemo dependency and validation conditions remain unchanged.

Full details: Database Migration Safety

Explanation

The pull request changes only packages/fxa-settings/src/components/PasswordStrengthInline/index.tsx. No file under packages/db-migrations/databases/*/patches/ or any target-patch.json is modified, added, or deleted. The database migration safety conditions are therefore not triggered.

Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

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

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