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