bede/tfm_ainventory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

polish: add focus indicators and semantic HTML to admin page

Browse Source 
- 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:
Daniel Bedeleanu
2026-04-18 14:15:25 +00:00
parent 38d0a4a8f7
commit 1bd287451f
1 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/app/admin/page.tsx
View File

@@ -25,7 +25,7 @@ export default function AdminPage() {
return ( return (
<PageShell> <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"> <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"> <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" /> <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> <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> <p className="text-[10px] md:text-xs text-muted font-bold tracking-tight mt-0.5">System Configuration & Security</p>
</div> </div>
<button <button
onClick={admin.handleLogout} 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" title="Secure Logout"
aria-label="Logout from admin panel"
> >
<LogOut size={20} /> <LogOut size={20} />
</button> </button>
@@ -109,7 +110,7 @@ export default function AdminPage() {
isSavingPrompt={admin.isSavingPrompt} isSavingPrompt={admin.isSavingPrompt}
onUpdatePrompt={admin.handleUpdatePrompt} onUpdatePrompt={admin.handleUpdatePrompt}
/> />
</div> </main>
</PageShell> </PageShell>
); );
} }