kjanat/livedash-node
1
0
Fork 0
mirror of https://github.com/kjanat/livedash-node.git synced 2026-01-16 13:12:10 +01:00
Code Issues Packages Projects Releases Wiki Activity

a11y: enhance modal accessibility in audit logs page

Browse Source 
- 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:
Kaj Kowalski
2025-07-13 17:01:38 +02:00
parent 351f3cfe21
commit 76880f9c42
2 changed files with 24 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/dashboard/audit-logs/page.tsx
View File

@ -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>

18
docs/csp-metrics-api.md
View File

@ -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: The CSP Metrics API provides comprehensive monitoring of Content Security Policy violations, including:
- Real-time violation tracking and metrics - Real-time violation tracking and metrics
- Bypass attempt detection and risk assessment - Bypass attempt detection and risk assessment
- Policy optimization recommendations - Policy optimization recommendations
- Historical trend analysis - Historical trend analysis
- Export capabilities for security analysis - Export capabilities for security analysis
## API Endpoints ## API Endpoints
@ -43,10 +43,10 @@ POST /api/csp-report
#### Features #### Features
- **Rate Limiting**: 10 reports per minute per IP - **Rate Limiting**: 10 reports per minute per IP
- **Risk Assessment**: Automatic classification of violation severity - **Risk Assessment**: Automatic classification of violation severity
- **Bypass Detection**: Identifies potential CSP bypass attempts - **Bypass Detection**: Identifies potential CSP bypass attempts
- **Real-time Processing**: Immediate analysis and alerting - **Real-time Processing**: Immediate analysis and alerting
### CSP Metrics API ### CSP Metrics API