Skip to content

chore(clerk-js): Add title attribute to email field #6956

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Oct 20, 2025
Merged

chore(clerk-js): Add title attribute to email field #6956

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7b31ee9
chore(clerk-js): Add title attribute to email field
alexcarpenter Oct 10, 2025
2fd3e1e
localize
alexcarpenter Oct 17, 2025
d2ff4e8
Merge branch 'main' into alexcarpenter/email-field-title
alexcarpenter Oct 17, 2025
acc393f
generate
alexcarpenter Oct 17, 2025
7fa716b
add changeset
alexcarpenter Oct 17, 2025
460c534
Merge branch 'main' into alexcarpenter/email-field-title
alexcarpenter Oct 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/eighty-coins-punch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
'@clerk/localizations': patch
'@clerk/clerk-js': patch
'@clerk/types': patch
---

Add title attribute to email address field with the recommended format.
9 changes: 8 additions & 1 deletion packages/clerk-js/src/ui/primitives/Input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from 'react';

import { localizationKeys, useLocalizations } from '../localization';
import type { PrimitiveProps, RequiredProp, StyleVariants } from '../styledSystem';
import { common, createVariants, mqu } from '../styledSystem';
import { sanitizeInputProps, useFormField } from './hooks/useFormField';
Expand Down Expand Up @@ -63,6 +64,7 @@ export type InputProps = PrimitiveProps<'input'> & StyleVariants<typeof applyVar

export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
const fieldControl = useFormField() || {};
const { t } = useLocalizations();
// @ts-expect-error Typescript is complaining that `feedbackMessageId` does not exist. We are clearly passing them from above.
const { feedbackMessageId, ignorePasswordManager, feedbackType, ...fieldControlProps } = sanitizeInputProps(
fieldControl,
Expand All @@ -86,7 +88,12 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref)

const typeProps =
type === 'email'
? { type: 'text' as const, pattern: '^.*@[a-zA-Z0-9\\-]+\\.[a-zA-Z0-9\\-\\.]+$', inputMode: 'email' as const }
? {
type: 'text' as const,
pattern: '^.*@[a-zA-Z0-9\\-]+\\.[a-zA-Z0-9\\-\\.]+$',
inputMode: 'email' as const,
title: t(localizationKeys('formFieldInput__emailAddress_format')),
}
: { type: type || ('text' as const) };

const passwordManagerProps = ignorePasswordManager
Expand Down
11 changes: 10 additions & 1 deletion packages/localizations/src/ar-SA.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,6 @@ export const arSA: LocalizationResource = {
monthly: undefined,
pastDue: undefined,
pay: undefined,
paymentMethods__label: undefined,
paymentMethod: {
applePayDescription: {
annual: undefined,
Expand All @@ -136,6 +135,7 @@ export const arSA: LocalizationResource = {
testCardInfo: undefined,
},
},
paymentMethods__label: undefined,
popular: undefined,
pricingTable: {
billingCycle: undefined,
Expand Down Expand Up @@ -220,6 +220,7 @@ export const arSA: LocalizationResource = {
formFieldInputPlaceholder__password: undefined,
formFieldInputPlaceholder__phoneNumber: undefined,
formFieldInputPlaceholder__username: undefined,
formFieldInput__emailAddress_format: undefined,
formFieldLabel__apiKeyDescription: undefined,
formFieldLabel__apiKeyExpiration: undefined,
formFieldLabel__apiKeyName: undefined,
Expand Down Expand Up @@ -636,6 +637,10 @@ export const arSA: LocalizationResource = {
titleNewTab: 'تم تسجيل الدخول في علامة تبويب أخرى',
},
},
enterpriseConnections: {
subtitle: undefined,
title: undefined,
},
forgotPassword: {
formTitle: 'رمز تحقق لإعادة تعيين كلمة المرور',
resendButton: 'لم يصلك أي رمز؟ حاول مرة أخرى.',
Expand Down Expand Up @@ -758,6 +763,10 @@ export const arSA: LocalizationResource = {
title: 'تم التحقق بنجاح من البريد الإلكتروني',
},
},
enterpriseConnections: {
subtitle: undefined,
title: undefined,
},
legalConsent: {
checkbox: {
label__onlyPrivacyPolicy: undefined,
Expand Down
11 changes: 10 additions & 1 deletion packages/localizations/src/be-BY.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,6 @@ export const beBY: LocalizationResource = {
monthly: undefined,
pastDue: undefined,
pay: undefined,
paymentMethods__label: undefined,
paymentMethod: {
applePayDescription: {
annual: undefined,
Expand All @@ -136,6 +135,7 @@ export const beBY: LocalizationResource = {
testCardInfo: undefined,
},
},
paymentMethods__label: undefined,
popular: undefined,
pricingTable: {
billingCycle: undefined,
Expand Down Expand Up @@ -221,6 +221,7 @@ export const beBY: LocalizationResource = {
formFieldInputPlaceholder__password: 'Увядзіце ваш пароль',
formFieldInputPlaceholder__phoneNumber: 'Увядзіце ваш нумар тэлефона',
formFieldInputPlaceholder__username: 'Увядзіце імя карыстальніка',
formFieldInput__emailAddress_format: undefined,
formFieldLabel__apiKeyDescription: undefined,
formFieldLabel__apiKeyExpiration: undefined,
formFieldLabel__apiKeyName: undefined,
Expand Down Expand Up @@ -643,6 +644,10 @@ export const beBY: LocalizationResource = {
titleNewTab: 'Залогіньцеся на іншай укладцы',
},
},
enterpriseConnections: {
subtitle: undefined,
title: undefined,
},
forgotPassword: {
formTitle: 'Код аднаўлення пароля',
resendButton: 'Адправіць код яшчэ раз',
Expand Down Expand Up @@ -763,6 +768,10 @@ export const beBY: LocalizationResource = {
title: 'Пошта верыфікавана',
},
},
enterpriseConnections: {
subtitle: undefined,
title: undefined,
},
legalConsent: {
checkbox: {
label__onlyPrivacyPolicy: 'Я згаджаюся з палітыкай канфідэнцыяльнасці',
Expand Down
11 changes: 10 additions & 1 deletion packages/localizations/src/bg-BG.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,6 @@ export const bgBG: LocalizationResource = {
monthly: undefined,
pastDue: undefined,
pay: undefined,
paymentMethods__label: undefined,
paymentMethod: {
applePayDescription: {
annual: undefined,
Expand All @@ -137,6 +136,7 @@ export const bgBG: LocalizationResource = {
testCardInfo: undefined,
},
},
paymentMethods__label: undefined,
popular: undefined,
pricingTable: {
billingCycle: undefined,
Expand Down Expand Up @@ -220,6 +220,7 @@ export const bgBG: LocalizationResource = {
formFieldInputPlaceholder__password: 'Парола',
formFieldInputPlaceholder__phoneNumber: '+359 123 456 789',
formFieldInputPlaceholder__username: 'Име на потребител',
formFieldInput__emailAddress_format: undefined,
formFieldLabel__apiKeyDescription: undefined,
formFieldLabel__apiKeyExpiration: undefined,
formFieldLabel__apiKeyName: undefined,
Expand Down Expand Up @@ -639,6 +640,10 @@ export const bgBG: LocalizationResource = {
titleNewTab: 'Влезнали сте в друг таб',
},
},
enterpriseConnections: {
subtitle: undefined,
title: undefined,
},
forgotPassword: {
formTitle: 'Код за нулиране на парола',
resendButton: 'Не сте получили код? Изпрати отново',
Expand Down Expand Up @@ -760,6 +765,10 @@ export const bgBG: LocalizationResource = {
title: 'Успешно потвърден имейл',
},
},
enterpriseConnections: {
subtitle: undefined,
title: undefined,
},
legalConsent: {
checkbox: {
label__onlyPrivacyPolicy: 'Съгласен съм само с политиката за конфиденциалност',
Expand Down
11 changes: 10 additions & 1 deletion packages/localizations/src/bn-IN.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,6 @@ export const bnIN: LocalizationResource = {
monthly: undefined,
pastDue: undefined,
pay: undefined,
paymentMethods__label: undefined,
paymentMethod: {
applePayDescription: {
annual: undefined,
Expand All @@ -136,6 +135,7 @@ export const bnIN: LocalizationResource = {
testCardInfo: undefined,
},
},
paymentMethods__label: undefined,
popular: undefined,
pricingTable: {
billingCycle: undefined,
Expand Down Expand Up @@ -219,6 +219,7 @@ export const bnIN: LocalizationResource = {
formFieldInputPlaceholder__password: 'আপনার পাসওয়ার্ড লিখুন',
formFieldInputPlaceholder__phoneNumber: 'আপনার ফোন নম্বর লিখুন',
formFieldInputPlaceholder__username: undefined,
formFieldInput__emailAddress_format: undefined,
formFieldLabel__apiKeyDescription: undefined,
formFieldLabel__apiKeyExpiration: undefined,
formFieldLabel__apiKeyName: undefined,
Expand Down Expand Up @@ -641,6 +642,10 @@ export const bnIN: LocalizationResource = {
titleNewTab: 'অন্য ট্যাবে সাইন ইন হয়েছে',
},
},
enterpriseConnections: {
subtitle: undefined,
title: undefined,
},
forgotPassword: {
formTitle: 'পাসওয়ার্ড রিসেট কোড',
resendButton: 'কোনো কোড পাননি? পুনরায় পাঠান',
Expand Down Expand Up @@ -763,6 +768,10 @@ export const bnIN: LocalizationResource = {
title: 'সফলভাবে ইমেইল যাচাই করা হয়েছে',
},
},
enterpriseConnections: {
subtitle: undefined,
title: undefined,
},
legalConsent: {
checkbox: {
label__onlyPrivacyPolicy: 'আমি {{ privacyPolicyLink || link("গোপনীয়তা নীতি") }}-এর সাথে সম্মত',
Expand Down
11 changes: 10 additions & 1 deletion packages/localizations/src/ca-ES.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,6 @@ export const caES: LocalizationResource = {
monthly: undefined,
pastDue: undefined,
pay: undefined,
paymentMethods__label: undefined,
paymentMethod: {
applePayDescription: {
annual: undefined,
Expand All @@ -137,6 +136,7 @@ export const caES: LocalizationResource = {
testCardInfo: undefined,
},
},
paymentMethods__label: undefined,
popular: undefined,
pricingTable: {
billingCycle: undefined,
Expand Down Expand Up @@ -220,6 +220,7 @@ export const caES: LocalizationResource = {
formFieldInputPlaceholder__password: 'Contrasenya',
formFieldInputPlaceholder__phoneNumber: 'Número de telèfon',
formFieldInputPlaceholder__username: "Nom d'usuari",
formFieldInput__emailAddress_format: undefined,
formFieldLabel__apiKeyDescription: undefined,
formFieldLabel__apiKeyExpiration: undefined,
formFieldLabel__apiKeyName: undefined,
Expand Down Expand Up @@ -639,6 +640,10 @@ export const caES: LocalizationResource = {
titleNewTab: "S'ha iniciat sessió en una altra pestanya",
},
},
enterpriseConnections: {
subtitle: undefined,
title: undefined,
},
forgotPassword: {
formTitle: 'Codi de restabliment de contrasenya',
resendButton: 'No has rebut el codi? Reenvia',
Expand Down Expand Up @@ -760,6 +765,10 @@ export const caES: LocalizationResource = {
title: 'Correu electrònic verificat amb èxit',
},
},
enterpriseConnections: {
subtitle: undefined,
title: undefined,
},
legalConsent: {
checkbox: {
label__onlyPrivacyPolicy: undefined,
Expand Down
11 changes: 10 additions & 1 deletion packages/localizations/src/cs-CZ.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,6 @@ export const csCZ: LocalizationResource = {
monthly: 'Měsíčně',
pastDue: 'Po splatnosti',
pay: 'Zaplatit {{amount}}',
paymentMethods__label: 'Platební metody',
paymentMethod: {
applePayDescription: {
annual: 'Roční platba',
Expand All @@ -140,6 +139,7 @@ export const csCZ: LocalizationResource = {
testCardInfo: 'Informace o testovací kartě',
},
},
paymentMethods__label: 'Platební metody',
popular: 'Populární',
pricingTable: {
billingCycle: 'Fakturační cyklus',
Expand Down Expand Up @@ -224,6 +224,7 @@ export const csCZ: LocalizationResource = {
formFieldInputPlaceholder__password: 'Zadejte své heslo',
formFieldInputPlaceholder__phoneNumber: 'Zadejte své telefonní číslo',
formFieldInputPlaceholder__username: 'Zadejte své uživatelské jméno',
formFieldInput__emailAddress_format: undefined,
formFieldLabel__apiKeyDescription: 'Popis',
formFieldLabel__apiKeyExpiration: 'Platnost',
formFieldLabel__apiKeyName: 'Název tajného klíče',
Expand Down Expand Up @@ -646,6 +647,10 @@ export const csCZ: LocalizationResource = {
titleNewTab: 'Přihlášeno na jiné kartě',
},
},
enterpriseConnections: {
subtitle: undefined,
title: undefined,
},
forgotPassword: {
formTitle: 'Kód pro resetování hesla',
resendButton: 'Neobdrželi jste kód? Znovu poslat',
Expand Down Expand Up @@ -768,6 +773,10 @@ export const csCZ: LocalizationResource = {
title: 'E-mail úspěšně ověřen',
},
},
enterpriseConnections: {
subtitle: undefined,
title: undefined,
},
legalConsent: {
checkbox: {
label__onlyPrivacyPolicy: 'Souhlasím s {{ privacyPolicyLink || link("Zásadami ochrany osobních údajů") }}',
Expand Down
11 changes: 10 additions & 1 deletion packages/localizations/src/da-DK.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,6 @@ export const daDK: LocalizationResource = {
monthly: undefined,
pastDue: undefined,
pay: undefined,
paymentMethods__label: undefined,
paymentMethod: {
applePayDescription: {
annual: undefined,
Expand All @@ -136,6 +135,7 @@ export const daDK: LocalizationResource = {
testCardInfo: undefined,
},
},
paymentMethods__label: undefined,
popular: undefined,
pricingTable: {
billingCycle: undefined,
Expand Down Expand Up @@ -220,6 +220,7 @@ export const daDK: LocalizationResource = {
formFieldInputPlaceholder__password: 'Indtast adgangskode',
formFieldInputPlaceholder__phoneNumber: 'Indtast telefonnummer',
formFieldInputPlaceholder__username: 'Indtast brugernavn',
formFieldInput__emailAddress_format: undefined,
formFieldLabel__apiKeyDescription: undefined,
formFieldLabel__apiKeyExpiration: undefined,
formFieldLabel__apiKeyName: undefined,
Expand Down Expand Up @@ -638,6 +639,10 @@ export const daDK: LocalizationResource = {
titleNewTab: 'Logget ind på anden fane',
},
},
enterpriseConnections: {
subtitle: undefined,
title: undefined,
},
Comment on lines +642 to +645
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

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.

forgotPassword: {
formTitle: 'Nulstil adgangskode',
resendButton: 'Modtog du ikke en kode? Send igen',
Expand Down Expand Up @@ -758,6 +763,10 @@ export const daDK: LocalizationResource = {
title: 'E-mail er bekræftet',
},
},
enterpriseConnections: {
subtitle: undefined,
title: undefined,
},
legalConsent: {
checkbox: {
label__onlyPrivacyPolicy: undefined,
Expand Down
Loading