[WEB-4197] chore: auth forms semantics and accessibility

packages/i18n/src/locales/cs/accessibility.json

@@ -22,6 +22,13 @@
       "collapse_sidebar": "Sbalit postranní panel",
       "expand_sidebar": "Rozbalit postranní panel",
       "edition_badge": "Otevřít modal placených plánů"
+    },
+    "auth_forms": {
+      "clear_email": "Vymazat e-mail",
+      "show_password": "Zobrazit heslo",
+      "hide_password": "Skrýt heslo",
+      "close_alert": "Zavřít upozornění",
+      "close_popover": "Zavřít vyskakovací okno"
     }
   }
-}
+}

packages/i18n/src/locales/de/accessibility.json

@@ -22,6 +22,13 @@
       "collapse_sidebar": "Seitenleiste einklappen",
       "expand_sidebar": "Seitenleiste ausklappen",
       "edition_badge": "Modal für kostenpflichtige Pläne öffnen"
+    },
+    "auth_forms": {
+      "clear_email": "E-Mail löschen",
+      "show_password": "Passwort anzeigen",
+      "hide_password": "Passwort verbergen",
+      "close_alert": "Warnung schließen",
+      "close_popover": "Popover schließen"
     }
   }
-}
+}

packages/i18n/src/locales/en/accessibility.json

@@ -22,6 +22,13 @@
       "collapse_sidebar": "Collapse sidebar",
       "expand_sidebar": "Expand sidebar",
       "edition_badge": "Open paid plans' modal"
+    },
+    "auth_forms": {
+      "clear_email": "Clear email",
+      "show_password": "Show password",
+      "hide_password": "Hide password",
+      "close_alert": "Close alert",
+      "close_popover": "Close popover"
     }
   }
-}
+}

packages/i18n/src/locales/es/accessibility.json

@@ -22,6 +22,13 @@
       "collapse_sidebar": "Colapsar barra lateral",
       "expand_sidebar": "Expandir barra lateral",
       "edition_badge": "Abrir modal de planes de pago"
+    },
+    "auth_forms": {
+      "clear_email": "Limpiar correo electrónico",
+      "show_password": "Mostrar contraseña",
+      "hide_password": "Ocultar contraseña",
+      "close_alert": "Cerrar alerta",
+      "close_popover": "Cerrar ventana emergente"
     }
   }
-}
+}

packages/i18n/src/locales/fr/accessibility.json

@@ -22,6 +22,13 @@
       "collapse_sidebar": "Réduire la barre latérale",
       "expand_sidebar": "Étendre la barre latérale",
       "edition_badge": "Ouvrir le modal des plans payants"
+    },
+    "auth_forms": {
+      "clear_email": "Effacer l'e-mail",
+      "show_password": "Afficher le mot de passe",
+      "hide_password": "Masquer le mot de passe",
+      "close_alert": "Fermer l'alerte",
+      "close_popover": "Fermer la fenêtre contextuelle"
     }
   }
-}
+}

packages/i18n/src/locales/id/accessibility.json

@@ -22,6 +22,13 @@
       "collapse_sidebar": "Tutup sidebar",
       "expand_sidebar": "Perluas sidebar",
       "edition_badge": "Buka modal paket berbayar"
+    },
+    "auth_forms": {
+      "clear_email": "Hapus email",
+      "show_password": "Tampilkan kata sandi",
+      "hide_password": "Sembunyikan kata sandi",
+      "close_alert": "Tutup peringatan",
+      "close_popover": "Tutup popover"
     }
   }
-}
+}

packages/i18n/src/locales/it/accessibility.json

@@ -22,6 +22,13 @@
       "collapse_sidebar": "Comprimi barra laterale",
       "expand_sidebar": "Espandi barra laterale",
       "edition_badge": "Apri modal piani a pagamento"
+    },
+    "auth_forms": {
+      "clear_email": "Cancella email",
+      "show_password": "Mostra password",
+      "hide_password": "Nascondi password",
+      "close_alert": "Chiudi avviso",
+      "close_popover": "Chiudi popover"
     }
   }
-}
+}

packages/i18n/src/locales/ja/accessibility.json

@@ -22,6 +22,13 @@
       "collapse_sidebar": "サイドバーを折りたたむ",
       "expand_sidebar": "サイドバーを展開",
       "edition_badge": "有料プランのモーダルを開く"
+    },
+    "auth_forms": {
+      "clear_email": "メールをクリア",
+      "show_password": "パスワードを表示",
+      "hide_password": "パスワードを非表示",
+      "close_alert": "アラートを閉じる",
+      "close_popover": "ポップオーバーを閉じる"
     }
   }
-}
+}

packages/i18n/src/locales/ko/accessibility.json

@@ -22,6 +22,13 @@
       "collapse_sidebar": "사이드바 축소",
       "expand_sidebar": "사이드바 확장",
       "edition_badge": "유료 플랜 모달 열기"
+    },
+    "auth_forms": {
+      "clear_email": "이메일 지우기",
+      "show_password": "비밀번호 표시",
+      "hide_password": "비밀번호 숨기기",
+      "close_alert": "알림 닫기",
+      "close_popover": "팝오버 닫기"
     }
   }
-}
+}

packages/i18n/src/locales/pl/accessibility.json

@@ -22,6 +22,13 @@
       "collapse_sidebar": "Zwiń pasek boczny",
       "expand_sidebar": "Rozwiń pasek boczny",
       "edition_badge": "Otwórz modal płatnych planów"
+    },
+    "auth_forms": {
+      "clear_email": "Wyczyść e-mail",
+      "show_password": "Pokaż hasło",
+      "hide_password": "Ukryj hasło",
+      "close_alert": "Zamknij alert",
+      "close_popover": "Zamknij popover"
     }
   }
-}
+}

packages/i18n/src/locales/pt-BR/accessibility.json

@@ -22,6 +22,13 @@
       "collapse_sidebar": "Recolher barra lateral",
       "expand_sidebar": "Expandir barra lateral",
       "edition_badge": "Abrir modal de planos pagos"
+    },
+    "auth_forms": {
+      "clear_email": "Limpar e-mail",
+      "show_password": "Mostrar senha",
+      "hide_password": "Ocultar senha",
+      "close_alert": "Fechar alerta",
+      "close_popover": "Fechar popover"
     }
   }
-}
+}

packages/i18n/src/locales/ro/accessibility.json

@@ -22,6 +22,13 @@
       "collapse_sidebar": "Restrânge bara laterală",
       "expand_sidebar": "Extinde bara laterală",
       "edition_badge": "Deschide modalul planurilor plătite"
+    },
+    "auth_forms": {
+      "clear_email": "Șterge e-mailul",
+      "show_password": "Afișează parola",
+      "hide_password": "Ascunde parola",
+      "close_alert": "Închide alerta",
+      "close_popover": "Închide popover-ul"
     }
   }
-}
+}

packages/i18n/src/locales/ru/accessibility.json

@@ -22,6 +22,13 @@
       "collapse_sidebar": "Свернуть боковую панель",
       "expand_sidebar": "Развернуть боковую панель",
       "edition_badge": "Открыть модал платных планов"
+    },
+    "auth_forms": {
+      "clear_email": "Очистить email",
+      "show_password": "Показать пароль",
+      "hide_password": "Скрыть пароль",
+      "close_alert": "Закрыть уведомление",
+      "close_popover": "Закрыть всплывающее окно"
     }
   }
-}
+}

packages/i18n/src/locales/sk/accessibility.json

@@ -22,6 +22,13 @@
       "collapse_sidebar": "Zbaliť bočný panel",
       "expand_sidebar": "Rozbaliť bočný panel",
       "edition_badge": "Otvoriť modal platených plánov"
+    },
+    "auth_forms": {
+      "clear_email": "Vymazať e-mail",
+      "show_password": "Zobraziť heslo",
+      "hide_password": "Skryť heslo",
+      "close_alert": "Zavrieť upozornenie",
+      "close_popover": "Zavrieť vyskakovacie okno"
     }
   }
-}
+}

packages/i18n/src/locales/tr-TR/accessibility.json

@@ -22,6 +22,13 @@
       "collapse_sidebar": "Kenar çubuğunu daralt",
       "expand_sidebar": "Kenar çubuğunu genişlet",
       "edition_badge": "Ücretli planlar modalını aç"
+    },
+    "auth_forms": {
+      "clear_email": "E-postayı temizle",
+      "show_password": "Şifreyi göster",
+      "hide_password": "Şifreyi gizle",
+      "close_alert": "Uyarıyı kapat",
+      "close_popover": "Açılır pencereyi kapat"
     }
   }
-}
+}

packages/i18n/src/locales/ua/accessibility.json

@@ -22,6 +22,13 @@
       "collapse_sidebar": "Згорнути бічну панель",
       "expand_sidebar": "Розгорнути бічну панель",
       "edition_badge": "Відкрити модал платних планів"
+    },
+    "auth_forms": {
+      "clear_email": "Очистити email",
+      "show_password": "Показати пароль",
+      "hide_password": "Приховати пароль",
+      "close_alert": "Закрити сповіщення",
+      "close_popover": "Закрити спливаюче вікно"
     }
   }
-}
+}

packages/i18n/src/locales/vi-VN/accessibility.json

@@ -22,6 +22,13 @@
       "collapse_sidebar": "Thu gọn thanh bên",
       "expand_sidebar": "Mở rộng thanh bên",
       "edition_badge": "Mở modal gói trả phí"
+    },
+    "auth_forms": {
+      "clear_email": "Xóa email",
+      "show_password": "Hiển thị mật khẩu",
+      "hide_password": "Ẩn mật khẩu",
+      "close_alert": "Đóng cảnh báo",
+      "close_popover": "Đóng popover"
     }
   }
-}
+}

packages/i18n/src/locales/zh-CN/accessibility.json

@@ -22,6 +22,13 @@
       "collapse_sidebar": "折叠侧边栏",
       "expand_sidebar": "展开侧边栏",
       "edition_badge": "打开付费计划模态框"
+    },
+    "auth_forms": {
+      "clear_email": "清除邮箱",
+      "show_password": "显示密码",
+      "hide_password": "隐藏密码",
+      "close_alert": "关闭警告",
+      "close_popover": "关闭弹出框"
     }
   }
-}
+}

packages/i18n/src/locales/zh-TW/accessibility.json

@@ -22,6 +22,13 @@
       "collapse_sidebar": "摺疊側邊欄",
       "expand_sidebar": "展開側邊欄",
       "edition_badge": "打開付費計劃模態框"
+    },
+    "auth_forms": {
+      "clear_email": "清除電子郵件",
+      "show_password": "顯示密碼",
+      "hide_password": "隱藏密碼",
+      "close_alert": "關閉警告",
+      "close_popover": "關閉彈出框"
     }
   }
-}
+}

web/app/layout.tsx

@@ -69,7 +69,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
               "app-container"
             )}
           >
-            <div className="w-full h-full overflow-hidden relative">{children}</div>
+            <main className="w-full h-full overflow-hidden relative">{children}</main>
           </div>
         </AppProvider>
       </body>

web/core/components/account/auth-forms/auth-banner.tsx

@@ -1,5 +1,7 @@
 import { FC } from "react";
 import { Info, X } from "lucide-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
 // helpers
 import { TAuthErrorInfo } from "@/helpers/authentication.helper";
 
@@ -10,20 +12,28 @@ type TAuthBanner = {
 
 export const AuthBanner: FC<TAuthBanner> = (props) => {
   const { bannerData, handleBannerData } = props;
+  // translation
+  const { t } = useTranslation();
 
   if (!bannerData) return <></>;
+
   return (
-    <div className="relative flex items-center p-2 rounded-md gap-2 border border-custom-primary-100/50 bg-custom-primary-100/10">
-      <div className="w-4 h-4 flex-shrink-0 relative flex justify-center items-center">
+    <div
+      role="alert"
+      className="relative flex items-center p-2 rounded-md gap-2 border border-custom-primary-100/50 bg-custom-primary-100/10"
+    >
+      <div className="size-4 flex-shrink-0 grid place-items-center">
         <Info size={16} className="text-custom-primary-100" />
       </div>
-      <div className="w-full text-sm font-medium text-custom-primary-100">{bannerData?.message}</div>
-      <div
-        className="relative ml-auto w-6 h-6 rounded-sm flex justify-center items-center transition-all cursor-pointer hover:bg-custom-primary-100/20 text-custom-primary-100/80"
-        onClick={() => handleBannerData && handleBannerData(undefined)}
+      <p className="w-full text-sm font-medium text-custom-primary-100">{bannerData?.message}</p>
+      <button
+        type="button"
+        className="relative ml-auto size-6 rounded-sm grid place-items-center transition-all hover:bg-custom-primary-100/20 text-custom-primary-100/80"
+        onClick={() => handleBannerData?.(undefined)}
+        aria-label={t("aria_labels.auth_forms.close_alert")}
       >
-        <X className="w-4 h-4 flex-shrink-0" />
-      </div>
+        <X className="size-4" />
+      </button>
     </div>
   );
 };

web/core/components/account/auth-forms/auth-header.tsx

@@ -102,9 +102,9 @@ export const AuthHeader: FC<TAuthHeader> = observer((props) => {
   return (
     <>
       <div className="space-y-1 text-center">
-        <h3 className="text-3xl font-bold text-onboarding-text-100">
+        <h1 className="text-3xl font-bold text-onboarding-text-100">
           {typeof header === "string" ? t(header) : header}
-        </h3>
+        </h1>
         <p className="font-medium text-onboarding-text-400">{t(subHeader)}</p>
       </div>
       {children}

web/core/components/account/auth-forms/email.tsx

@@ -47,7 +47,7 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
   return (
     <form onSubmit={handleFormSubmit} className="mt-5 space-y-4">
       <div className="space-y-1">
-        <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
+        <label htmlFor="email" className="text-sm text-onboarding-text-300 font-medium">
           {t("auth.common.email.label")}
         </label>
         <div
@@ -76,13 +76,17 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
             ref={inputRef}
           />
           {email.length > 0 && (
-            <XCircle
-              className="h-[46px] w-11 px-3 stroke-custom-text-400 hover:cursor-pointer text-xs"
+            <button
+              type="button"
               onClick={() => {
                 setEmail("");
                 inputRef.current?.focus();
               }}
-            />
+              className="absolute right-3 size-5 grid place-items-center"
+              aria-label={t("aria_labels.auth_forms.clear_email")}
+            >
+              <XCircle className="size-5 stroke-custom-text-400" />
+            </button>
           )}
         </div>
         {emailError?.email && !isFocused && (