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

packages/features/newsletter/src/components/create-newsletter-form.tsx

@@ -70,7 +70,7 @@ export function CreateNewsletterForm({ accountId, account }: Props) {
                 <FormItem>
                   <FormLabel>Betreff *</FormLabel>
                   <FormControl>
-                    <Input {...field} />
+                    <Input {...field} data-test="newsletter-subject-input" />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -88,6 +88,7 @@ export function CreateNewsletterForm({ accountId, account }: Props) {
                       rows={12}
                       className="border-input bg-background flex min-h-[200px] w-full rounded-md border px-3 py-2 font-mono text-sm"
                       placeholder="<h1>Hallo!</h1><p>Ihr Newsletter-Inhalt...</p>"
+                      data-test="newsletter-body-input"
                     />
                   </FormControl>
                   <FormMessage />
@@ -106,6 +107,7 @@ export function CreateNewsletterForm({ accountId, account }: Props) {
                       rows={4}
                       className="border-input bg-background flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm"
                       placeholder="Nur-Text-Fallback für E-Mail-Clients ohne HTML-Unterstützung"
+                      data-test="newsletter-text-input"
                     />
                   </FormControl>
                   <FormMessage />
@@ -127,7 +129,11 @@ export function CreateNewsletterForm({ accountId, account }: Props) {
                 <FormItem>
                   <FormLabel>Geplanter Versand (optional)</FormLabel>
                   <FormControl>
-                    <Input type="datetime-local" {...field} />
+                    <Input
+                      type="datetime-local"
+                      {...field}
+                      data-test="newsletter-schedule-input"
+                    />
                   </FormControl>
                   <p className="text-muted-foreground text-xs">
                     Leer lassen, um den Newsletter als Entwurf zu speichern.
@@ -140,10 +146,19 @@ export function CreateNewsletterForm({ accountId, account }: Props) {
         </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="newsletter-cancel-btn"
+          >
             Abbrechen
           </Button>
-          <Button type="submit" disabled={isPending}>
+          <Button
+            type="submit"
+            disabled={isPending}
+            data-test="newsletter-submit-btn"
+          >
             {isPending ? 'Wird erstellt...' : 'Newsletter erstellen'}
           </Button>
         </div>