feat(form): focus the first invalid field on submit

[guillerot]

Description

form[luForm] can now move focus to the first invalid field when the form is submitted while invalid, so keyboard and screen reader users are led straight to the error (WCAG 3.3.1). The behavior is opt-in via a new focusInvalidOnSubmit boolean input (default false).

---

The behavior is DOM-based on purpose: after the submit event, afterNextRender lets the app's own submit handler run first (typically markAllAsTouched) and change detection apply the validity state; then, if the host <form> carries ng-invalid, the innermost .ng-invalid element is resolved and focused. When that element is not natively focusable (custom control hosts like lu-simple-select), the first focusable descendant is focused instead, then scrolled into view.

Working with CSS state classes rather than injecting FormGroupDirective/NgForm keeps it agnostic: it covers reactive forms and ngModel alike, and needs no wiring in consuming apps.

Points to discuss before undrafting:

• No story yet: I can add a Storybook story demonstrating the behavior if you confirm the approach.

Validated end-to-end in Cleemy Procurement with the same logic as a local directive (supplier creation form: submit via click and via Enter both land focus on the first invalid field).

---

Contribution

• Designs are respected and all relevant options are handled
• Responsive behavior addressed when needed
• Feature is accessible (keyboard navigation, screen reader support, ARIA tags, etc.)
• Stories are updated and Storybook controls have descriptions
• Feature is covered by E2E tests or UI diff
• npm run build OK
• npm run lint OK

Functional review

• UI diff OK
• Feature and all options are manually tested and comply with design and guidelines.

---

[github-actions]

🚀 Storybook preview deployed: https://pub-dc6d99acd6874e2aaff6219dd8a13ae2.r2.dev/PR-5264/index.html

[Supamiu]

Pushing it our of 22.0 so we can properly discuss it and find the best approach.

The base branch was changed.