chore(clerk-js): Add title attribute to email field #6956
Conversation
🦋 Changeset detectedLatest commit: 460c534 The changes in this PR will be included in the next version bump. This PR includes changesets to release 22 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
💡 Enable Vercel Agent with $100 free credit for automated AI reviews |
WalkthroughAdds accessibility improvements to email input fields by implementing a title attribute with localized format guidance. Modifies the Input component to support localization, adds a new Changes
Sequence DiagramsequenceDiagram
actor User
participant Input as Input Component
participant i18n as Localization (i18n)
participant Browser
User->>Input: Attempt to enter email
Input->>i18n: Get localized format title<br/>(formFieldInput__emailAddress_format)
i18n-->>Input: Return localized format string<br/>(e.g., "Example format: name@example.com")
Input->>Input: Set title attribute on email field
User->>Input: Submit invalid format
Input->>Browser: Validation fails (pattern)
Browser-->>User: Show native error + title text<br/>(WCAG accessible guidance)
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Despite affecting 50+ files, the changes are highly homogeneous and repetitive. The Input component modification is straightforward localization integration. The localization file updates follow an identical pattern across all 48 language files (new key, enterprise connection scaffolding, field reordering), making batch review efficient. Type definition change is minimal. The consistency and predictability of changes—combined with the absence of complex logic or control-flow modifications—results in low cognitive load during review. Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
@clerk/agent-toolkit
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/dev-cli
@clerk/elements
@clerk/clerk-expo
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/clerk-react
@clerk/react-router
@clerk/remix
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/themes
@clerk/types
@clerk/upgrade
@clerk/vue
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 13
♻️ Duplicate comments (9)
packages/localizations/src/be-BY.ts (1)
771-774: Inconsistent with PR objectives:enterpriseConnectionsaddition not explained.Similar to the addition in
signIn.emailLink(lines 647-650), thisenterpriseConnectionsblock withinsignUp.emailLinkis not mentioned in the PR objectives, description, or linked issue USER-3620.Please refer to the comment on lines 647-650 for details.
packages/localizations/src/hr-HR.ts (1)
769-772: Same scope concern:enterpriseConnectionsin signUp.Similar to the
signInsection, thisenterpriseConnectionsaddition insignUpappears outside the scope of adding email field title attributes (USER-3620).Please see the comment on lines 643-646 regarding verification of these enterprise connection changes.
packages/localizations/src/pt-PT.ts (1)
765-768: Same concern: enterpriseConnections addition unrelated to PR objective.Similar to the
signIn.enterpriseConnectionsaddition at lines 641-644, thissignUp.enterpriseConnectionsobject appears unrelated to the PR's stated objective of adding email field title attributes for accessibility.Please see the comment on lines 641-644 regarding scope clarification.
packages/localizations/src/he-IL.ts (1)
760-763: Same concern:enterpriseConnectionsscope unclear.The
signUp.emailLink.enterpriseConnectionssection has the same issues noted forsignIn.emailLink.enterpriseConnectionsat lines 636-639. Please clarify whether this is intentionally included in this PR or represents unintended scope expansion.packages/localizations/src/th-TH.ts (1)
768-771: Duplicate: VerifyenterpriseConnectionsadditions.Same concern as the
signIn.enterpriseConnectionssection (lines 644-647) - these additions are inconsistent with the PR's stated objectives.packages/localizations/src/da-DK.ts (1)
766-769: Duplicate concern: Unrelated enterpriseConnections addition.Same as the previous
enterpriseConnectionsblock at lines 642-645, this addition is unrelated to the email accessibility improvements.packages/localizations/src/nb-NO.ts (1)
767-770: Same scope concern: Enterprise connections in sign-up flow.Similar to the sign-in flow (Lines 642-645), this
enterpriseConnectionsaddition in the sign-up flow appears unrelated to the email field title attribute enhancement described in the PR objectives.See previous comment regarding enterprise connections scope verification.
packages/localizations/src/hi-IN.ts (1)
770-773: Undefined enterprise connections block (same as signIn).The
signUp.emailLink.enterpriseConnectionsblock mirrors the same pattern as in signIn (lines 644-647) with undefined values forsubtitleandtitle. The same concerns apply regarding Hindi translations and PR scope.packages/localizations/src/de-DE.ts (1)
782-785: Clarify the scope of enterpriseConnections additions (duplicate concern).Similar to the
signIn.enterpriseConnectionssection (lines 655-658), thissignUp.enterpriseConnectionsaddition is not explained in the PR objectives.This mirrors the same scope concern raised for lines 655-658. Please address both
enterpriseConnectionssections together and clarify whether they belong in this PR or should be separated.
🧹 Nitpick comments (13)
packages/localizations/src/sv-SE.ts (1)
223-223: New localization key correctly added for email format accessibility.This key aligns with the PR objective to add a
titleattribute to email input fields for WCAG 3.3.2 compliance. Theundefinedplaceholder is consistent with the community-maintained nature of this locale (see disclaimer at lines 3-11).If a Swedish translation is available, consider providing it. For reference, the English version would typically be something like "Email format: user@example.com" or a regex pattern description.
packages/localizations/src/pt-PT.ts (1)
222-222: Consider adding Portuguese translation for accessibility compliance.The new
formFieldInput__emailAddress_formatkey aligns with the PR's WCAG 3.3.2 accessibility objective. However, theundefinedvalue means Portuguese users won't receive localized email format instructions. While this pattern is consistent with other untranslated keys in this community-contributed file, it limits the accessibility benefit for Portuguese speakers.Consider adding a Portuguese translation similar to:
- formFieldInput__emailAddress_format: undefined, + formFieldInput__emailAddress_format: 'Formato de e-mail: nome@exemplo.com',Alternatively, verify whether
undefinedvalues fall back to a default locale (e.g., en-US) to provide some guidance rather than no message at all.packages/localizations/src/he-IL.ts (1)
138-138: Minor: Clarify the reordering ofpaymentMethods__label.The
paymentMethods__labelkey appears to have been reordered within thebillingsection. While this doesn't change functionality, please confirm whether this reordering is:
- Intentional for consistency across locales
- An artifact of automated tooling
- Unrelated to this PR's objectives
If unintentional, consider reverting to minimize diff noise.
packages/localizations/src/da-DK.ts (1)
138-138: Incidental reordering unrelated to PR objective.This line appears to be a structural reorganization within the billing section and is unrelated to the PR's stated goal of adding accessibility title attributes to email fields.
Consider keeping PRs focused on a single objective. If this reordering is necessary, briefly document why it's included alongside the email accessibility changes.
packages/localizations/src/ro-RO.ts (2)
653-656: Enterprise connections text missing for Romanian users.The
enterpriseConnectionssection has undefined values for bothtitleandsubtitle, which means Romanian users won't see any text in the enterprise SSO sign-in flow.Consider providing Romanian translations for these keys to ensure a complete user experience, or verify that undefined values gracefully fall back to English or another default locale.
779-782: Enterprise connections text missing for Romanian users.Similar to the sign-in flow, the
enterpriseConnectionssection in the sign-up flow has undefined values for bothtitleandsubtitle, resulting in missing text for Romanian users in the enterprise SSO sign-up experience.Consider providing Romanian translations for these keys to complete the enterprise connections feature across all authentication flows.
packages/localizations/src/sr-RS.ts (3)
641-644: Fill in sign-in enterprise connections copy.Add short, clear Serbian strings.
- enterpriseConnections: { - subtitle: undefined, - title: undefined, - }, + enterpriseConnections: { + subtitle: 'Prijavi se sa nalogom svoje organizacije', + title: 'Korporativne veze', + },
766-769: Fill in sign-up enterprise connections copy.Mirror sign-in wording for consistency.
- enterpriseConnections: { - subtitle: undefined, - title: undefined, - }, + enterpriseConnections: { + subtitle: 'Registruj se sa nalogom svoje organizacije', + title: 'Korporativne veze', + },
222-222: Provide localized string for email format title (WCAG 3.3.2 accessibility).Currently
undefinedprevents users from receiving format guidance. Add a localized Serbian translation matching the en-US approach (static example, no interpolation variable).- formFieldInput__emailAddress_format: undefined, + formFieldInput__emailAddress_format: 'Primjer formata: ime@primer.com',The en-US locale uses
'Example format: name@example.com'as a static reference; follow the same pattern rather than interpolation placeholders.packages/localizations/src/ko-KR.ts (1)
223-223: Consider providing Korean translation for accessibility compliance.The new
formFieldInput__emailAddress_formatkey supports the PR's WCAG 3.3.2 objective by providing format instructions for email validation errors. However, with anundefinedvalue, Korean-locale users won't receive the intended accessibility benefit—browsers will display no helpful format guidance.While this may be deferred to community contributors per the file disclaimer, providing a Korean translation would ensure full accessibility coverage for this locale.
Example translation:
- formFieldInput__emailAddress_format: undefined, + formFieldInput__emailAddress_format: '이메일 형식: 유효한 이메일 주소',(Translation: "Email format: Valid email address")
packages/localizations/src/cs-CZ.ts (2)
650-653: Optional: Add Czech copy for enterprise connections (sign-in).
This avoids English fallback and keeps wording consistent with “Podnikové účty” elsewhere.- enterpriseConnections: { - subtitle: undefined, - title: undefined, - }, + enterpriseConnections: { + subtitle: 'Přihlaste se pomocí svého poskytovatele', + title: 'Podniková připojení', + },
776-779: Optional: Add Czech copy for enterprise connections (sign-up).
Keeps parity with sign-in text and avoids fallback.- enterpriseConnections: { - subtitle: undefined, - title: undefined, - }, + enterpriseConnections: { + subtitle: 'Zaregistrujte se pomocí svého poskytovatele', + title: 'Podniková připojení', + },packages/localizations/src/es-ES.ts (1)
644-647: Consider splitting unrelated localization additions into separate PR.The
enterpriseConnectionsblocks added to bothsignInandsignUpflows don't appear related to the stated PR objective of adding email format guidance for accessibility. While these additions don't cause issues, keeping PRs focused on a single objective improves reviewability and makes it easier to track changes.Also applies to: 768-771
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (52)
.changeset/eighty-coins-punch.md(1 hunks)packages/clerk-js/src/ui/primitives/Input.tsx(3 hunks)packages/localizations/src/ar-SA.ts(4 hunks)packages/localizations/src/be-BY.ts(4 hunks)packages/localizations/src/bg-BG.ts(4 hunks)packages/localizations/src/bn-IN.ts(4 hunks)packages/localizations/src/ca-ES.ts(4 hunks)packages/localizations/src/cs-CZ.ts(4 hunks)packages/localizations/src/da-DK.ts(4 hunks)packages/localizations/src/de-DE.ts(4 hunks)packages/localizations/src/el-GR.ts(4 hunks)packages/localizations/src/en-GB.ts(4 hunks)packages/localizations/src/en-US.ts(5 hunks)packages/localizations/src/es-CR.ts(4 hunks)packages/localizations/src/es-ES.ts(4 hunks)packages/localizations/src/es-MX.ts(4 hunks)packages/localizations/src/es-UY.ts(4 hunks)packages/localizations/src/fa-IR.ts(4 hunks)packages/localizations/src/fi-FI.ts(4 hunks)packages/localizations/src/fr-FR.ts(4 hunks)packages/localizations/src/he-IL.ts(4 hunks)packages/localizations/src/hi-IN.ts(4 hunks)packages/localizations/src/hr-HR.ts(4 hunks)packages/localizations/src/hu-HU.ts(4 hunks)packages/localizations/src/id-ID.ts(4 hunks)packages/localizations/src/is-IS.ts(4 hunks)packages/localizations/src/it-IT.ts(4 hunks)packages/localizations/src/ja-JP.ts(4 hunks)packages/localizations/src/kk-KZ.ts(4 hunks)packages/localizations/src/ko-KR.ts(4 hunks)packages/localizations/src/mn-MN.ts(4 hunks)packages/localizations/src/ms-MY.ts(4 hunks)packages/localizations/src/nb-NO.ts(4 hunks)packages/localizations/src/nl-BE.ts(4 hunks)packages/localizations/src/nl-NL.ts(4 hunks)packages/localizations/src/pl-PL.ts(4 hunks)packages/localizations/src/pt-BR.ts(4 hunks)packages/localizations/src/pt-PT.ts(4 hunks)packages/localizations/src/ro-RO.ts(4 hunks)packages/localizations/src/ru-RU.ts(4 hunks)packages/localizations/src/sk-SK.ts(4 hunks)packages/localizations/src/sr-RS.ts(4 hunks)packages/localizations/src/sv-SE.ts(4 hunks)packages/localizations/src/ta-IN.ts(4 hunks)packages/localizations/src/te-IN.ts(4 hunks)packages/localizations/src/th-TH.ts(4 hunks)packages/localizations/src/tr-TR.ts(4 hunks)packages/localizations/src/uk-UA.ts(4 hunks)packages/localizations/src/vi-VN.ts(4 hunks)packages/localizations/src/zh-CN.ts(4 hunks)packages/localizations/src/zh-TW.ts(4 hunks)packages/types/src/localization.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (11)
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.{js,jsx,ts,tsx}: All code must pass ESLint checks with the project's configuration
Follow established naming conventions (PascalCase for components, camelCase for variables)
Maintain comprehensive JSDoc comments for public APIs
Use dynamic imports for optional features
All public APIs must be documented with JSDoc
Provide meaningful error messages to developers
Include error recovery suggestions where applicable
Log errors appropriately for debugging
Lazy load components and features when possible
Implement proper caching strategies
Use efficient data structures and algorithms
Profile and optimize critical paths
Validate all inputs and sanitize outputs
Implement proper logging with different levels
Files:
packages/localizations/src/fa-IR.tspackages/localizations/src/sr-RS.tspackages/types/src/localization.tspackages/localizations/src/zh-CN.tspackages/localizations/src/id-ID.tspackages/localizations/src/te-IN.tspackages/clerk-js/src/ui/primitives/Input.tsxpackages/localizations/src/ru-RU.tspackages/localizations/src/nl-NL.tspackages/localizations/src/ro-RO.tspackages/localizations/src/pt-PT.tspackages/localizations/src/pt-BR.tspackages/localizations/src/en-GB.tspackages/localizations/src/de-DE.tspackages/localizations/src/cs-CZ.tspackages/localizations/src/el-GR.tspackages/localizations/src/fr-FR.tspackages/localizations/src/he-IL.tspackages/localizations/src/pl-PL.tspackages/localizations/src/es-CR.tspackages/localizations/src/be-BY.tspackages/localizations/src/es-UY.tspackages/localizations/src/ca-ES.tspackages/localizations/src/da-DK.tspackages/localizations/src/th-TH.tspackages/localizations/src/uk-UA.tspackages/localizations/src/es-MX.tspackages/localizations/src/en-US.tspackages/localizations/src/it-IT.tspackages/localizations/src/hr-HR.tspackages/localizations/src/hu-HU.tspackages/localizations/src/hi-IN.tspackages/localizations/src/sv-SE.tspackages/localizations/src/nb-NO.tspackages/localizations/src/bn-IN.tspackages/localizations/src/ms-MY.tspackages/localizations/src/vi-VN.tspackages/localizations/src/tr-TR.tspackages/localizations/src/mn-MN.tspackages/localizations/src/es-ES.tspackages/localizations/src/ta-IN.tspackages/localizations/src/nl-BE.tspackages/localizations/src/ja-JP.tspackages/localizations/src/ar-SA.tspackages/localizations/src/is-IS.tspackages/localizations/src/bg-BG.tspackages/localizations/src/zh-TW.tspackages/localizations/src/fi-FI.tspackages/localizations/src/sk-SK.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/ko-KR.ts
**/*.{js,jsx,ts,tsx,json,css,scss,md,yaml,yml}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use Prettier for consistent code formatting
Files:
packages/localizations/src/fa-IR.tspackages/localizations/src/sr-RS.tspackages/types/src/localization.tspackages/localizations/src/zh-CN.tspackages/localizations/src/id-ID.tspackages/localizations/src/te-IN.tspackages/clerk-js/src/ui/primitives/Input.tsxpackages/localizations/src/ru-RU.tspackages/localizations/src/nl-NL.tspackages/localizations/src/ro-RO.tspackages/localizations/src/pt-PT.tspackages/localizations/src/pt-BR.tspackages/localizations/src/en-GB.tspackages/localizations/src/de-DE.tspackages/localizations/src/cs-CZ.tspackages/localizations/src/el-GR.tspackages/localizations/src/fr-FR.tspackages/localizations/src/he-IL.tspackages/localizations/src/pl-PL.tspackages/localizations/src/es-CR.tspackages/localizations/src/be-BY.tspackages/localizations/src/es-UY.tspackages/localizations/src/ca-ES.tspackages/localizations/src/da-DK.tspackages/localizations/src/th-TH.tspackages/localizations/src/uk-UA.tspackages/localizations/src/es-MX.tspackages/localizations/src/en-US.tspackages/localizations/src/it-IT.tspackages/localizations/src/hr-HR.tspackages/localizations/src/hu-HU.tspackages/localizations/src/hi-IN.tspackages/localizations/src/sv-SE.tspackages/localizations/src/nb-NO.tspackages/localizations/src/bn-IN.tspackages/localizations/src/ms-MY.tspackages/localizations/src/vi-VN.tspackages/localizations/src/tr-TR.tspackages/localizations/src/mn-MN.tspackages/localizations/src/es-ES.tspackages/localizations/src/ta-IN.tspackages/localizations/src/nl-BE.tspackages/localizations/src/ja-JP.tspackages/localizations/src/ar-SA.tspackages/localizations/src/is-IS.tspackages/localizations/src/bg-BG.tspackages/localizations/src/zh-TW.tspackages/localizations/src/fi-FI.tspackages/localizations/src/sk-SK.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/ko-KR.ts
packages/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
TypeScript is required for all packages
Files:
packages/localizations/src/fa-IR.tspackages/localizations/src/sr-RS.tspackages/types/src/localization.tspackages/localizations/src/zh-CN.tspackages/localizations/src/id-ID.tspackages/localizations/src/te-IN.tspackages/clerk-js/src/ui/primitives/Input.tsxpackages/localizations/src/ru-RU.tspackages/localizations/src/nl-NL.tspackages/localizations/src/ro-RO.tspackages/localizations/src/pt-PT.tspackages/localizations/src/pt-BR.tspackages/localizations/src/en-GB.tspackages/localizations/src/de-DE.tspackages/localizations/src/cs-CZ.tspackages/localizations/src/el-GR.tspackages/localizations/src/fr-FR.tspackages/localizations/src/he-IL.tspackages/localizations/src/pl-PL.tspackages/localizations/src/es-CR.tspackages/localizations/src/be-BY.tspackages/localizations/src/es-UY.tspackages/localizations/src/ca-ES.tspackages/localizations/src/da-DK.tspackages/localizations/src/th-TH.tspackages/localizations/src/uk-UA.tspackages/localizations/src/es-MX.tspackages/localizations/src/en-US.tspackages/localizations/src/it-IT.tspackages/localizations/src/hr-HR.tspackages/localizations/src/hu-HU.tspackages/localizations/src/hi-IN.tspackages/localizations/src/sv-SE.tspackages/localizations/src/nb-NO.tspackages/localizations/src/bn-IN.tspackages/localizations/src/ms-MY.tspackages/localizations/src/vi-VN.tspackages/localizations/src/tr-TR.tspackages/localizations/src/mn-MN.tspackages/localizations/src/es-ES.tspackages/localizations/src/ta-IN.tspackages/localizations/src/nl-BE.tspackages/localizations/src/ja-JP.tspackages/localizations/src/ar-SA.tspackages/localizations/src/is-IS.tspackages/localizations/src/bg-BG.tspackages/localizations/src/zh-TW.tspackages/localizations/src/fi-FI.tspackages/localizations/src/sk-SK.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/ko-KR.ts
packages/**/*.{ts,tsx,d.ts}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Packages should export TypeScript types alongside runtime code
Files:
packages/localizations/src/fa-IR.tspackages/localizations/src/sr-RS.tspackages/types/src/localization.tspackages/localizations/src/zh-CN.tspackages/localizations/src/id-ID.tspackages/localizations/src/te-IN.tspackages/clerk-js/src/ui/primitives/Input.tsxpackages/localizations/src/ru-RU.tspackages/localizations/src/nl-NL.tspackages/localizations/src/ro-RO.tspackages/localizations/src/pt-PT.tspackages/localizations/src/pt-BR.tspackages/localizations/src/en-GB.tspackages/localizations/src/de-DE.tspackages/localizations/src/cs-CZ.tspackages/localizations/src/el-GR.tspackages/localizations/src/fr-FR.tspackages/localizations/src/he-IL.tspackages/localizations/src/pl-PL.tspackages/localizations/src/es-CR.tspackages/localizations/src/be-BY.tspackages/localizations/src/es-UY.tspackages/localizations/src/ca-ES.tspackages/localizations/src/da-DK.tspackages/localizations/src/th-TH.tspackages/localizations/src/uk-UA.tspackages/localizations/src/es-MX.tspackages/localizations/src/en-US.tspackages/localizations/src/it-IT.tspackages/localizations/src/hr-HR.tspackages/localizations/src/hu-HU.tspackages/localizations/src/hi-IN.tspackages/localizations/src/sv-SE.tspackages/localizations/src/nb-NO.tspackages/localizations/src/bn-IN.tspackages/localizations/src/ms-MY.tspackages/localizations/src/vi-VN.tspackages/localizations/src/tr-TR.tspackages/localizations/src/mn-MN.tspackages/localizations/src/es-ES.tspackages/localizations/src/ta-IN.tspackages/localizations/src/nl-BE.tspackages/localizations/src/ja-JP.tspackages/localizations/src/ar-SA.tspackages/localizations/src/is-IS.tspackages/localizations/src/bg-BG.tspackages/localizations/src/zh-TW.tspackages/localizations/src/fi-FI.tspackages/localizations/src/sk-SK.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/ko-KR.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
Use proper TypeScript error types
**/*.{ts,tsx}: Always define explicit return types for functions, especially public APIs
Use proper type annotations for variables and parameters where inference isn't clear
Avoidanytype - preferunknownwhen type is uncertain, then narrow with type guards
Useinterfacefor object shapes that might be extended
Usetypefor unions, primitives, and computed types
Preferreadonlyproperties for immutable data structures
Useprivatefor internal implementation details
Useprotectedfor inheritance hierarchies
Usepublicexplicitly for clarity in public APIs
Preferreadonlyfor properties that shouldn't change after construction
Prefer composition and interfaces over deep inheritance chains
Use mixins for shared behavior across unrelated classes
Implement dependency injection for loose coupling
Let TypeScript infer when types are obvious
Useconst assertionsfor literal types:as const
Usesatisfiesoperator for type checking without widening
Use mapped types for transforming object types
Use conditional types for type-level logic
Leverage template literal types for string manipulation
Use ES6 imports/exports consistently
Use default exports sparingly, prefer named exports
Use type-only imports:import type { ... } from ...
Noanytypes without justification
Proper error handling with typed errors
Consistent use ofreadonlyfor immutable data
Proper generic constraints
No unused type parameters
Proper use of utility types instead of manual type construction
Type-only imports where possible
Proper tree-shaking friendly exports
No circular dependencies
Efficient type computations (avoid deep recursion)
Files:
packages/localizations/src/fa-IR.tspackages/localizations/src/sr-RS.tspackages/types/src/localization.tspackages/localizations/src/zh-CN.tspackages/localizations/src/id-ID.tspackages/localizations/src/te-IN.tspackages/clerk-js/src/ui/primitives/Input.tsxpackages/localizations/src/ru-RU.tspackages/localizations/src/nl-NL.tspackages/localizations/src/ro-RO.tspackages/localizations/src/pt-PT.tspackages/localizations/src/pt-BR.tspackages/localizations/src/en-GB.tspackages/localizations/src/de-DE.tspackages/localizations/src/cs-CZ.tspackages/localizations/src/el-GR.tspackages/localizations/src/fr-FR.tspackages/localizations/src/he-IL.tspackages/localizations/src/pl-PL.tspackages/localizations/src/es-CR.tspackages/localizations/src/be-BY.tspackages/localizations/src/es-UY.tspackages/localizations/src/ca-ES.tspackages/localizations/src/da-DK.tspackages/localizations/src/th-TH.tspackages/localizations/src/uk-UA.tspackages/localizations/src/es-MX.tspackages/localizations/src/en-US.tspackages/localizations/src/it-IT.tspackages/localizations/src/hr-HR.tspackages/localizations/src/hu-HU.tspackages/localizations/src/hi-IN.tspackages/localizations/src/sv-SE.tspackages/localizations/src/nb-NO.tspackages/localizations/src/bn-IN.tspackages/localizations/src/ms-MY.tspackages/localizations/src/vi-VN.tspackages/localizations/src/tr-TR.tspackages/localizations/src/mn-MN.tspackages/localizations/src/es-ES.tspackages/localizations/src/ta-IN.tspackages/localizations/src/nl-BE.tspackages/localizations/src/ja-JP.tspackages/localizations/src/ar-SA.tspackages/localizations/src/is-IS.tspackages/localizations/src/bg-BG.tspackages/localizations/src/zh-TW.tspackages/localizations/src/fi-FI.tspackages/localizations/src/sk-SK.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/ko-KR.ts
packages/localizations/**/*
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Localization files must be placed in 'packages/localizations/'.
Files:
packages/localizations/src/fa-IR.tspackages/localizations/src/sr-RS.tspackages/localizations/src/zh-CN.tspackages/localizations/src/id-ID.tspackages/localizations/src/te-IN.tspackages/localizations/src/ru-RU.tspackages/localizations/src/nl-NL.tspackages/localizations/src/ro-RO.tspackages/localizations/src/pt-PT.tspackages/localizations/src/pt-BR.tspackages/localizations/src/en-GB.tspackages/localizations/src/de-DE.tspackages/localizations/src/cs-CZ.tspackages/localizations/src/el-GR.tspackages/localizations/src/fr-FR.tspackages/localizations/src/he-IL.tspackages/localizations/src/pl-PL.tspackages/localizations/src/es-CR.tspackages/localizations/src/be-BY.tspackages/localizations/src/es-UY.tspackages/localizations/src/ca-ES.tspackages/localizations/src/da-DK.tspackages/localizations/src/th-TH.tspackages/localizations/src/uk-UA.tspackages/localizations/src/es-MX.tspackages/localizations/src/en-US.tspackages/localizations/src/it-IT.tspackages/localizations/src/hr-HR.tspackages/localizations/src/hu-HU.tspackages/localizations/src/hi-IN.tspackages/localizations/src/sv-SE.tspackages/localizations/src/nb-NO.tspackages/localizations/src/bn-IN.tspackages/localizations/src/ms-MY.tspackages/localizations/src/vi-VN.tspackages/localizations/src/tr-TR.tspackages/localizations/src/mn-MN.tspackages/localizations/src/es-ES.tspackages/localizations/src/ta-IN.tspackages/localizations/src/nl-BE.tspackages/localizations/src/ja-JP.tspackages/localizations/src/ar-SA.tspackages/localizations/src/is-IS.tspackages/localizations/src/bg-BG.tspackages/localizations/src/zh-TW.tspackages/localizations/src/fi-FI.tspackages/localizations/src/sk-SK.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/ko-KR.ts
**/*.{js,ts,tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Support multiple Clerk environment variables (CLERK_, NEXT_PUBLIC_CLERK_, etc.) for configuration.
Files:
packages/localizations/src/fa-IR.tspackages/localizations/src/sr-RS.tspackages/types/src/localization.tspackages/localizations/src/zh-CN.tspackages/localizations/src/id-ID.tspackages/localizations/src/te-IN.tspackages/clerk-js/src/ui/primitives/Input.tsxpackages/localizations/src/ru-RU.tspackages/localizations/src/nl-NL.tspackages/localizations/src/ro-RO.tspackages/localizations/src/pt-PT.tspackages/localizations/src/pt-BR.tspackages/localizations/src/en-GB.tspackages/localizations/src/de-DE.tspackages/localizations/src/cs-CZ.tspackages/localizations/src/el-GR.tspackages/localizations/src/fr-FR.tspackages/localizations/src/he-IL.tspackages/localizations/src/pl-PL.tspackages/localizations/src/es-CR.tspackages/localizations/src/be-BY.tspackages/localizations/src/es-UY.tspackages/localizations/src/ca-ES.tspackages/localizations/src/da-DK.tspackages/localizations/src/th-TH.tspackages/localizations/src/uk-UA.tspackages/localizations/src/es-MX.tspackages/localizations/src/en-US.tspackages/localizations/src/it-IT.tspackages/localizations/src/hr-HR.tspackages/localizations/src/hu-HU.tspackages/localizations/src/hi-IN.tspackages/localizations/src/sv-SE.tspackages/localizations/src/nb-NO.tspackages/localizations/src/bn-IN.tspackages/localizations/src/ms-MY.tspackages/localizations/src/vi-VN.tspackages/localizations/src/tr-TR.tspackages/localizations/src/mn-MN.tspackages/localizations/src/es-ES.tspackages/localizations/src/ta-IN.tspackages/localizations/src/nl-BE.tspackages/localizations/src/ja-JP.tspackages/localizations/src/ar-SA.tspackages/localizations/src/is-IS.tspackages/localizations/src/bg-BG.tspackages/localizations/src/zh-TW.tspackages/localizations/src/fi-FI.tspackages/localizations/src/sk-SK.tspackages/localizations/src/kk-KZ.tspackages/localizations/src/ko-KR.ts
packages/clerk-js/src/ui/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/clerk-js-ui.mdc)
packages/clerk-js/src/ui/**/*.{ts,tsx}: Element descriptors should always be camelCase
Use element descriptors in UI components to enable consistent theming and styling via appearance.elements
Element descriptors should generate unique, stable CSS classes for theming
Element descriptors should handle state classes (e.g., cl-loading, cl-active, cl-error, cl-open) automatically based on component state
Do not render hard-coded values; all user-facing strings must be localized using provided localization methods
Use the useLocalizations hook and localizationKeys utility for all text and error messages
Use the styled system (sx prop, theme tokens, responsive values) for custom component styling
Use useCardState for card-level state, useFormState for form-level state, and useLoadingStatus for loading states
Always use handleError utility for API errors and use translateError for localized error messages
Use useFormControl for form field state, implement proper validation, and handle loading and error states in forms
Use localization keys for all form labels and placeholders
Use element descriptors for consistent styling and follow the theme token system
Use the Card and FormContainer patterns for consistent UI structure
Files:
packages/clerk-js/src/ui/primitives/Input.tsx
**/*.{jsx,tsx}
📄 CodeRabbit inference engine (.cursor/rules/development.mdc)
**/*.{jsx,tsx}: Use error boundaries in React components
Minimize re-renders in React components
**/*.{jsx,tsx}: Always use functional components with hooks instead of class components
Follow PascalCase naming for components:UserProfile,NavigationMenu
Keep components focused on a single responsibility - split large components
Limit component size to 150-200 lines; extract logic into custom hooks
Use composition over inheritance - prefer smaller, composable components
Export components as named exports for better tree-shaking
One component per file with matching filename and component name
Use useState for simple state management
Use useReducer for complex state logic
Implement proper state initialization
Use proper state updates with callbacks
Implement proper state cleanup
Use Context API for theme/authentication
Implement proper state selectors
Use proper state normalization
Implement proper state persistence
Use React.memo for expensive components
Implement proper useCallback for handlers
Use proper useMemo for expensive computations
Implement proper virtualization for lists
Use proper code splitting with React.lazy
Implement proper cleanup in useEffect
Use proper refs for DOM access
Implement proper event listener cleanup
Use proper abort controllers for fetch
Implement proper subscription cleanup
Use proper HTML elements
Implement proper ARIA attributes
Use proper heading hierarchy
Implement proper form labels
Use proper button types
Implement proper focus management
Use proper keyboard shortcuts
Implement proper tab order
Use proper skip links
Implement proper focus traps
Implement proper error boundaries
Use proper error logging
Implement proper error recovery
Use proper error messages
Implement proper error fallbacks
Use proper form validation
Implement proper error states
Use proper error messages
Implement proper form submission
Use proper form reset
Use proper component naming
Implement proper file naming
Use proper prop naming
Implement proper...
Files:
packages/clerk-js/src/ui/primitives/Input.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/react.mdc)
**/*.tsx: Use proper type definitions for props and state
Leverage TypeScript's type inference where possible
Use proper event types for handlers
Implement proper generic types for reusable components
Use proper type guards for conditional rendering
Files:
packages/clerk-js/src/ui/primitives/Input.tsx
.changeset/**
📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)
Automated releases must use Changesets.
Files:
.changeset/eighty-coins-punch.md
🧬 Code graph analysis (1)
packages/clerk-js/src/ui/primitives/Input.tsx (1)
packages/clerk-js/src/ui/customizables/index.ts (2)
useLocalizations(11-11)localizationKeys(11-11)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: Build Packages
- GitHub Check: Formatting | Dedupe | Changeset
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: semgrep-cloud-platform/scan
- GitHub Check: semgrep-cloud-platform/scan
| enterpriseConnections: { | ||
| subtitle: undefined, | ||
| title: undefined, | ||
| }, |
There was a problem hiding this comment.
Unrelated feature addition - consider separate PR.
The enterpriseConnections block addition is unrelated to the PR's stated objective of adding accessibility title attributes to email fields. This appears to be infrastructure for a separate feature.
To maintain clear PR history and simplify reviews, consider:
- Moving unrelated localization additions to a separate PR
- Or documenting in the PR description why these changes are bundled together
If these are required dependencies for the email field changes, please clarify the relationship.
🤖 Prompt for AI Agents
In packages/localizations/src/da-DK.ts around lines 642 to 645, the newly added
enterpriseConnections localization block is unrelated to the accessibility title
changes; remove or relocate this block to a separate PR (or revert it here) and,
if it must remain, add a short comment in this PR explaining why the
enterpriseConnections entries are required for the email title work and link to
any dependent tasks. Ensure the current PR only contains changes relevant to the
accessibility title attributes to keep review scope minimal.
| formFieldInputPlaceholder__password: 'Enter your password', | ||
| formFieldInputPlaceholder__phoneNumber: 'Enter your phone number', | ||
| formFieldInputPlaceholder__username: undefined, | ||
| formFieldInput__emailAddress_format: undefined, |
There was a problem hiding this comment.
Critical: Email format localization key is undefined, defeating accessibility purpose.
The new formFieldInput__emailAddress_format key is set to undefined, which means no title attribute value will be provided for the email input field. This directly contradicts the PR's objective to meet WCAG 3.3.2 requirements by providing explicit format instructions.
According to the linked issue USER-3620, the title attribute should contain something like "Email format: {regex_here}" to help users understand the required email format when browser validation fails.
Since this is the en-GB (British English) locale, it should contain an actual English value describing the email format.
Apply this diff to provide a meaningful accessibility value:
- formFieldInput__emailAddress_format: undefined,
+ formFieldInput__emailAddress_format: 'Email address must be in the format: name@domain.com',Note: The exact format description should match the pattern validation used in the actual input field implementation. You may need to coordinate with the Input component implementation to ensure consistency.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| formFieldInput__emailAddress_format: undefined, | |
| formFieldInput__emailAddress_format: 'Email address must be in the format: name@domain.com', |
🤖 Prompt for AI Agents
In packages/localizations/src/en-GB.ts at line 222, the localization key
formFieldInput__emailAddress_format is currently set to undefined; replace it
with a meaningful English string that describes the expected email pattern (e.g.
"Email format: {regex_here}") so the title attribute provides clear format
guidance for accessibility, and ensure the placeholder {regex_here} matches the
actual validation regex used by the Input component (coordinate with the
component or use the exact pattern string) before committing.
| enterpriseConnections: { | ||
| subtitle: undefined, | ||
| title: undefined, | ||
| }, |
There was a problem hiding this comment.
🧩 Analysis chain
Verify undefined values for enterpriseConnections blocks.
New enterpriseConnections blocks have been added to both signIn.emailLink and signUp sections with subtitle and title set to undefined.
While the file disclaimer notes this is a community-contributed locale that may be incomplete, these additions appear unrelated to the main PR objective of adding email field title attributes for accessibility.
Please verify:
- Are these
enterpriseConnectionsblocks intentionally included in this PR, or should they be in a separate change? - Should the en-GB locale (British English) have actual English values rather than
undefinedfor these new keys? - What is the purpose of these enterprise connection sections, and how do they relate to the email accessibility improvements?
Run the following script to check how these keys are used in the codebase:
Also applies to: 769-772
🏁 Script executed:
#!/bin/bash
# Search for usage of enterpriseConnections in sign-in and sign-up flows
ast-grep --pattern 'enterpriseConnections'Length of output: 1323
---
🏁 Script executed:
```shell
#!/bin/bash
# Check if enterpriseConnections exists in en-US.ts and what values it has
rg -n "enterpriseConnections" packages/localizations/src/en-US.ts -A2 -B2
Length of output: 390
Replace undefined values with proper English text for enterpriseConnections blocks.
The en-US.ts file shows that both enterpriseConnections blocks should have English text values:
subtitle: 'Select the enterprise account with which you wish to continue.'title: 'Choose your enterprise account'
However, the en-GB.ts file has undefined for both keys in lines 644-647 and 769-772. Since British English uses the same text as US English for these strings, update both occurrences in en-GB.ts to match the values from en-US.ts.
🤖 Prompt for AI Agents
In packages/localizations/src/en-GB.ts around lines 644-647 and 769-772, the
enterpriseConnections blocks have subtitle and title set to undefined; replace
both occurrences so subtitle = 'Select the enterprise account with which you
wish to continue.' and title = 'Choose your enterprise account' to match
en-US.ts.
| formFieldInputPlaceholder__password: 'Ingrese su contraseña', | ||
| formFieldInputPlaceholder__phoneNumber: 'Ingrese su número telefónico', | ||
| formFieldInputPlaceholder__username: 'Ingrese su nombre de usuario', | ||
| formFieldInput__emailAddress_format: undefined, |
There was a problem hiding this comment.
Provide Spanish translation for email format accessibility.
The formFieldInput__emailAddress_format key is set to undefined, which undermines the accessibility improvement this PR intends to deliver. Per the linked issue USER-3620, this text is needed to satisfy WCAG 3.3.2 by providing format instructions to users when native browser validation fails.
Without a Spanish translation, Spanish-speaking users will not receive proper format guidance, creating an accessibility gap.
Consider applying this diff to add a Spanish translation:
- formFieldInput__emailAddress_format: undefined,
+ formFieldInput__emailAddress_format: 'Formato de ejemplo: nombre@ejemplo.com',📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| formFieldInput__emailAddress_format: undefined, | |
| formFieldInput__emailAddress_format: 'Formato de ejemplo: nombre@ejemplo.com', |
🤖 Prompt for AI Agents
In packages/localizations/src/es-ES.ts around line 223 the key
formFieldInput__emailAddress_format is set to undefined; replace the undefined
value with a concise Spanish translation that explains the expected email format
(e.g., a short instruction like "Introduce una dirección de correo válida, por
ejemplo usuario@ejemplo.com") so screen readers and users get format guidance
when native browser validation fails; ensure the string is properly escaped and
follows existing localization formatting conventions.
| formFieldInputPlaceholder__password: 'رمز عبور خود را وارد کنید', | ||
| formFieldInputPlaceholder__phoneNumber: 'شماره تلفن خود را وارد کنید', | ||
| formFieldInputPlaceholder__username: 'نام کاربری خود را وارد کنید', | ||
| formFieldInput__emailAddress_format: undefined, |
There was a problem hiding this comment.
Incomplete accessibility improvement for Persian locale.
The new formFieldInput__emailAddress_format key, which is central to this PR's WCAG 3.3.2 accessibility compliance objective, has an undefined value. This means Persian-speaking users won't receive the email format instructions in browser-native validation messages, leaving the accessibility issue unresolved for this locale.
Consider either:
- Adding a Persian translation (e.g.,
'فرمت ایمیل: {regex_here}'or appropriate localization) - Adding a comment indicating that this is intentionally deferred for community contribution
- Verifying whether there's a fallback mechanism to English when translations are undefined
Based on PR objectives.
🤖 Prompt for AI Agents
In packages/localizations/src/fa-IR.ts around line 228, the key
formFieldInput__emailAddress_format is set to undefined which leaves Persian
users without the email format instruction; replace the undefined value with an
appropriate Persian string (e.g., a translated message containing the regex
placeholder) or add a one-line comment explaining intentional deferral and
ensure any fallback to English is acceptable per project policy; update the
export so the key contains the final string or a clear TODO comment and run
localization lint/tests to confirm no missing-translation errors.
| enterpriseConnections: { | ||
| subtitle: undefined, | ||
| title: undefined, | ||
| }, |
There was a problem hiding this comment.
🧩 Analysis chain
Verify consistency of enterpriseConnections structure across locales.
The new enterpriseConnections block under signIn.emailLink introduces UI strings for enterprise authentication flows. Ensure this structure matches the implementation across all 48 locale files mentioned in the PR.
Run the following script to verify consistent structure:
🏁 Script executed:
#!/bin/bash
# Description: Verify enterpriseConnections blocks exist in signIn.emailLink across all locale files
# Find all locale files and check for the signIn.emailLink.enterpriseConnections structure
fd -e ts -e tsx . packages/localizations/src/ --exec rg -l "signIn:.*emailLink:.*enterpriseConnections" {} \;
# Show the structure to confirm subtitle and title keys
ast-grep --pattern $'signIn: {
$$$
emailLink: {
$$$
enterpriseConnections: {
$$$
}
$$$
}
$$$
}'Length of output: 0
🏁 Script executed:
#!/bin/bash
# Step 1: List all locale files
echo "=== Locale files in packages/localizations/src/ ==="
ls -la packages/localizations/src/*.ts 2>/dev/null | head -20
# Step 2: Check if ko-KR.ts exists and show line count
echo -e "\n=== ko-KR.ts info ==="
wc -l packages/localizations/src/ko-KR.ts 2>/dev/null
# Step 3: Extract lines 630-645 from ko-KR.ts to see context
echo -e "\n=== Lines 630-645 in ko-KR.ts ==="
sed -n '630,645p' packages/localizations/src/ko-KR.ts
# Step 4: Search for enterpriseConnections in ko-KR.ts
echo -e "\n=== Searching for 'enterpriseConnections' in ko-KR.ts ==="
grep -n "enterpriseConnections" packages/localizations/src/ko-KR.ts | head -10
# Step 5: Sample another locale file to compare
echo -e "\n=== Sample lines from en-US.ts (if exists) around same area ==="
sed -n '630,645p' packages/localizations/src/en-US.ts 2>/dev/null || echo "en-US.ts not found"Length of output: 3027
🏁 Script executed:
#!/bin/bash
# Check the second enterpriseConnections occurrence in ko-KR.ts (line 762)
echo "=== Lines 755-770 in ko-KR.ts (second enterpriseConnections occurrence) ==="
sed -n '755,770p' packages/localizations/src/ko-KR.ts
# Check corresponding area in en-US.ts
echo -e "\n=== Lines 755-770 in en-US.ts ==="
sed -n '755,770p' packages/localizations/src/en-US.ts
# Sample other locale files to verify translation completeness
echo -e "\n=== Lines 630-645 in fr-FR.ts ==="
sed -n '630,645p' packages/localizations/src/fr-FR.ts 2>/dev/null || echo "fr-FR.ts not found"
echo -e "\n=== Lines 630-645 in de-DE.ts ==="
sed -n '630,645p' packages/localizations/src/de-DE.ts 2>/dev/null || echo "de-DE.ts not found"
echo -e "\n=== Check all locales for undefined enterpriseConnections ==="
rg "enterpriseConnections: \{" packages/localizations/src/ -A 2 | grep -E "(subtitle|title).*undefined" | wc -lLength of output: 2413
🏁 Script executed:
#!/bin/bash
# Check a few specific locales for their enterpriseConnections translations
echo "=== Check enterpriseConnections across specific locale files ==="
for locale in ar-SA ja-JP pt-BR ru-RU es-ES; do
echo -e "\n--- ${locale}.ts ---"
grep -A 2 "enterpriseConnections: {" packages/localizations/src/${locale}.ts 2>/dev/null | head -5
done
# Count how many locale files have undefined vs actual translations in enterpriseConnections
echo -e "\n=== Summary: Locales with undefined enterpriseConnections ==="
rg "enterpriseConnections: \{" packages/localizations/src/ -A 2 | grep -B 1 "undefined" | grep -c "enterpriseConnections"
echo -e "\n=== Total locale files ==="
ls -1 packages/localizations/src/*.ts | wc -l
# Show one example of a locale with actual translations (if any differ)
echo -e "\n=== Full enterpriseConnections block from en-US.ts ==="
grep -A 3 "enterpriseConnections: {" packages/localizations/src/en-US.tsLength of output: 1200
Complete translations for enterpriseConnections across all non-English locales before merging.
The enterpriseConnections structure is correctly and consistently added across all 50 locale files. However, 96 of the ~100 enterpriseConnections blocks contain undefined values across all non-English locales. Only en-US.ts provides actual translations:
subtitle: 'Select the enterprise account with which you wish to continue.'title: 'Choose your enterprise account'
All 48 non-English locales (including ko-KR.ts) have these strings set to undefined in both the signIn.emailLink and signUp.emailLink contexts. Either translate these strings to their respective languages before merging, or explicitly document this as a known limitation for enterprise connection flows in non-English interfaces.
🤖 Prompt for AI Agents
In packages/localizations/src/ko-KR.ts around lines 638 to 641, the
enterpriseConnections block contains undefined subtitle and title values;
replace those undefined entries with proper Korean translations matching the
en-US content (subtitle: "Select the enterprise account with which you wish to
continue." and title: "Choose your enterprise account") translated into Korean,
and ensure both signIn.emailLink and signUp.emailLink contexts are updated
consistently; alternatively, if translation isn't available, explicitly set both
fields to an intentional placeholder string (e.g., an empty string) and add a
TODO comment indicating missing translations so the omission is documented.
| formFieldInputPlaceholder__password: 'Wachtwoord', | ||
| formFieldInputPlaceholder__phoneNumber: 'Telefoonnummer', | ||
| formFieldInputPlaceholder__username: 'Gebruikersnaam', | ||
| formFieldInput__emailAddress_format: undefined, |
There was a problem hiding this comment.
Missing translation defeats accessibility improvement for Dutch/Belgian users.
The new formFieldInput__emailAddress_format key is central to this PR's goal of improving WCAG 3.3.2 compliance by providing explicit email format guidance. Setting it to undefined means Dutch/Belgian users won't receive the intended accessibility benefit—browser-native error messages will still display generic "Please match the requested format" without specifying the required format.
Consider providing a Dutch/Belgian translation for this key. For reference, this might be something like:
formFieldInput__emailAddress_format: 'E-mailformaat: gebruiker@domein.extensie',Note: The exact translation and format specification should align with the email validation pattern used by the application and be reviewed by a Dutch/Belgian speaker.
🤖 Prompt for AI Agents
In packages/localizations/src/nl-BE.ts at line 222, the key
formFieldInput__emailAddress_format is set to undefined which prevents
Dutch/Belgian users from receiving the explicit email-format guidance; replace
the undefined with an appropriate Dutch/Belgian translation (e.g.,
'E-mailformaat: gebruiker@domein.extensie' or equivalent matching the app's
email validation pattern), ensure the string matches the validation pattern used
in code, and have a Dutch speaker review the phrasing for locale accuracy.
| enterpriseConnections: { | ||
| subtitle: undefined, | ||
| title: undefined, | ||
| }, |
There was a problem hiding this comment.
Enterprise connections feature incomplete for Dutch/Belgian users.
The new enterpriseConnections blocks under both signIn.emailLink and signUp.emailLink have undefined values for subtitle and title. While the AI summary indicates this is a consistent pattern across multiple locales (suggesting a placeholder phase), Dutch/Belgian users won't see proper messaging for enterprise connection flows.
Consider adding Dutch/Belgian translations for these keys to complete the feature for this locale, or document if translations are planned for a follow-up phase.
Also applies to: 767-770
🤖 Prompt for AI Agents
In packages/localizations/src/nl-BE.ts around lines 643-646 and 767-770, the
enterpriseConnections objects for signIn.emailLink and signUp.emailLink have
subtitle and title set to undefined; replace those undefined values with proper
Dutch/Belgian translations (or a clear placeholder string if translation is not
yet available), e.g., provide concise Dutch strings for title and subtitle
consistent with other locales, and ensure both signIn and signUp blocks use
equivalent wording and pass any existing localization type checks.
| formFieldInputPlaceholder__password: 'Wprowadź swoje hasło', | ||
| formFieldInputPlaceholder__phoneNumber: 'Wprowadź numer telefonu', | ||
| formFieldInputPlaceholder__username: undefined, | ||
| formFieldInput__emailAddress_format: undefined, |
There was a problem hiding this comment.
Missing Polish translation undermines accessibility goal.
The formFieldInput__emailAddress_format key is set to undefined, which means Polish users won't receive the required email format instructions in the title attribute. This undermines the PR's WCAG 3.3.2 compliance objective for the Polish locale.
For full accessibility compliance, this key should contain a Polish translation of the email format instruction (e.g., "Format e-mail: [format details]").
Do you want me to suggest a Polish translation for this key, or would you prefer to handle this separately?
🤖 Prompt for AI Agents
In packages/localizations/src/pl-PL.ts at line 223, the key
formFieldInput__emailAddress_format is set to undefined; replace it with a
Polish translation for the email-format instruction (for example "Format adresu
e‑mail: przykład@domena.pl" or similar) so Polish users receive the required
title attribute guidance for WCAG 3.3.2 compliance.
| formFieldInputPlaceholder__password: 'ใส่รหัสผ่านของคุณ', | ||
| formFieldInputPlaceholder__phoneNumber: 'ใส่หมายเลขโทรศัพท์ของคุณ', | ||
| formFieldInputPlaceholder__username: undefined, | ||
| formFieldInput__emailAddress_format: undefined, |
There was a problem hiding this comment.
Provide Thai translation for email format instruction.
The new formFieldInput__emailAddress_format key is central to this PR's accessibility objective (WCAG 3.3.2 compliance). Setting it to undefined means Thai users won't receive localized email format guidance in browser validation messages, limiting the accessibility improvement.
Consider providing a Thai translation such as:
- formFieldInput__emailAddress_format: undefined,
+ formFieldInput__emailAddress_format: 'รูปแบบอีเมล: example@domain.com',While the disclaimer notes this is a community-contributed file, providing this translation would ensure Thai speakers benefit equally from the accessibility enhancement.
Do you want me to help draft an appropriate Thai translation for the email format instruction?
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| formFieldInput__emailAddress_format: undefined, | |
| formFieldInput__emailAddress_format: 'รูปแบบอีเมล: example@domain.com', |
🤖 Prompt for AI Agents
packages/localizations/src/th-TH.ts lines 226: the key
formFieldInput__emailAddress_format is currently set to undefined so Thai users
get no localized email-format guidance; replace the undefined value with a Thai
translation string, e.g. "โปรดป้อนที่อยู่อีเมลที่ถูกต้อง (เช่น
example@domain.com)", to ensure browser validation messages provide accessible,
localized guidance.
4 participants
Description
Add title attribute to email field with the expected format to help improve a11y.
Ref: https://www.w3.org/TR/WCAG20-TECHS/H65.html
resolves USER-3620
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit
New Features
Chores