mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-01-16 11:12:11 +01:00
a11y: enhance modal accessibility in audit logs page
- Add role="dialog" and aria-modal="true" for proper dialog semantics - Add aria-labelledby with unique ID for screen readers - Add Escape key handler for keyboard navigation - Use useId() for unique modal title ID to prevent conflicts Improves WCAG compliance and assistive technology support
This commit is contained in:
@ -113,6 +113,7 @@ export default function AuditLogsPage() {
|
||||
const severityId = useId();
|
||||
const startDateId = useId();
|
||||
const endDateId = useId();
|
||||
const modalTitleId = useId();
|
||||
const [auditLogs, setAuditLogs] = useState<AuditLog[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
@ -468,11 +469,23 @@ export default function AuditLogsPage() {
|
||||
|
||||
{/* Log Detail Modal */}
|
||||
{selectedLog && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||||
<div
|
||||
className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby={modalTitleId}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Escape") {
|
||||
setSelectedLog(null);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-auto">
|
||||
<div className="p-6">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-xl font-bold">Audit Log Details</h2>
|
||||
<h2 id={modalTitleId} className="text-xl font-bold">
|
||||
Audit Log Details
|
||||
</h2>
|
||||
<Button variant="ghost" onClick={() => setSelectedLog(null)}>
|
||||
×
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user