Enhance error list rendering: add smooth scroll and focus behavior fo…

…r improved accessibility Refs: #7323
public-ui · Jan 29, 2025 · a5fd7ea · a5fd7ea
1 parent 34351ef
commit a5fd7ea
Showing 1 changed file with 13 additions and 1 deletion.
diff --git a/packages/components/src/components/form/shadow.tsx b/packages/components/src/components/form/shadow.tsx
@@ -53,7 +53,19 @@ export class KolForm implements FormAPI {
 
 	private renderErrorList(errorList?: ErrorListPropType[]): JSX.Element {
 		return (
-			<KolAlertFc type="error" variant="card" label={translate('kol-error-list-message')}>
+			<KolAlertFc
+				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) => (