[PRM-94] WCAG 3.3.1: Missing error summary for empty patient search (#611)

* Adds conditional rendering error box for incorrect input

* More strict comparison for input error

* Removed console logs

* Changed error box rendering to trigger if inputError is equal to incorrect format message

---------

Co-authored-by: oliverbeumkes-nhs <[email protected]>

Author: jack-nhs

app/src/pages/patientSearchPage/PatientSearchPage.test.tsx

@@ -78,7 +78,7 @@ describe('PatientSearchPage', () => {
             userEvent.type(screen.getByRole('textbox', { name: 'Enter NHS number' }), '21212');
             userEvent.click(screen.getByRole('button', { name: 'Search' }));
             await waitFor(() => {
-                expect(screen.getByText(incorrectFormatMessage)).toBeInTheDocument();
+                expect(screen.getAllByText(incorrectFormatMessage)).toHaveLength(2);
             });
         });
     });
@@ -422,7 +422,7 @@ describe('PatientSearchPage', () => {
             renderPatientSearchPage();
             userEvent.click(screen.getByRole('button', { name: 'Search' }));
             await waitFor(() => {
-                expect(screen.getByText(incorrectFormatMessage)).toBeInTheDocument();
+                expect(screen.getAllByText(incorrectFormatMessage)).toHaveLength(2);
             });
         });
 
@@ -436,7 +436,7 @@ describe('PatientSearchPage', () => {
                 );
                 userEvent.click(screen.getByRole('button', { name: 'Search' }));
                 await waitFor(() => {
-                    expect(screen.getByText(incorrectFormatMessage)).toBeInTheDocument();
+                    expect(screen.getAllByText(incorrectFormatMessage)).toHaveLength(2);
                 });
             },
         );

app/src/pages/patientSearchPage/PatientSearchPage.tsx

@@ -67,7 +67,6 @@ function PatientSearchPage() {
         setInputError(null);
         setStatusCode(null);
         const nhsNumber = data.nhsNumber.replace(/[-\s]/gi, '');
-
         try {
             const patientDetails = await getPatientDetails({
                 nhsNumber,
@@ -127,7 +126,8 @@ function PatientSearchPage() {
             <BackLink asElement="a" href={routes.HOME}>
                 Return to Home
             </BackLink>
-            {submissionState === SEARCH_STATES.FAILED && (
+            {(submissionState === SEARCH_STATES.FAILED ||
+                inputError === incorrectFormatMessage) && (
                 <>
                     {isError ? (
                         <ServiceError />
@@ -141,8 +141,9 @@ function PatientSearchPage() {
                     )}
                 </>
             )}
+
             <h1>{pageTitle}</h1>
-            <form onSubmit={handleSubmit(handleSearch, handleError)} noValidate>
+            <form onSubmit={handleSubmit(handleSearch, handleError)}>
                 <TextInput
                     id="nhs-number-input"
                     data-testid="nhs-number-input"