improve auth accessibility and consistency

packages/web/src/components/auth/AuthButtons.jsx

@@ -1,5 +1,4 @@
 import { AnimatedShow } from '../AnimatedShow.jsx';
-import { AiOutlineLoading3Quarters } from 'solid-icons/ai';
 
 /**
  * Primary button for auth forms
@@ -18,11 +17,16 @@ export function PrimaryButton(props) {
       class='flex w-full items-center justify-center rounded-lg bg-blue-600 py-2 text-sm font-bold text-white shadow transition hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50 sm:rounded-xl sm:py-3 sm:text-base'
       disabled={props.disabled || props.loading}
       onClick={() => props.onClick?.()}
+      aria-busy={props.loading}
     >
       <AnimatedShow when={props.loading} fallback={props.children}>
         <div class='flex items-center'>
-          <AiOutlineLoading3Quarters class='mr-2 animate-spin' size={22} />
-          {props.loadingText || 'Loading...'}
+          <div
+            role='status'
+            aria-label={props.loadingText || 'Loading'}
+            class='mr-2 h-5 w-5 animate-spin rounded-full border-2 border-white border-t-transparent'
+          />
+          <span aria-live='polite'>{props.loadingText || 'Loading...'}</span>
         </div>
       </AnimatedShow>
     </button>

packages/web/src/components/auth/AuthLayout.jsx

@@ -60,9 +60,7 @@ export default function AuthLayout(props) {
           </div>
         </div>
       </Show>
-      <Show when={showContent()}>
-        <div class='w-full max-w-md sm:max-w-xl'>{props.children}</div>
-      </Show>
+      <Show when={showContent()}>{props.children}</Show>
     </div>
   );
 }

packages/web/src/components/auth/CheckEmail.jsx

@@ -121,68 +121,71 @@ export default function CheckEmail() {
   };
 
   return (
-    <div class='flex h-full items-center justify-center bg-blue-50 px-4 py-6 sm:py-12'>
-      <div class='relative w-full max-w-md space-y-6 rounded-xl border border-gray-100 bg-white p-6 text-center shadow-2xl sm:max-w-xl sm:rounded-3xl sm:p-12'>
-        {/* Logo */}
-        <a href='/' class='absolute top-4 left-4 sm:top-6 sm:left-6'>
-          <img src='/logo.svg' alt='CoRATES' class='h-6 w-auto sm:h-7' />
-        </a>
-
-        {loading() ?
-          <>
-            <div class='flex justify-center'>
-              <AiOutlineLoading3Quarters class='animate-spin text-blue-600' size={48} />
-            </div>
-            <h2 class='text-xl font-bold text-gray-900 sm:text-2xl'>Email Verified!</h2>
-            <p class='text-sm text-gray-600 sm:text-base'>Redirecting you to the dashboard...</p>
-          </>
-        : <>
-            <div class='flex justify-center'>
-              <div class='rounded-full bg-blue-100 p-4'>
-                <AiOutlineMail class='text-blue-600' size={48} />
-              </div>
-            </div>
-
-            <div>
-              <h2 class='mb-2 text-xl font-bold text-gray-900 sm:text-2xl'>Check Your Email</h2>
-              <p class='text-sm text-gray-600 sm:text-base'>We've sent a verification email to:</p>
-              <p class='mt-1 text-sm font-semibold text-blue-600 sm:text-base'>{email()}</p>
+    <div class='relative w-full max-w-md space-y-6 rounded-xl border border-gray-100 bg-white p-6 text-center shadow-2xl sm:max-w-xl sm:rounded-3xl sm:p-12'>
+      {/* Logo */}
+      <a href='/' class='absolute top-4 left-4 sm:top-6 sm:left-6'>
+        <img src='/logo.svg' alt='CoRATES' class='h-6 w-auto sm:h-7' />
+      </a>
+
+      {loading() ?
+        <>
+          <div class='flex justify-center'>
+            <AiOutlineLoading3Quarters
+              class='animate-spin text-blue-600'
+              size={48}
+              role='status'
+              aria-label='Verifying email'
+            />
+          </div>
+          <h2 class='text-xl font-bold text-gray-900 sm:text-2xl'>Email Verified!</h2>
+          <p class='text-sm text-gray-600 sm:text-base'>Redirecting you to the dashboard...</p>
+        </>
+      : <>
+          <div class='flex justify-center'>
+            <div class='rounded-full bg-blue-100 p-4'>
+              <AiOutlineMail class='text-blue-600' size={48} />
             </div>
+          </div>
 
-            <div class='space-y-4'>
-              <p class='text-xs text-gray-500 sm:text-sm'>
-                Click the verification link in your email to activate your account. Once verified,
-                you'll automatically be redirected to the dashboard.
-              </p>
+          <div>
+            <h2 class='mb-2 text-xl font-bold text-gray-900 sm:text-2xl'>Check Your Email</h2>
+            <p class='text-sm text-gray-600 sm:text-base'>We've sent a verification email to:</p>
+            <p class='mt-1 text-sm font-semibold text-blue-600 sm:text-base'>{email()}</p>
+          </div>
 
-              <ErrorMessage displayError={displayError} />
+          <div class='space-y-4'>
+            <p class='text-xs text-gray-500 sm:text-sm'>
+              Click the verification link in your email to activate your account. Once verified,
+              you'll automatically be redirected to the dashboard.
+            </p>
 
-              {resent() && (
-                <div class='rounded-lg border border-green-200 bg-green-50 p-3 text-xs text-green-600 sm:text-sm'>
-                  Verification email sent successfully!
-                </div>
-              )}
-            </div>
+            <ErrorMessage displayError={displayError} />
 
-            <div class='space-y-3'>
-              <PrimaryButton
-                loading={resending()}
-                loadingText='Sending...'
-                type='button'
-                onClick={handleResendEmail}
-              >
-                Resend Email
-              </PrimaryButton>
-
-              <SecondaryButton onClick={handleBackToSignIn}>Back to Sign In</SecondaryButton>
-            </div>
-
-            <div class='text-xs text-gray-400 sm:text-sm'>
-              <p>Didn't receive the email? Check your spam folder or try resending.</p>
-            </div>
-          </>
-        }
-      </div>
+            {resent() && (
+              <div class='rounded-lg border border-green-200 bg-green-50 p-3 text-xs text-green-600 sm:text-sm'>
+                Verification email sent successfully!
+              </div>
+            )}
+          </div>
+
+          <div class='space-y-3'>
+            <PrimaryButton
+              loading={resending()}
+              loadingText='Sending...'
+              type='button'
+              onClick={handleResendEmail}
+            >
+              Resend Email
+            </PrimaryButton>
+
+            <SecondaryButton onClick={handleBackToSignIn}>Back to Sign In</SecondaryButton>
+          </div>
+
+          <div class='text-xs text-gray-400 sm:text-sm'>
+            <p>Didn't receive the email? Check your spam folder or try resending.</p>
+          </div>
+        </>
+      }
     </div>
   );
 }