fix: refactors toast error rendering (#13252)

Fixes #13191

- Render a single html element for single error messages
- Preserve ul structure for multiple errors
- Updates tests to check for both cases

packages/ui/src/elements/Toasts/fieldErrors.tsx

@@ -63,11 +63,15 @@ export function FieldErrorsToast({ errorMessage }) {
     <div>
       {message}
       {Array.isArray(errors) && errors.length > 0 ? (
-        <ul data-testid="field-errors">
-          {errors.map((error, index) => {
-            return <li key={index}>{error}</li>
-          })}
-        </ul>
+        errors.length === 1 ? (
+          <span data-testid="field-error">{errors[0]}</span>
+        ) : (
+          <ul data-testid="field-errors">
+            {errors.map((error, index) => {
+              return <li key={index}>{error}</li>
+            })}
+          </ul>
+        )
       ) : null}
     </div>
   )