From 3fd79e0747530b6dc65e5bb30a1c99f0e317ad43 Mon Sep 17 00:00:00 2001 From: "Dennis (via Claude+Gemma)" Date: Sat, 23 May 2026 09:26:34 +0200 Subject: [PATCH] feat(accessibility-final): ARIA labels + keyboard-trap-modal-fix + focus-management [tsc:fail] --- .phase30-state.json | 5 ++- GENERATION_LOG.md | 18 ++++++++ apps/web/src/components/ConfirmModal.tsx | 57 +++++++++++++++++++++--- 3 files changed, 71 insertions(+), 9 deletions(-) diff --git a/.phase30-state.json b/.phase30-state.json index c4fb984..2d1eb03 100644 --- a/.phase30-state.json +++ b/.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" ] } \ No newline at end of file diff --git a/GENERATION_LOG.md b/GENERATION_LOG.md index 74475b2..c966175 100644 --- a/GENERATION_LOG.md +++ b/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' is not assignable to parameter of type 'FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'. Type 'Promise' provides no match for the signature '(instance: FastifyInstance, +- `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' is not assignable to parameter of type 'FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'. + Type 'Promise' provides no match for the signature '(instance: FastifyInstance, diff --git a/apps/web/src/components/ConfirmModal.tsx b/apps/web/src/components/ConfirmModal.tsx index 2efec29..76abde6 100644 --- a/apps/web/src/components/ConfirmModal.tsx +++ b/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(null); + const confirmRef = useRef(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 ( -
+
e.stopPropagation()} >
-

+

@@ -37,20 +78,22 @@ export default function ConfirmModal({