From 76880f9c4226772b6b1c1a98a1358911f600a040 Mon Sep 17 00:00:00 2001
From: Kaj Kowalski <dev@kajkowalski.nl>
Date: Sun, 13 Jul 2025 17:01:38 +0200
Subject: [PATCH] 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
---
 app/dashboard/audit-logs/page.tsx | 17 +++++++++++++++--
 docs/csp-metrics-api.md           | 18 +++++++++---------
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/app/dashboard/audit-logs/page.tsx b/app/dashboard/audit-logs/page.tsx
index 79ab2d4..3c5c6e3 100644
--- a/app/dashboard/audit-logs/page.tsx
+++ b/app/dashboard/audit-logs/page.tsx
@@ -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>
diff --git a/docs/csp-metrics-api.md b/docs/csp-metrics-api.md
index f87467f..c19212d 100644
--- a/docs/csp-metrics-api.md
+++ b/docs/csp-metrics-api.md
@@ -6,11 +6,11 @@ This document describes the Content Security Policy (CSP) metrics and violation
 
 The CSP Metrics API provides comprehensive monitoring of Content Security Policy violations, including:
 
-  - Real-time violation tracking and metrics
-  - Bypass attempt detection and risk assessment
-  - Policy optimization recommendations
-  - Historical trend analysis
-  - Export capabilities for security analysis
+- Real-time violation tracking and metrics
+- Bypass attempt detection and risk assessment
+- Policy optimization recommendations
+- Historical trend analysis
+- Export capabilities for security analysis
 
 ## API Endpoints
 
@@ -43,10 +43,10 @@ POST /api/csp-report
 
 #### Features
 
-  - **Rate Limiting**: 10 reports per minute per IP
-  - **Risk Assessment**: Automatic classification of violation severity
-  - **Bypass Detection**: Identifies potential CSP bypass attempts
-  - **Real-time Processing**: Immediate analysis and alerting
+- **Rate Limiting**: 10 reports per minute per IP
+- **Risk Assessment**: Automatic classification of violation severity
+- **Bypass Detection**: Identifies potential CSP bypass attempts
+- **Real-time Processing**: Immediate analysis and alerting
 
 ### CSP Metrics API