feat(accessibility-final): ARIA labels + keyboard-trap-modal-fix + focus-management [tsc:fail]

.phase30-state.json

@@ -1,8 +1,9 @@
 {
   "completed_features": [],
-  "current_feature": "api-error-pages",
+  "current_feature": "accessibility-final",
   "started_at": "2026-05-23T09:23:38.401372",
   "attempted_features": [
-    "404-not-found-page"
+    "404-not-found-page",
+    "api-error-pages"
   ]
 }

GENERATION_LOG.md

@@ -3419,3 +3419,21 @@ src/index.ts(27,25): error TS2769: No overload matches this call.
   Overload 1 of 3, '(plugin: FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
     Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
       Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, 
+- `09:26:06` **INFO**   Committed feature api-error-pages
+- `09:26:06` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: accessibility-final (2026-05-23 09:26:06)
+
+- `09:26:06` **INFO** Description: ARIA labels + keyboard-trap-modal-fix + focus-management
+- `09:26:06` **INFO**   Generating apps/web/src/components/ConfirmModal.tsx (ERWEITERT — füge aria-modal='true', role='dialog', aria-labelledby. us…)
+- `09:26:33` **INFO**     wrote 2997 chars in 26.7s (attempt 1)
+- `09:26:33` **INFO** Running tsc --noEmit on api…
+- `09:26:34` **WARN**   tsc errors:
+src/db/schema.ts(37,14): error TS7022: 'customers' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
+src/db/schema.ts(45,59): error TS7024: Function implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.
+src/db/schema.ts(49,14): error TS7022: 'projects' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
+src/db/schema.ts(53,56): error TS7024: Function implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.
+src/index.ts(27,25): error TS2769: No overload matches this call.
+  Overload 1 of 3, '(plugin: FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
+    Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
+      Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, 

apps/web/src/components/ConfirmModal.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 
 interface ConfirmModalProps {
   open: boolean;
@@ -19,16 +19,57 @@ export default function ConfirmModal({
   confirmLabel = 'Bestätigen',
   danger = false,
 }: ConfirmModalProps) {
+  const cancelRef = useRef<HTMLButtonElement>(null);
+  const confirmRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+
+      if (e.key === 'Tab') {
+        if (e.shiftKey) {
+          if (document.activeElement === cancelRef.current) {
+            e.preventDefault();
+            confirmRef.current?.focus();
+          }
+        } else {
+          if (document.activeElement === confirmRef.current) {
+            e.preventDefault();
+            cancelRef.current?.focus();
+          }
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    cancelRef.current?.focus();
+
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [open, onClose]);
+
   if (!open) return null;
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
     <div 
+      className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div 
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-title"
         className="bg-white dark:bg-slate-900 w-full max-w-md rounded-lg shadow-xl overflow-hidden"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="p-6">
-          <h3 className="text-lg font-semibold text-slate-900 dark:text-white">
+          <h3 
+            id="modal-title" 
+            className="text-lg font-semibold text-slate-900 dark:text-white"
+          >
             {title}
           </h3>
           <p className="mt-2 text-sm text-slate-600 dark:text-slate-400">
@@ -37,20 +78,22 @@ export default function ConfirmModal({
         </div>
         <div className="flex justify-end gap-3 p-4 bg-slate-50 dark:bg-slate-800/50">
           <button
+            ref={cancelRef}
             onClick={onClose}
-            className="px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-md transition-colors"
+            className="px-4 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 dark:focus:ring-slate-500"
           >
             Abbrechen
           </button>
           <button
+            ref={confirmRef}
             onClick={() => {
               onConfirm();
               onClose();
             }}
-            className={`px-4 py-2 text-sm font-medium text-white rounded-md transition-colors ${
+            className={`px-4 py-2 text-sm font-medium text-white rounded-md transition-colors focus:outline-none focus:ring-2 ${
               danger 
-                ? 'bg-red-600 hover:bg-red-700' 
+                ? 'bg-red-600 hover:bg-red-700 focus:ring-red-400' 
-                : 'bg-blue-600 hover:bg-blue-700'
+                : 'bg-blue-600 hover:bg-blue-700 focus:ring-blue-400'
             }`}
           >
             {confirmLabel}