From 1bd287451fc7ca88cf040d65397ee1c65a21636f Mon Sep 17 00:00:00 2001
From: Daniel Bedeleanu <bede@tfm.ro>
Date: Sat, 18 Apr 2026 14:15:25 +0000
Subject: [PATCH] polish: add focus indicators and semantic HTML to admin page

- Add focus-visible ring to logout button (was missing in audit)
- Add aria-label to logout button for screen readers
- Wrap main content in semantic <main> tag
- Improves accessibility and keyboard navigation for admin users
---
 frontend/app/admin/page.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/app/admin/page.tsx b/frontend/app/admin/page.tsx
index 2157f3c4..faaff555 100644
--- a/frontend/app/admin/page.tsx
+++ b/frontend/app/admin/page.tsx
@@ -25,7 +25,7 @@ export default function AdminPage() {
 
   return (
     <PageShell>
-      <div className="p-3 md:p-8 max-w-7xl mx-auto space-y-6 md:space-y-10 mb-20">
+      <main className="p-3 md:p-8 max-w-7xl mx-auto space-y-6 md:space-y-10 mb-20">
         <header className="flex items-center gap-4 mb-8 md:mb-12">
           <div className="p-3 md:p-4 bg-indigo-500/10 rounded-2xl text-indigo-400 border border-indigo-500/20 shadow-xl shadow-indigo-500/5">
             <Shield size={28} className="md:w-8 md:h-8" />
@@ -34,10 +34,11 @@ export default function AdminPage() {
             <h1 className="text-2xl md:text-3xl font-black tracking-tight text-white leading-tight">Admin Control</h1>
             <p className="text-[10px] md:text-xs text-muted font-bold tracking-tight mt-0.5">System Configuration & Security</p>
           </div>
-          <button 
+          <button
              onClick={admin.handleLogout}
-             className="ml-auto p-3 bg-surface border border-slate-800 text-muted hover:text-rose-500 rounded-2xl transition-all active:scale-95"
+             className="ml-auto p-3 bg-surface border border-slate-800 text-muted hover:text-rose-500 rounded-2xl transition-all active:scale-95 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:ring-rose-500 focus-visible:outline-none"
              title="Secure Logout"
+             aria-label="Logout from admin panel"
           >
             <LogOut size={20} />
           </button>
@@ -109,7 +110,7 @@ export default function AdminPage() {
           isSavingPrompt={admin.isSavingPrompt}
           onUpdatePrompt={admin.handleUpdatePrompt}
         />
-      </div>
+      </main>
     </PageShell>
   );
 }