Merge pull request #6465 from NMDSdevopsServiceAdm/fix/login-page-set…

…-focus-on-username-field Fix/Login page - should set focus on username field when invalid username/password error message is clicked
NMDSdevopsServiceAdm · Jan 7, 2025 · 9fc243f · 9fc243f
2 parents b9dc866 + a5794c8
commit 9fc243f
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 2 deletions.
diff --git a/frontend/src/app/features/login/login.component.html b/frontend/src/app/features/login/login.component.html
@@ -7,7 +7,7 @@
 >
 </app-error-summary>
 
-<form #formEl novalidate (ngSubmit)="onSubmit()" [formGroup]="form" id="server-error">
+<form #formEl novalidate (ngSubmit)="onSubmit()" [formGroup]="form">
   <fieldset class="govuk-fieldset">
     <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
       <h1 class="govuk-fieldset__heading" data-cy="signin-heading">Sign in</h1>
@@ -38,6 +38,7 @@ <h1 class="govuk-fieldset__heading" data-cy="signin-heading">Sign in</h1>
           {{ getFormErrorMessage('username', 'atSignInUsername') }}
         </ng-container>
       </span>
+      <span id="server-error" *ngIf="serverError"></span>
       <input
         data-cy="username"
         class="govuk-input govuk-input--width-20"

diff --git a/frontend/src/app/features/login/login.component.spec.ts b/frontend/src/app/features/login/login.component.spec.ts
@@ -14,6 +14,7 @@ import { throwError } from 'rxjs';
 
 import { LoginComponent } from './login.component';
 import { ReactiveFormsModule, UntypedFormBuilder } from '@angular/forms';
+import userEvent from '@testing-library/user-event';
 
 describe('LoginComponent', () => {
   async function setup(isAdmin = false, employerTypeSet = true, isAuthenticated = true) {
@@ -243,6 +244,22 @@ describe('LoginComponent', () => {
       expect(getAllByText('Your username or your password is incorrect')).toBeTruthy();
     });
 
+    it('should focus on the first input box when the invalid username/password message is clicked', async () => {
+      const { component, fixture, getAllByText, getByRole } = await setup(false, false, false);
+
+      component.form.setValue({ username: '1', password: '1' });
+      component.onSubmit();
+
+      fixture.detectChanges();
+      const errorMessageInSummaryBox = getAllByText('Your username or your password is incorrect')[0];
+      const usernameInputBoxEl = getByRole('textbox', { name: 'Username' });
+      const focusSpy = spyOn(usernameInputBoxEl, 'focus');
+
+      userEvent.click(errorMessageInSummaryBox);
+      await fixture.whenStable();
+      expect(focusSpy).toHaveBeenCalled();
+    });
+
     it('should not let you sign in with a username with special characters', async () => {
       const { component, fixture, getAllByText, getByTestId } = await setup();
 

diff --git a/frontend/src/app/shared/components/error-summary/error-summary.component.html b/frontend/src/app/shared/components/error-summary/error-summary.component.html
@@ -28,6 +28,7 @@ <h2 class="govuk-error-summary__title" id="error-summary-title">There is a probl
       <li *ngIf="serverError">
         <ng-container *ngIf="showServerErrorAsLink; else serverErrorAsPlainText">
           <a
+            (click)="focusOnField('server')"
             [routerLink]="'.'"
             [fragment]="'server-error'"
             [queryParamsHandling]="'merge'"

diff --git a/frontend/src/app/shared/components/error-summary/error-summary.component.spec.ts b/frontend/src/app/shared/components/error-summary/error-summary.component.spec.ts
@@ -18,7 +18,6 @@ describe('ErrorSummaryComponent', () => {
         },
       ],
       componentProperties: {
-        // form: mockForm,
         formErrorsMap: [],
         ...override,
       },