feat(accessibility): set focus to first invalid form field (#1694)

intershop · Sep 4, 2024 · 4a1620f · 4a1620f
1 parent aae9d6c
commit 4a1620f
Show file tree

Hide file tree

Showing 37 changed files with 133 additions and 37 deletions.
diff --git a/...c/app/components/cost-center-buyer-edit-dialog/cost-center-buyer-edit-dialog.component.ts b/...c/app/components/cost-center-buyer-edit-dialog/cost-center-buyer-edit-dialog.component.ts
@@ -6,7 +6,7 @@ import { FormlyFieldConfig } from '@ngx-formly/core';
 import { AppFacade } from 'ish-core/facades/app.facade';
 import { CostCenterBuyer } from 'ish-core/models/cost-center/cost-center.model';
 import { PriceHelper } from 'ish-core/models/price/price.helper';
-import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
+import { focusFirstInvalidField, markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
 import { FormsService } from 'ish-shared/forms/utils/forms.service';
 
 import { OrganizationManagementFacade } from '../../facades/organization-management.facade';
@@ -87,6 +87,7 @@ export class CostCenterBuyerEditDialogComponent implements OnInit {
     if (this.costCenterBuyerForm.invalid) {
       this.submitted = true;
       markAsDirtyRecursive(this.costCenterBuyerForm);
+      focusFirstInvalidField(this.costCenterBuyerForm);
       return;
     }
 

diff --git a/...nization-management/src/app/pages/cost-center-buyers/cost-center-buyers-page.component.ts b/...nization-management/src/app/pages/cost-center-buyers/cost-center-buyers-page.component.ts
@@ -10,7 +10,7 @@ import { AppFacade } from 'ish-core/facades/app.facade';
 import { CostCenterBuyer } from 'ish-core/models/cost-center/cost-center.model';
 import { HttpError } from 'ish-core/models/http-error/http-error.model';
 import { PriceHelper } from 'ish-core/models/price/price.model';
-import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
+import { focusFirstInvalidField, markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
 import { FormsService } from 'ish-shared/forms/utils/forms.service';
 
 import { OrganizationManagementFacade } from '../../facades/organization-management.facade';
@@ -160,6 +160,7 @@ export class CostCenterBuyersPageComponent implements OnInit {
     if (this.form.invalid) {
       this.submitted = true;
       markAsDirtyRecursive(this.form);
+      focusFirstInvalidField(this.form);
       return;
     }
     const buyers: CostCenterBuyer[] = this.model.addBuyers

diff --git a/...nization-management/src/app/pages/cost-center-create/cost-center-create-page.component.ts b/...nization-management/src/app/pages/cost-center-create/cost-center-create-page.component.ts
@@ -3,7 +3,7 @@ import { UntypedFormGroup } from '@angular/forms';
 import { Observable } from 'rxjs';
 
 import { CostCenterBase } from 'ish-core/models/cost-center/cost-center.model';
-import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
+import { focusFirstInvalidField, markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
 
 import { OrganizationManagementFacade } from '../../facades/organization-management.facade';
 
@@ -28,6 +28,7 @@ export class CostCenterCreatePageComponent implements OnInit {
     if (this.form.invalid) {
       this.submitted = true;
       markAsDirtyRecursive(this.form);
+      focusFirstInvalidField(this.form);
       return;
     }
 

diff --git a/...organization-management/src/app/pages/cost-center-edit/cost-center-edit-page.component.ts b/...organization-management/src/app/pages/cost-center-edit/cost-center-edit-page.component.ts
@@ -3,7 +3,7 @@ import { UntypedFormGroup } from '@angular/forms';
 import { Observable } from 'rxjs';
 
 import { CostCenter, CostCenterBase } from 'ish-core/models/cost-center/cost-center.model';
-import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
+import { focusFirstInvalidField, markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
 
 import { OrganizationManagementFacade } from '../../facades/organization-management.facade';
 
@@ -30,6 +30,7 @@ export class CostCenterEditPageComponent implements OnInit {
     if (this.form.invalid) {
       this.submitted = true;
       markAsDirtyRecursive(this.form);
+      focusFirstInvalidField(this.form);
       return;
     }
 

diff --git a/projects/organization-management/src/app/pages/user-create/user-create-page.component.ts b/projects/organization-management/src/app/pages/user-create/user-create-page.component.ts
@@ -4,7 +4,7 @@ import { Observable } from 'rxjs';
 import { v4 as uuid } from 'uuid';
 
 import { HttpError } from 'ish-core/models/http-error/http-error.model';
-import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
+import { focusFirstInvalidField, markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
 
 import { OrganizationManagementFacade } from '../../facades/organization-management.facade';
 import { B2bUser } from '../../models/b2b-user/b2b-user.model';
@@ -45,6 +45,7 @@ export class UserCreatePageComponent implements OnInit {
     if (this.form.invalid) {
       this.submitted = true;
       markAsDirtyRecursive(this.form);
+      focusFirstInvalidField(this.form);
       return;
     }
 

diff --git a/...organization-management/src/app/pages/user-edit-budget/user-edit-budget-page.component.ts b/...organization-management/src/app/pages/user-edit-budget/user-edit-budget-page.component.ts
@@ -3,7 +3,7 @@ import { UntypedFormGroup } from '@angular/forms';
 import { Observable } from 'rxjs';
 
 import { HttpError } from 'ish-core/models/http-error/http-error.model';
-import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
+import { focusFirstInvalidField, markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
 
 import { OrganizationManagementFacade } from '../../facades/organization-management.facade';
 import { B2bUser } from '../../models/b2b-user/b2b-user.model';
@@ -33,6 +33,7 @@ export class UserEditBudgetPageComponent implements OnInit {
     if (this.budgetForm.invalid) {
       this.submitted = true;
       markAsDirtyRecursive(this.budgetForm);
+      focusFirstInvalidField(this.budgetForm);
       return;
     }
 

diff --git a/...ganization-management/src/app/pages/user-edit-profile/user-edit-profile-page.component.ts b/...ganization-management/src/app/pages/user-edit-profile/user-edit-profile-page.component.ts
@@ -3,7 +3,7 @@ import { UntypedFormGroup } from '@angular/forms';
 import { Observable } from 'rxjs';
 
 import { HttpError } from 'ish-core/models/http-error/http-error.model';
-import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
+import { focusFirstInvalidField, markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
 
 import { OrganizationManagementFacade } from '../../facades/organization-management.facade';
 import { B2bUser } from '../../models/b2b-user/b2b-user.model';
@@ -33,6 +33,7 @@ export class UserEditProfilePageComponent implements OnInit {
     if (this.profileForm.invalid) {
       this.submitted = true;
       markAsDirtyRecursive(this.profileForm);
+      focusFirstInvalidField(this.profileForm);
       return;
     }
 

diff --git a/...pages/requisition-detail/requisition-reject-dialog/requisition-reject-dialog.component.ts b/...pages/requisition-detail/requisition-reject-dialog/requisition-reject-dialog.component.ts
@@ -11,7 +11,7 @@ import { FormGroup } from '@angular/forms';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 
-import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
+import { focusFirstInvalidField, markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
 
 /**
  * The Wishlist Reject Approval Dialog shows the modal to reject a requisition.
@@ -77,6 +77,7 @@ export class RequisitionRejectDialogComponent implements OnInit {
     if (this.rejectForm.invalid) {
       this.submitted = true;
       markAsDirtyRecursive(this.rejectForm);
+      focusFirstInvalidField(this.rejectForm);
       return;
     }
 

diff --git a/src/app/extensions/contact-us/pages/contact/contact-form/contact-form.component.ts b/src/app/extensions/contact-us/pages/contact/contact-form/contact-form.component.ts
@@ -6,7 +6,7 @@ import { map, shareReplay, startWith } from 'rxjs/operators';
 
 import { AccountFacade } from 'ish-core/facades/account.facade';
 import { Contact } from 'ish-core/models/contact/contact.model';
-import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
+import { focusFirstInvalidField, markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
 
 import { ContactUsFacade } from '../../../facades/contact-us.facade';
 
@@ -130,6 +130,7 @@ export class ContactFormComponent implements OnInit {
       this.request.emit(this.contactForm.value);
     } else {
       markAsDirtyRecursive(this.contactForm);
+      focusFirstInvalidField(this.contactForm);
       this.submitted = true;
     }
   }

diff --git a/...s/shared/order-template-preferences-dialog/order-template-preferences-dialog.component.ts b/...s/shared/order-template-preferences-dialog/order-template-preferences-dialog.component.ts
@@ -13,7 +13,7 @@ import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { pick } from 'lodash-es';
 
-import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
+import { focusFirstInvalidField, markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
 import { SpecialValidators } from 'ish-shared/forms/validators/special-validators';
 
 import { OrderTemplate } from '../../models/order-template/order-template.model';
@@ -99,6 +99,7 @@ export class OrderTemplatePreferencesDialogComponent implements OnInit {
     if (this.orderTemplateForm.invalid) {
       this.submitted = true;
       markAsDirtyRecursive(this.orderTemplateForm);
+      focusFirstInvalidField(this.orderTemplateForm);
       return;
     }
 

diff --git a/...der-templates/shared/select-order-template-modal/select-order-template-modal.component.ts b/...der-templates/shared/select-order-template-modal/select-order-template-modal.component.ts
@@ -18,7 +18,7 @@ import { Observable, of } from 'rxjs';
 import { filter, map, take } from 'rxjs/operators';
 
 import { SelectOption } from 'ish-core/models/select-option/select-option.model';
-import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
+import { focusFirstInvalidField, markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
 
 import { OrderTemplatesFacade } from '../../facades/order-templates.facade';
 
@@ -73,11 +73,13 @@ export class SelectOrderTemplateModalComponent implements OnInit {
         this.submitExisting(radioButtons.orderTemplate);
       } else {
         markAsDirtyRecursive(this.formGroup);
+        focusFirstInvalidField(this.formGroup);
       }
     } else if (radioButtons.newOrderTemplate && this.formGroup.valid) {
       this.submitNew(radioButtons.newOrderTemplate);
     } else {
       markAsDirtyRecursive(this.formGroup);
+      focusFirstInvalidField(this.formGroup);
     }
   }
 

diff --git a/...ons/shared/product-notification-edit-dialog/product-notification-edit-dialog.component.ts b/...ons/shared/product-notification-edit-dialog/product-notification-edit-dialog.component.ts
@@ -18,7 +18,7 @@ import { AppFacade } from 'ish-core/facades/app.facade';
 import { ProductContextFacade } from 'ish-core/facades/product-context.facade';
 import { ProductView } from 'ish-core/models/product-view/product-view.model';
 import { whenTruthy } from 'ish-core/utils/operators';
-import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
+import { focusFirstInvalidField, markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
 
 import { ProductNotificationsFacade } from '../../facades/product-notifications.facade';
 import { ProductNotification } from '../../models/product-notification/product-notification.model';
@@ -111,6 +111,7 @@ export class ProductNotificationEditDialogComponent implements OnInit {
   submitForm() {
     if (this.productNotificationForm.invalid) {
       markAsDirtyRecursive(this.productNotificationForm);
+      focusFirstInvalidField(this.productNotificationForm);
       this.submitted = true;
       return;
     } else {

diff --git a/...account-punchout-configuration/oci-configuration-form/oci-configuration-form.component.ts b/...account-punchout-configuration/oci-configuration-form/oci-configuration-form.component.ts
@@ -7,7 +7,7 @@ import { Observable, filter, map, shareReplay, take } from 'rxjs';
 
 import { HttpError } from 'ish-core/models/http-error/http-error.model';
 import { SelectOption } from 'ish-core/models/select-option/select-option.model';
-import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
+import { focusFirstInvalidField, markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
 import { SpecialValidators } from 'ish-shared/forms/validators/special-validators';
 
 import { PunchoutFacade } from '../../../facades/punchout.facade';
@@ -159,6 +159,7 @@ export class OciConfigurationFormComponent implements OnInit {
     if (this.form.invalid) {
       this.submitted = true;
       markAsDirtyRecursive(this.form);
+      focusFirstInvalidField(this.form);
       return;
     }
     this.punchoutFacade.updateOciConfiguration(this.form.value.ociConfig);

diff --git a/...-punchout-cxml-configuration/cxml-configuration-form/cxml-configuration-form.component.ts b/...-punchout-cxml-configuration/cxml-configuration-form/cxml-configuration-form.component.ts
@@ -5,7 +5,7 @@ import { FormlyFieldConfig } from '@ngx-formly/core';
 import { Observable } from 'rxjs';
 
 import { HttpError } from 'ish-core/models/http-error/http-error.model';
-import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
+import { focusFirstInvalidField, markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
 
 import { PunchoutFacade } from '../../../facades/punchout.facade';
 import { CxmlConfiguration } from '../../../models/cxml-configuration/cxml-configuration.model';
@@ -78,6 +78,7 @@ export class CxmlConfigurationFormComponent implements OnDestroy, OnInit {
     if (this.form.invalid) {
       this.submitted = true;
       markAsDirtyRecursive(this.form);
+      focusFirstInvalidField(this.form);
       return;
     }
 

diff --git a/src/app/extensions/punchout/shared/punchout-user-form/punchout-user-form.component.ts b/src/app/extensions/punchout/shared/punchout-user-form/punchout-user-form.component.ts
@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output
 import { UntypedFormGroup } from '@angular/forms';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 
-import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
+import { focusFirstInvalidField, markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
 import { SpecialValidators } from 'ish-shared/forms/validators/special-validators';
 
 import { PunchoutType, PunchoutUser } from '../../models/punchout-user/punchout-user.model';
@@ -127,6 +127,7 @@ export class PunchoutUserFormComponent implements OnInit {
     if (this.form.invalid) {
       this.submitted = true;
       markAsDirtyRecursive(this.form);
+      focusFirstInvalidField(this.form);
       return;
     }
 

diff --git a/...ions/rating/shared/product-review-create-dialog/product-review-create-dialog.component.ts b/...ions/rating/shared/product-review-create-dialog/product-review-create-dialog.component.ts
@@ -5,7 +5,7 @@ import { FormlyFieldConfig } from '@ngx-formly/core';
 import { Observable, map, tap } from 'rxjs';
 
 import { AccountFacade } from 'ish-core/facades/account.facade';
-import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
+import { focusFirstInvalidField, markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
 
 import { ProductReviewsFacade } from '../../facades/product-reviews.facade';
 import { ProductReview } from '../../models/product-reviews/product-review.model';
@@ -124,6 +124,7 @@ export class ProductReviewCreateDialogComponent implements OnInit {
   submitForm(sku: string) {
     if (this.form.invalid) {
       markAsDirtyRecursive(this.form);
+      focusFirstInvalidField(this.form);
       this.submitted = true;
       return;
     } else {

diff --git a/src/app/extensions/wishlists/shared/select-wishlist-modal/select-wishlist-modal.component.ts b/src/app/extensions/wishlists/shared/select-wishlist-modal/select-wishlist-modal.component.ts
@@ -18,7 +18,7 @@ import { filter, map, take, withLatestFrom } from 'rxjs/operators';
 
 import { SelectOption } from 'ish-core/models/select-option/select-option.model';
 import { whenTruthy } from 'ish-core/utils/operators';
-import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
+import { focusFirstInvalidField, markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
 
 import { WishlistsFacade } from '../../facades/wishlists.facade';
 
@@ -70,11 +70,13 @@ export class SelectWishlistModalComponent implements OnInit {
         this.submitExisting(radioButtons.wishlist);
       } else {
         markAsDirtyRecursive(this.formGroup);
+        focusFirstInvalidField(this.formGroup);
       }
     } else if (radioButtons.newList && this.formGroup.valid) {
       this.submitNew(radioButtons.newList);
     } else {
       markAsDirtyRecursive(this.formGroup);
+      focusFirstInvalidField(this.formGroup);
     }
   }
 

diff --git a/...ons/wishlists/shared/wishlist-preferences-dialog/wishlist-preferences-dialog.component.ts b/...ons/wishlists/shared/wishlist-preferences-dialog/wishlist-preferences-dialog.component.ts
@@ -13,7 +13,7 @@ import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { pick } from 'lodash-es';
 
-import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
+import { focusFirstInvalidField, markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
 import { SpecialValidators } from 'ish-shared/forms/validators/special-validators';
 
 import { Wishlist } from '../../models/wishlist/wishlist.model';
@@ -112,6 +112,7 @@ export class WishlistPreferencesDialogComponent implements OnInit {
     if (this.wishListForm.invalid) {
       this.submitted = true;
       markAsDirtyRecursive(this.wishListForm);
+      focusFirstInvalidField(this.wishListForm);
       return;
     }
 

diff --git a/...ages/account-profile-company/account-profile-company/account-profile-company.component.ts b/...ages/account-profile-company/account-profile-company/account-profile-company.component.ts
@@ -6,7 +6,7 @@ import { pick } from 'lodash-es';
 import { Customer } from 'ish-core/models/customer/customer.model';
 import { HttpError } from 'ish-core/models/http-error/http-error.model';
 import { FieldLibrary } from 'ish-shared/formly/field-library/field-library';
-import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
+import { focusFirstInvalidField, markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
 
 /**
  * The Account Profile Company Page Component displays a form for changing a business customers' company data
@@ -42,6 +42,7 @@ export class AccountProfileCompanyComponent implements OnInit {
     if (this.accountProfileCompanyForm.invalid) {
       this.submitted = true;
       markAsDirtyRecursive(this.accountProfileCompanyForm);
+      focusFirstInvalidField(this.accountProfileCompanyForm);
       return;
     }
     const companyName = this.accountProfileCompanyForm.get('companyName').value;

diff --git a/src/app/pages/account-profile-email/account-profile-email/account-profile-email.component.ts b/src/app/pages/account-profile-email/account-profile-email/account-profile-email.component.ts
@@ -5,7 +5,7 @@ import { FormlyFieldConfig } from '@ngx-formly/core';
 import { Credentials } from 'ish-core/models/credentials/credentials.model';
 import { HttpError } from 'ish-core/models/http-error/http-error.model';
 import { User } from 'ish-core/models/user/user.model';
-import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
+import { focusFirstInvalidField, markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
 import { SpecialValidators } from 'ish-shared/forms/validators/special-validators';
 
 /**
@@ -95,6 +95,7 @@ export class AccountProfileEmailComponent implements OnInit {
     if (this.form.invalid) {
       this.submitted = true;
       markAsDirtyRecursive(this.form);
+      focusFirstInvalidField(this.form);
       return;
     }
 

diff --git a/...s/account-profile-password/account-profile-password/account-profile-password.component.ts b/...s/account-profile-password/account-profile-password/account-profile-password.component.ts
@@ -12,7 +12,7 @@ import { FormGroup } from '@angular/forms';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 
 import { HttpError } from 'ish-core/models/http-error/http-error.model';
-import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
+import { focusFirstInvalidField, markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
 import { SpecialValidators } from 'ish-shared/forms/validators/special-validators';
 
 /**
@@ -110,6 +110,7 @@ export class AccountProfilePasswordComponent implements OnInit, OnChanges {
     if (this.accountProfilePasswordForm.invalid) {
       this.submitted = true;
       markAsDirtyRecursive(this.accountProfilePasswordForm);
+      focusFirstInvalidField(this.accountProfilePasswordForm);
       return;
     }
 

diff --git a/src/app/pages/account-profile-user/account-profile-user/account-profile-user.component.ts b/src/app/pages/account-profile-user/account-profile-user/account-profile-user.component.ts
@@ -10,7 +10,7 @@ import { AppFacade } from 'ish-core/facades/app.facade';
 import { HttpError } from 'ish-core/models/http-error/http-error.model';
 import { User } from 'ish-core/models/user/user.model';
 import { FieldLibrary } from 'ish-shared/formly/field-library/field-library';
-import { markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
+import { focusFirstInvalidField, markAsDirtyRecursive } from 'ish-shared/forms/utils/form-utils';
 
 interface ComponentState {
   currentUser: User;
@@ -94,6 +94,7 @@ export class AccountProfileUserComponent extends RxState<ComponentState> impleme
     if (this.accountProfileUserForm.invalid) {
       this.submitted = true;
       markAsDirtyRecursive(this.accountProfileUserForm);
+      focusFirstInvalidField(this.accountProfileUserForm);
       return;
     }