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

packages/features/booking-management/src/components/create-booking-form.tsx

@@ -85,11 +85,11 @@ export function CreateBookingForm({ accountId, account, rooms }: Props) {
                       className="border-input bg-background flex h-10 w-full rounded-md border px-3 py-2 text-sm"
                     >
                       <option value="">— Zimmer wählen —</option>
-                      {rooms.map((r) => (
-                        <option key={r.id} value={r.id}>
-                          {r.roomNumber}
-                          {r.name ? ` – ${r.name}` : ''} ({r.pricePerNight}{' '}
-                          €/Nacht)
+                      {rooms.map((room) => (
+                        <option key={room.id} value={room.id}>
+                          {room.roomNumber}
+                          {room.name ? ` – ${room.name}` : ''} (
+                          {room.pricePerNight} €/Nacht)
                         </option>
                       ))}
                     </select>
@@ -240,10 +240,19 @@ export function CreateBookingForm({ accountId, account, rooms }: Props) {
         </Card>
 
         <div className="flex justify-end gap-2">
-          <Button type="button" variant="outline" onClick={() => router.back()}>
+          <Button
+            type="button"
+            variant="outline"
+            data-test="booking-cancel-btn"
+            onClick={() => router.back()}
+          >
             Abbrechen
           </Button>
-          <Button type="submit" disabled={isPending}>
+          <Button
+            type="submit"
+            data-test="booking-submit-btn"
+            disabled={isPending}
+          >
             {isPending ? 'Wird erstellt...' : 'Buchung erstellen'}
           </Button>
         </div>