From 7892630e3bd4006e7f5dcd95d5e378c8a4d7e8f7 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Thu, 2 Apr 2026 07:16:00 +0300
Subject: [PATCH] fix: add key prop to AnimatePresence, accessibility labels,
 remove hardcoded fallback

- 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')
---
 src/pages/ConnectedAccounts.tsx | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/pages/ConnectedAccounts.tsx b/src/pages/ConnectedAccounts.tsx
index 824b5c4..e89e0a6 100644
--- a/src/pages/ConnectedAccounts.tsx
+++ b/src/pages/ConnectedAccounts.tsx
@@ -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)}