From 7b8f4812d2929668a5d7a41a6c719ce10eed20ab Mon Sep 17 00:00:00 2001
From: Anto Subash <antosubash@live.com>
Date: Mon, 25 May 2026 22:26:39 +0200
Subject: [PATCH] fix(ui): add main landmark to AuthCardShell for screen
 readers (#174)

Change the outermost <div> to <main> so auth pages (login, register,
forgot password, etc.) expose a proper landmark region to assistive
technology.
---
 packages/ui/src/layouts/AuthCardShell.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/layouts/AuthCardShell.tsx b/packages/ui/src/layouts/AuthCardShell.tsx
index 73c8c867..1a8fcf7a 100644
--- a/packages/ui/src/layouts/AuthCardShell.tsx
+++ b/packages/ui/src/layouts/AuthCardShell.tsx
@@ -9,7 +9,7 @@ import type React from 'react';
  */
 export function AuthCardShell({ children }: { children: React.ReactNode }) {
   return (
-    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-secondary/40 p-4">
+    <main className="relative flex min-h-screen items-center justify-center overflow-hidden bg-secondary/40 p-4">
       <div aria-hidden="true" className="pointer-events-none absolute inset-0 overflow-hidden">
         <div className="absolute -top-[10%] -right-[10%] h-[600px] w-[600px] rounded-full bg-primary-600 opacity-15 blur-[100px]" />
         <div className="absolute -bottom-[10%] -left-[10%] h-[500px] w-[500px] rounded-full bg-primary-800 opacity-15 blur-[100px]" />
@@ -30,6 +30,6 @@ export function AuthCardShell({ children }: { children: React.ReactNode }) {
           {children}
         </div>
       </div>
-    </div>
+    </main>
   );
 }