etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: add key prop to AnimatePresence, accessibility labels, remove hardcoded fallback

Browse Source 
- Added key="email-link-form" on motion.div inside AnimatePresence
  for proper exit animations
- Added htmlFor/id pairs on all three label+input groups for
  screen reader accessibility
- Replaced hardcoded "your@email.com" placeholder with neutral format
- Removed hardcoded English fallback from t('profile.invalidEmail')
This commit is contained in:
Fringg
2026-04-02 07:16:00 +03:00
parent 6fd0668a24
commit 7892630e3b
1 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/pages/ConnectedAccounts.tsx
View File

@@ -430,7 +430,7 @@ export default function ConnectedAccounts() {
setEmailSuccess(null); setEmailSuccess(null);
if (!emailValue.trim() || !isValidEmail(emailValue.trim())) { if (!emailValue.trim() || !isValidEmail(emailValue.trim())) {
setEmailError(t('profile.invalidEmail', 'Please enter a valid email address')); setEmailError(t('profile.invalidEmail'));
return; return;
} }
if (!emailPassword || emailPassword.length < 8) { if (!emailPassword || emailPassword.length < 8) {
@@ -675,6 +675,7 @@ export default function ConnectedAccounts() {
<AnimatePresence> <AnimatePresence>
{emailFormOpen && ( {emailFormOpen && (
<motion.div <motion.div
key="email-link-form"
initial={{ height: 0, opacity: 0 }} initial={{ height: 0, opacity: 0 }}
animate={{ height: 'auto', opacity: 1 }} animate={{ height: 'auto', opacity: 1 }}
exit={{ height: 0, opacity: 0 }} exit={{ height: 0, opacity: 0 }}
@@ -687,19 +688,25 @@ export default function ConnectedAccounts() {
</p> </p>
<form onSubmit={handleEmailSubmit} className="space-y-3"> <form onSubmit={handleEmailSubmit} className="space-y-3">
<div> <div>
<label className="label">Email</label> <label htmlFor="email-link-input" className="label">
Email
</label>
<input <input
id="email-link-input"
type="email" type="email"
value={emailValue} value={emailValue}
onChange={(e) => setEmailValue(e.target.value)} onChange={(e) => setEmailValue(e.target.value)}
placeholder="your@email.com" placeholder="email@example.com"
className="input" className="input"
autoComplete="email" autoComplete="email"
/> />
</div> </div>
<div> <div>
<label className="label">{t('auth.password')}</label> <label htmlFor="email-link-password" className="label">
{t('auth.password')}
</label>
<input <input
id="email-link-password"
type="password" type="password"
value={emailPassword} value={emailPassword}
onChange={(e) => setEmailPassword(e.target.value)} onChange={(e) => setEmailPassword(e.target.value)}
@@ -710,8 +717,11 @@ export default function ConnectedAccounts() {
<p className="mt-1 text-xs text-dark-500">{t('profile.passwordHint')}</p> <p className="mt-1 text-xs text-dark-500">{t('profile.passwordHint')}</p>
</div> </div>
<div> <div>
<label className="label">{t('auth.confirmPassword')}</label> <label htmlFor="email-link-confirm" className="label">
{t('auth.confirmPassword')}
</label>
<input <input
id="email-link-confirm"
type="password" type="password"
value={emailConfirmPassword} value={emailConfirmPassword}
onChange={(e) => setEmailConfirmPassword(e.target.value)} onChange={(e) => setEmailConfirmPassword(e.target.value)}