From abeeb41b896ca582ab033122bbd29ee6af19f644 Mon Sep 17 00:00:00 2001
From: Martin Oppitz <6279703+deleonio@users.noreply.github.com>
Date: Wed, 29 Jan 2025 05:30:48 +0100
Subject: [PATCH] Enhance error list rendering: add smooth scroll and focus
 behavior for alert component

Refs: #7323
---
 .../components/src/components/form/shadow.tsx     | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/form/shadow.tsx b/packages/components/src/components/form/shadow.tsx
index 7fd3738861..05c2ea09c8 100644
--- a/packages/components/src/components/form/shadow.tsx
+++ b/packages/components/src/components/form/shadow.tsx
@@ -60,7 +60,20 @@ export class KolForm implements FormAPI {
 
 	private renderErrorList(errorList?: ErrorListPropType[]): JSX.Element {
 		return (
-			<KolAlertFc class="kol-form__alert" type="error" variant="card" label={translate('kol-error-list-message')}>
+			<KolAlertFc
+				class="kol-form__alert"
+				ref={(el) => {
+					setTimeout(() => {
+						if (el && typeof el.focus === 'function') {
+							el.scrollIntoView({ behavior: 'smooth' });
+							el.focus();
+						}
+					}, 250);
+				}}
+				type="error"
+				variant="card"
+				label={translate('kol-error-list-message')}
+			>
 				<nav aria-label={translate('kol-error-list')}>
 					<ul>
 						{errorList?.map((error, index) => (