mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-01-16 14:32: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 severityId = useId();
|
||||||
const startDateId = useId();
|
const startDateId = useId();
|
||||||
const endDateId = useId();
|
const endDateId = useId();
|
||||||
|
const modalTitleId = useId();
|
||||||
const [auditLogs, setAuditLogs] = useState<AuditLog[]>([]);
|
const [auditLogs, setAuditLogs] = useState<AuditLog[]>([]);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
@ -468,11 +469,23 @@ export default function AuditLogsPage() {
|
|||||||
|
|
||||||
{/* Log Detail Modal */}
|
{/* Log Detail Modal */}
|
||||||
{selectedLog && (
|
{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="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-auto">
|
||||||
<div className="p-6">
|
<div className="p-6">
|
||||||
<div className="flex justify-between items-center mb-4">
|
<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 variant="ghost" onClick={() => setSelectedLog(null)}>
|
||||||
×
|
×
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
Reference in New Issue
Block a user