feat: enhance accessibility and testing with data-test attributes and improve error handling

packages/features/site-builder/src/components/create-page-form.tsx

@@ -148,10 +148,19 @@ export function CreatePageForm({ accountId, account }: Props) {
           </CardContent>
         </Card>
         <div className="flex justify-end gap-2">
-          <Button type="button" variant="outline" onClick={() => router.back()}>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => router.back()}
+            data-test="page-cancel-btn"
+          >
             Abbrechen
           </Button>
-          <Button type="submit" disabled={isPending}>
+          <Button
+            type="submit"
+            disabled={isPending}
+            data-test="page-submit-btn"
+          >
             {isPending ? 'Wird erstellt...' : 'Seite erstellen & Editor öffnen'}
           </Button>
         </div>

packages/features/site-builder/src/components/create-post-form.tsx

@@ -159,10 +159,19 @@ export function CreatePostForm({ accountId, account }: Props) {
           </CardContent>
         </Card>
         <div className="flex justify-end gap-2">
-          <Button type="button" variant="outline" onClick={() => router.back()}>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => router.back()}
+            data-test="post-cancel-btn"
+          >
             Abbrechen
           </Button>
-          <Button type="submit" disabled={isPending}>
+          <Button
+            type="submit"
+            disabled={isPending}
+            data-test="post-submit-btn"
+          >
             {isPending ? 'Wird erstellt...' : 'Beitrag erstellen'}
           </Button>
         </div>

packages/features/site-builder/src/config/puck-config.tsx

@@ -465,15 +465,17 @@ const EventListBlock = ({
       <h2 className="mb-6 text-2xl font-bold">Veranstaltungen</h2>
       <div className="space-y-3">
         {items.map((event) => {
-          const d = new Date(event.event_date);
+          const eventDate = new Date(event.event_date);
           const isExpanded = expandedId === event.id;
           const isSuccess = successId === event.id;
           return (
             <div key={event.id} className="overflow-hidden rounded-lg border">
               <div className="flex items-center gap-4 p-4">
                 <div className="bg-primary/10 text-primary flex h-14 w-14 shrink-0 flex-col items-center justify-center rounded-lg">
-                  <span className="text-lg font-bold">{d.getDate()}</span>
-                  <span className="text-xs">{formatMonthShort(d)}</span>
+                  <span className="text-lg font-bold">
+                    {eventDate.getDate()}
+                  </span>
+                  <span className="text-xs">{formatMonthShort(eventDate)}</span>
                 </div>
                 <div className="min-w-0 flex-1">
                   <h3 className="font-semibold">{event.name}</h3>