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:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user