[NFDIV-5584] Fix error message focus

src/main/app/document/DocumentManagementConstants.ts

@@ -2,6 +2,9 @@ import { orderedStateSequence } from '../../steps/state-sequence';
 import { CaseWithId } from '../case/case';
 import { ApplicationType, State } from '../case/definition';
 
+export const UPPY_FILE_INPUT_BUTTON_CLASS = 'uppy-FileInput-btn';
+export const UPPY_FILE_INPUT_BUTTON_ID = 'file-upload-btn';
+
 const APPLICANT_ONE_DOC_UPLOAD_STATES = [
   State.Draft,
   State.AosDrafted,

src/main/app/form/Form.test.ts

@@ -85,6 +85,49 @@ describe('Form', () => {
     ]);
   });
 
+  test('Should use FormInput id as error focus id when provided', async () => {
+    const formWithInputId = new Form({
+      applicant1Address1: {
+        id: 'address1',
+        type: 'text',
+        label: 'Address line 1',
+        validator: isFieldFilledIn,
+      },
+    });
+
+    const errors = formWithInputId.getErrors({});
+
+    expect(errors).toStrictEqual([
+      {
+        propertyName: 'applicant1Address1',
+        errorType: 'required',
+        focusId: 'address1',
+      },
+    ]);
+  });
+
+  test('Should use FormInput errorId as focus id override when provided', async () => {
+    const formWithInputErrorId = new Form({
+      applicant1UploadedFiles: {
+        id: 'applicant1UploadedFiles',
+        errorId: 'uploadGroup',
+        type: 'hidden',
+        label: 'Uploaded files',
+        validator: isFieldFilledIn,
+      },
+    });
+
+    const errors = formWithInputErrorId.getErrors({});
+
+    expect(errors).toStrictEqual([
+      {
+        propertyName: 'applicant1UploadedFiles',
+        errorType: 'required',
+        focusId: 'uploadGroup',
+      },
+    ]);
+  });
+
   describe('subfield validation and parser', () => {
     const mockSubFieldForm: FormContent = {
       fields: {

src/main/app/form/Form.ts

@@ -62,7 +62,12 @@ export class Form {
 
   private getErrorsFromField(body: Partial<Case>, id: string, field: FormField): FormError[] {
     const errorType = field.validator && field.validator(body[id], body);
-    const focusId = isFormOptions(field) ? (field.values[0]?.id ?? field.id ?? id) : id;
+
+    const isNestedInput = isFormOptions(field);
+    const parentId = field.errorId ?? field.id ?? id;
+
+    const focusId = isNestedInput ? (field.values?.[0]?.errorId ?? field.values?.[0]?.id ?? parentId) : parentId;
+
     const errors: FormError[] = errorType ? [{ errorType, propertyName: id, focusId }] : [];
 
     errors.push(...this.validateGlobalInputRules(body, id, field as FormInput));
@@ -174,6 +179,7 @@ export type FormField = FormInput | FormOptions;
 
 export interface FormOptions {
   id?: string;
+  errorId?: string;
   type: string;
   label?: Label;
   labelHidden?: boolean;
@@ -188,6 +194,7 @@ export interface FormOptions {
 
 export interface FormInput {
   id?: string;
+  errorId?: string;
   name?: string;
   label: Label;
   hint?: Label;

src/main/assets/js/upload-manager/index.ts

@@ -4,6 +4,10 @@ import FileInput from '@uppy/file-input';
 import ProgressBar from '@uppy/progress-bar';
 import XHRUpload from '@uppy/xhr-upload';
 
+import {
+  UPPY_FILE_INPUT_BUTTON_CLASS,
+  UPPY_FILE_INPUT_BUTTON_ID,
+} from '../../../app/document/DocumentManagementConstants';
 import { SupportedLanguages } from '../../../modules/i18n';
 import { DOCUMENT_MANAGER } from '../../../steps/urls';
 import { getById, hidden, qs } from '../selectors';
@@ -83,3 +87,8 @@ if (upload) {
 
 const fileInput = qs('.uppy-FileInput-input');
 fileInput?.setAttribute('tabindex', '-1');
+
+const btn = document.getElementsByClassName(UPPY_FILE_INPUT_BUTTON_CLASS)[0] as HTMLElement | null;
+if (btn && !btn.id) {
+  btn.id = UPPY_FILE_INPUT_BUTTON_ID;
+}

src/main/steps/applicant1/date-from-certificate/content.ts

@@ -45,6 +45,7 @@ export const form: FormContent = {
       label: l => l.title,
       labelHidden: true,
       hint: l => l.hint,
+      errorId: 'relationshipDate-day',
       values: [
         {
           label: language === SupportedLanguages.Cy ? 'Diwrnod' : 'Day',

src/main/steps/applicant1/interim-applications/alternative-service/upload-evidence/template.njk

@@ -12,23 +12,23 @@
     errorList: [
       {
         text: errors.applicant1InterimAppsEvidenceUploadedFiles.errorUploading,
-        href: "#upload",
+        href: elementSelectors.uploadButtonId,
         attributes: {
           id: "errorGeneric",
           class: "hidden"
         }
       },
       {
         text: errors.applicant1InterimAppsEvidenceUploadedFiles.fileSizeTooBig,
-        href: "#upload",
+        href: elementSelectors.uploadButtonId,
         attributes: {
           id: "errorFileSizeTooBig",
           class: "hidden"
         }
       },
       {
         text: errors.applicant1InterimAppsEvidenceUploadedFiles.fileWrongFormat,
-        href: "#upload",
+        href: elementSelectors.uploadButtonId,
         attributes: {
           id: "errorFileWrongFormat",
           class: "hidden"

src/main/steps/applicant1/interim-applications/bailiff-service/partner-date-of-birth/content.ts

@@ -84,6 +84,7 @@ export const form: FormContent = {
               classes: 'govuk-date-input',
               label: l => l.enterDateOfBirthLabel,
               hint: l => l.enterDateOfBirthHint,
+              errorId: 'applicant1BailiffPartnersDateOfBirth-day',
               values: [
                 {
                   label: language === SupportedLanguages.Cy ? 'Diwrnod' : 'Day',

src/main/steps/applicant1/interim-applications/common/upload-evidence/content.ts

@@ -4,6 +4,7 @@ import { isObject } from 'lodash';
 import { Checkbox } from '../../../../../app/case/case';
 import { getFilename } from '../../../../../app/case/formatter/uploaded-files';
 import { TranslationFn } from '../../../../../app/controller/GetController';
+import { UPPY_FILE_INPUT_BUTTON_ID } from '../../../../../app/document/DocumentManagementConstants';
 import { FormContent, FormFieldsFn } from '../../../../../app/form/Form';
 import { generateContent as uploadDocumentGenerateContent } from '../../../../applicant1/upload-your-documents/content';
 import { CommonContent } from '../../../../common/common.content';
@@ -90,6 +91,7 @@ export const form: FormContent = {
       type: 'hidden',
       label: l => l.uploadFiles,
       labelHidden: true,
+      errorId: UPPY_FILE_INPUT_BUTTON_ID,
       value:
         (isObject(userCase.applicant1InterimAppsEvidenceUploadedFiles)
           ? JSON.stringify(userCase.applicant1InterimAppsEvidenceUploadedFiles)
@@ -107,6 +109,7 @@ export const form: FormContent = {
       type: 'checkboxes',
       label: l => l.cannotUpload,
       labelHidden: true,
+      errorId: UPPY_FILE_INPUT_BUTTON_ID,
       values: [
         {
           name: 'applicant1InterimAppsCannotUploadDocs',

src/main/steps/applicant1/interim-applications/common/upload-evidence/template.njk

@@ -12,23 +12,23 @@
     errorList: [
       {
         text: errors.applicant1InterimAppsEvidenceUploadedFiles.errorUploading,
-        href: "#upload",
+        href: elementSelectors.uploadButtonId,
         attributes: {
           id: "errorGeneric",
           class: "hidden"
         }
       },
       {
         text: errors.applicant1InterimAppsEvidenceUploadedFiles.fileSizeTooBig,
-        href: "#upload",
+        href: elementSelectors.uploadButtonId,
         attributes: {
           id: "errorFileSizeTooBig",
           class: "hidden"
         }
       },
       {
         text: errors.applicant1InterimAppsEvidenceUploadedFiles.fileWrongFormat,
-        href: "#upload",
+        href: elementSelectors.uploadButtonId,
         attributes: {
           id: "errorFileWrongFormat",
           class: "hidden"

src/main/steps/applicant1/interim-applications/dispense-service/last-date/content.ts

@@ -83,6 +83,7 @@ export const form: FormContent = {
               label: l => l.lastLivedTogether,
               labelHidden: false,
               hint: l => l.hint,
+              errorId: 'applicant1DispenseLastLivedTogetherDate-day',
               values: [
                 {
                   label: language === SupportedLanguages.Cy ? 'Diwrnod' : 'Day',

src/main/steps/applicant1/interim-applications/dispense-service/last-seen/content.ts

@@ -64,6 +64,7 @@ export const form: FormContent = {
       label: l => l.lastSeenDate,
       labelHidden: true,
       hint: l => `<div class="govuk-label">${l.lastSeenDate}</div>`,
+      errorId: 'applicant1DispensePartnerLastSeenOrHeardOfDate-day',
       values: [
         {
           label: language === SupportedLanguages.Cy ? 'Diwrnod' : 'Day',

src/main/steps/applicant1/interim-applications/dispense-service/upload-evidence/content.ts

@@ -3,6 +3,7 @@ import { isObject } from 'lodash';
 import { Checkbox } from '../../../../../app/case/case';
 import { YesOrNo } from '../../../../../app/case/definition';
 import { TranslationFn } from '../../../../../app/controller/GetController';
+import { UPPY_FILE_INPUT_BUTTON_ID } from '../../../../../app/document/DocumentManagementConstants';
 import { FormContent, FormFieldsFn } from '../../../../../app/form/Form';
 import { CommonContent } from '../../../../common/common.content';
 import { getDispenseLogicalTests } from '../../../../dispenseServiceApplicationSequence';
@@ -52,6 +53,7 @@ export const form: FormContent = {
     applicant1InterimAppsEvidenceUploadedFiles: {
       type: 'hidden',
       label: l => l.uploadFiles,
+      errorId: UPPY_FILE_INPUT_BUTTON_ID,
       labelHidden: true,
       value:
         (isObject(userCase.applicant1InterimAppsEvidenceUploadedFiles)
@@ -74,6 +76,7 @@ export const form: FormContent = {
       type: 'checkboxes',
       label: l => l.cannotUpload,
       labelHidden: true,
+      errorId: UPPY_FILE_INPUT_BUTTON_ID,
       validator: (value, formData) => {
         const hasUploadedFiles =
           (formData.applicant1InterimAppsEvidenceUploadedFiles as unknown as string[])?.length &&

src/main/steps/applicant1/interim-applications/search-gov-records/partner-date-of-birth/content.ts

@@ -82,6 +82,7 @@ export const form: FormContent = {
               label: l => l.enterPartnerDob,
               labelSize: 'normal',
               hint: l => l.enterPartnerDobHint,
+              errorId: 'applicant1SearchGovRecordsPartnerDateOfBirth-day',
               values: [
                 {
                   label: language === SupportedLanguages.Cy ? 'Diwrnod' : 'Day',

src/main/steps/applicant1/provide-information-to-the-court/template.njk

@@ -13,23 +13,23 @@
     errorList: [
       {
         text: errors.coClarificationUploadedFiles.errorUploading,
-        href: "#upload",
+        href: elementSelectors.uploadButtonId,
         attributes: {
         id: "errorGeneric",
         class: "hidden"
       }
       },
       {
         text: errors.coClarificationUploadedFiles.fileSizeTooBig,
-        href: "#upload",
+        href: elementSelectors.uploadButtonId,
         attributes: {
         id: "errorFileSizeTooBig",
         class: "hidden"
       }
       },
       {
         text: errors.coClarificationUploadedFiles.fileWrongFormat,
-        href: "#upload",
+        href: elementSelectors.uploadButtonId,
         attributes: {
         id: "errorFileWrongFormat",
         class: "hidden"

src/main/steps/applicant1/respond-to-the-courts-feedback/content.ts

@@ -127,6 +127,7 @@ export const form: FormContent = {
       type: 'textarea',
       classes: 'govuk-input--width-40',
       label: l => l.responseLabel,
+      errorId: 'choose-file',
       validator: (value, formData) => {
         const hasUploadedFiles =
           (formData.app1RfiDraftResponseUploadedFiles as unknown as string[])?.length &&
@@ -142,6 +143,7 @@ export const form: FormContent = {
       type: 'hidden',
       label: l => l.uploadFiles,
       labelHidden: true,
+      errorId: 'choose-file',
       value:
         (isObject(userCase.app1RfiDraftResponseUploadedFiles)
           ? JSON.stringify(userCase.app1RfiDraftResponseUploadedFiles)
@@ -160,6 +162,7 @@ export const form: FormContent = {
       type: 'checkboxes',
       label: l => l.havingTroubleUploading,
       labelHidden: true,
+      errorId: 'choose-file',
       validator: (value, formData) => {
         const hasEnteredDetails = !isEmpty(formData.app1RfiDraftResponseDetails);
         const hasUploadedFiles =

src/main/steps/applicant1/respond-to-the-courts-feedback/template.njk

@@ -12,23 +12,23 @@
     errorList: [
       {
         text: errors.app1RfiDraftResponseUploadedFiles.errorUploading,
-        href: "#upload",
+        href: elementSelectors.uploadButtonId,
         attributes: {
           id: "errorGeneric",
           class: "hidden"
         }
       },
       {
         text: errors.app1RfiDraftResponseUploadedFiles.fileSizeTooBig,
-        href: "#upload",
+        href: elementSelectors.uploadButtonId,
         attributes: {
           id: "errorFileSizeTooBig",
           class: "hidden"
         }
       },
       {
         text: errors.app1RfiDraftResponseUploadedFiles.fileWrongFormat,
-        href: "#upload",
+        href: elementSelectors.uploadButtonId,
         attributes: {
           id: "errorFileWrongFormat",
           class: "hidden"

src/main/steps/applicant1/upload-your-documents/content.ts

@@ -4,6 +4,7 @@ import { CaseWithId, Checkbox } from '../../../app/case/case';
 import { DocumentType, YesOrNo } from '../../../app/case/definition';
 import { getFilename } from '../../../app/case/formatter/uploaded-files';
 import { TranslationFn } from '../../../app/controller/GetController';
+import { UPPY_FILE_INPUT_BUTTON_ID } from '../../../app/document/DocumentManagementConstants';
 import { FormContent, FormFieldsFn } from '../../../app/form/Form';
 import { atLeastOneFieldIsChecked } from '../../../app/form/validation';
 import { CommonContent } from '../../common/common.content';
@@ -174,6 +175,7 @@ export const form: FormContent = {
 
     return {
       applicant1UploadedFiles: {
+        errorId: UPPY_FILE_INPUT_BUTTON_ID,
         type: 'hidden',
         label: l => l.uploadFiles,
         labelHidden: true,
@@ -193,6 +195,7 @@ export const form: FormContent = {
       ...(checkboxes.length > 1
         ? {
             applicant1CannotUpload: {
+              errorId: UPPY_FILE_INPUT_BUTTON_ID,
               type: 'checkboxes',
               label: l => l.cannotUploadDocuments,
               labelHidden: true,

src/main/steps/applicant1/upload-your-documents/template.njk

@@ -12,23 +12,23 @@
     errorList: [
       {
         text: errors.applicant1UploadedFiles.errorUploading,
-        href: "#upload",
+        href: elementSelectors.uploadButtonId,
         attributes: {
           id: "errorGeneric",
           class: "hidden"
         }
       },
       {
         text: errors.applicant1UploadedFiles.fileSizeTooBig,
-        href: "#upload",
+        href: elementSelectors.uploadButtonId,
         attributes: {
           id: "errorFileSizeTooBig",
           class: "hidden"
         }
       },
       {
         text: errors.applicant1UploadedFiles.fileWrongFormat,
-        href: "#upload",
+        href: elementSelectors.uploadButtonId,
         attributes: {
           id: "errorFileWrongFormat",
           class: "hidden"