Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(accessibility): set focus on the first invalid form field #1749

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from

Conversation

SGrueber
Copy link
Collaborator

@SGrueber SGrueber commented Feb 6, 2025

PR Type

[ ] Bugfix
[x] Feature
[ ] Code style update (formatting, local variables)
[x] Refactoring (no functional changes, no API changes)
[ ] Build-related changes
[ ] CI-related changes
[ ] Documentation content changes
[ ] Application / infrastructure changes
[ ] Other:

What Is the Current Behavior?

  1. On form submit the invalid form fields are highlighted in case of validation errors, but the focus remains unchanged.
  2. In many form components the method 'markAsDirtyRecursive' is used to mark all form fields as dirty after form submit to secure the untouched required form fields are shown as invalid. This is not necessary for formly forms. In these components there is often a variable (e.g. submitDisabled etc.) used to determine whether the user has already submitted the form in order to disable the submit button after form submit if the form is invalid. This variable is also unnecessary.

Issue Number: Closes #

What Is the New Behavior?

  1. The accessibility has been improved regarding the following guideline: (WCAG 3.3.1 - Error Identification)
    A directive 'ishFormSubmit' has been introduced for form html elements to set the focus automatically on the first invalid form field after form submit.
  2. The form components have been refactored. After form submit the 'markAsDirtyRecursive' method is not called any more for formly forms. The button is disabled by using the property 'submitted' from a corresponding FormGroupDirective defining a variable #form="ngForm" at the form html element.

Does this PR Introduce a Breaking Change?

[ ] Yes
[x] No

Other Information

AB#103801

@SGrueber SGrueber force-pushed the feat/focus_after_submit branch from a9c090b to 34c2176 Compare February 6, 2025 11:55
@SGrueber SGrueber self-assigned this Feb 6, 2025
@SGrueber SGrueber requested a review from shauke February 6, 2025 11:56
@SGrueber SGrueber added enhancement Enhancement to an existing feature refactoring Refactoring of current code labels Feb 6, 2025
@SGrueber SGrueber added this to the 6.0 milestone Feb 6, 2025
* after form submit
* introduce directive ishFormSubmit
@SGrueber SGrueber force-pushed the feat/focus_after_submit branch from 34c2176 to 76428a6 Compare February 6, 2025 13:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement Enhancement to an existing feature refactoring Refactoring of current code
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant