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
This commit is contained in:
2026-04-18 14:15:25 +00:00
parent 38d0a4a8f7
commit 1bd287451f

View File

@@ -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>
);
}