🎨 Palette: Improve accessibility for icon-only buttons

.Jules/palette.md

@@ -1,3 +1,6 @@
 ## 2024-05-22 - [Inaccessible Custom File Uploads]
 **Learning:** The app uses custom-styled `div` elements with `onClick` for file uploads, bypassing native keyboard accessibility and screen reader support.
 **Action:** Always replace these with semantic `<button type="button">` or `<label>` elements wrapping the input, ensuring `type="button"` prevents form submission and adding `focus-visible` styles for keyboard users.
+## 2024-05-23 - [Inconsistent Password Toggles]
+**Learning:** Password visibility toggles are manually implemented across multiple files using icon buttons inside `Input` wrappers, consistently lacking `aria-label` and keyboard focus styles.
+**Action:** When touching authentication forms, always add localized `aria-label` (e.g., 'Show password') and ensure `focus-visible` styles match the input's focus ring.

src/contexts/LanguageContext.tsx

@@ -110,6 +110,8 @@ const translations: Record<Language, Record<string, string>> = {
     'auth.welcomeBack': 'Welcome back',
     'auth.loginSubtitle': 'Sign in to your account',
     'auth.demoAccounts': 'Demo Accounts',
+    'auth.showPassword': 'Show password',
+    'auth.hidePassword': 'Hide password',
 
     // New Auth translations
     'error': 'Error',
@@ -381,6 +383,8 @@ const translations: Record<Language, Record<string, string>> = {
     'auth.welcomeBack': 'مرحباً بعودتك',
     'auth.loginSubtitle': 'سجل دخولك إلى حسابك',
     'auth.demoAccounts': 'حسابات تجريبية',
+    'auth.showPassword': 'إظهار كلمة المرور',
+    'auth.hidePassword': 'إخفاء كلمة المرور',
 
     // New Auth translations
     'error': 'خطأ',

src/pages/Auth.tsx

@@ -143,7 +143,8 @@ export default function Auth() {
                   <button
                     type="button"
                     onClick={() => setShowPassword(!showPassword)}
-                    className="absolute top-1/2 -translate-y-1/2 ltr:right-3 rtl:left-3 text-muted-foreground hover:text-foreground"
+                    className="absolute top-1/2 -translate-y-1/2 ltr:right-3 rtl:left-3 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm"
+                    aria-label={showPassword ? t('auth.hidePassword') : t('auth.showPassword')}
                   >
                     {showPassword ? (
                       <EyeOff className="h-4 w-4" />
@@ -169,6 +170,7 @@ export default function Auth() {
               size="icon"
               className="rounded-full bg-white/50 backdrop-blur-sm hover:bg-white/80 text-black hover:text-black shadow-sm border border-gray-100 dark:bg-black/50 dark:hover:bg-black/80 dark:text-white dark:hover:text-white dark:border-gray-800"
               title={t('theme.toggle')}
+              aria-label={t('theme.toggle')}
             >
               <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
               <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
@@ -196,6 +198,7 @@ export default function Auth() {
           className="rounded-full bg-white/50 backdrop-blur-sm hover:bg-white/80 text-black hover:text-black shadow-sm border border-gray-100 dark:bg-black/50 dark:hover:bg-black/80 dark:text-white dark:hover:text-white dark:border-gray-800"
           onClick={() => setLanguage(language === 'en' ? 'ar' : 'en')}
           title={language === 'en' ? 'Switch to Arabic' : 'Switch to English'}
+          aria-label={language === 'en' ? 'Switch to Arabic' : 'Switch to English'}
         >
           <Languages className="h-5 w-5" />
         </Button>

src/pages/admin/AddUserForm.tsx

@@ -358,7 +358,8 @@ export function AddUserForm({ onSuccess, defaultIsAshbal = false }: AddUserFormP
             <button
               type="button"
               onClick={() => setShowPassword(!showPassword)}
-              className="absolute top-1/2 -translate-y-1/2 ltr:right-3 rtl:left-3 text-muted-foreground hover:text-foreground"
+              className="absolute top-1/2 -translate-y-1/2 ltr:right-3 rtl:left-3 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm"
+              aria-label={showPassword ? t('auth.hidePassword') : t('auth.showPassword')}
             >
               {showPassword ? (
                 <EyeOff className="h-4 w-4" />

src/pages/admin/UserManagement.tsx

@@ -1091,7 +1091,8 @@ export default function UserManagement() {
                     <button
                       type="button"
                       onClick={() => setShowPassword(!showPassword)}
-                      className="absolute top-1/2 -translate-y-1/2 ltr:right-3 rtl:left-3 text-muted-foreground hover:text-foreground"
+                      className="absolute top-1/2 -translate-y-1/2 ltr:right-3 rtl:left-3 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm"
+                      aria-label={showPassword ? t('auth.hidePassword') : t('auth.showPassword')}
                     >
                       {showPassword ? (
                         <EyeOff className="h-4 w-4" />
@@ -1479,7 +1480,8 @@ export default function UserManagement() {
                     <button
                       type="button"
                       onClick={() => setShowPassword(!showPassword)}
-                      className="absolute top-1/2 -translate-y-1/2 ltr:right-3 rtl:left-3 text-muted-foreground hover:text-foreground"
+                      className="absolute top-1/2 -translate-y-1/2 ltr:right-3 rtl:left-3 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm"
+                      aria-label={showPassword ? t('auth.hidePassword') : t('auth.showPassword')}
                     >
                       {showPassword ? (
                         <EyeOff className="h-4 w-4" />