[MHV-61146] sets focus on error field after clicking send btn

src/applications/mhv-secure-messaging/components/ComposeForm/ElectronicSignature.jsx

@@ -49,6 +49,7 @@ const ElectronicSignature = ({
 ElectronicSignature.propTypes = {
   checkboxError: PropTypes.string,
   checked: PropTypes.bool,
+  electronicSignature: PropTypes.string,
   nameError: PropTypes.string,
   onCheckboxCheck: PropTypes.func,
   onInput: PropTypes.func,

src/applications/mhv-secure-messaging/components/ComposeForm/RecipientsSelect.jsx

@@ -78,13 +78,21 @@ const RecipientsSelect = ({
 
   const handleRecipientSelect = useCallback(
     e => {
-      const recipient = recipientsList.find(r => +r.id === +e.detail.value);
-      setSelectedRecipient(recipient);
-      if (recipient.signatureRequired || isSignatureRequired) {
+      const recipient = recipientsList?.find(r => +r.id === +e.detail.value);
+
+      if (e.detail.value === '') {
+        setSelectedRecipient({});
+      }
+
+      if (e.detail.value !== '') {
+        setSelectedRecipient(recipient);
+      }
+
+      if (recipient?.signatureRequired || isSignatureRequired) {
         setAlertDisplayed(true);
       }
     },
-    [recipientsList, isSignatureRequired],
+    [recipientsList, isSignatureRequired, setSelectedRecipient],
   );
 
   return (
@@ -94,7 +102,7 @@ const RecipientsSelect = ({
         id="recipient-dropdown"
         label="To"
         name="to"
-        value={defaultValue !== undefined ? defaultValue : ''}
+        value={defaultValue}
         onVaSelect={handleRecipientSelect}
         class="composeSelect"
         data-testid="compose-recipient-select"
@@ -111,8 +119,6 @@ const RecipientsSelect = ({
       </VaSelect>
       {alertDisplayed && (
         <VaAlert
-          role="alert"
-          aria-live="polite"
           ref={alertRef}
           class="vads-u-margin-y--2"
           closeBtnAriaLabel="Close notification"
@@ -124,7 +130,7 @@ const RecipientsSelect = ({
           visible
           data-testid="signature-alert"
         >
-          <p className="vads-u-margin-y--0">
+          <p className="vads-u-margin-y--0" role="alert" aria-live="polite">
             {isSignatureRequired === true
               ? Prompts.Compose.SIGNATURE_REQUIRED
               : Prompts.Compose.SIGNATURE_NOT_REQUIRED}
@@ -141,6 +147,8 @@ RecipientsSelect.propTypes = {
   defaultValue: PropTypes.number,
   error: PropTypes.string,
   isSignatureRequired: PropTypes.bool,
+  setCheckboxMarked: PropTypes.func,
+  setElectronicSignature: PropTypes.func,
 };
 
 export default RecipientsSelect;

src/applications/mhv-secure-messaging/components/ComposeForm/ReplyDraftItem.jsx

@@ -134,7 +134,7 @@
         noTimeout();
       }
     },
     [draft, messageBody, attachments],
   );
 
   useEffect(
@@ -146,7 +146,7 @@
         noTimeout();
       };
     },
     [beforeUnloadHandler],
   );
 
   const checkMessageValidity = useCallback(
@@ -157,7 +157,7 @@
         messageValid = false;
       }
       setMessageInvalid(!messageValid);
-      return messageValid;
+      return { messageValid };
     },
     [messageBody],
   );
@@ -193,18 +193,17 @@
         return;
       }
 
-      const isValidMessage = checkMessageValidity();
+      const { messageValid } = checkMessageValidity();
 
       if (type === 'manual') {
-        setMessageInvalid(false);
-        if (isValidMessage) {
+        if (messageValid) {
           setLastFocusableElement(e.target);
         }
         if (attachments.length) {
           setSaveError(
             ErrorMessages.ComposeForm.UNABLE_TO_SAVE_DRAFT_ATTACHMENT,
           );
-        }
+        } else focusOnErrorField();
         setNavigationError(
           attachments.length
             ? {
@@ -234,7 +233,7 @@
         body: messageBody,
       };
 
-      if (isValidMessage) {
+      if (messageValid) {
         if (!draftId) {
           setFieldsString(newFieldsString);
           dispatch(saveReplyDraft(replyMessage.messageId, formData, type));

src/applications/mhv-secure-messaging/tests/components/Compose/ComposeForm.unit.spec.jsx

@@ -34,6 +34,7 @@ import {
   inputVaTextInput,
   selectVaRadio,
   selectVaSelect,
+  checkVaCheckbox,
 } from '../../../util/testUtils';
 import { drupalStaticData } from '../../fixtures/cerner-facility-mock-data.json';
 
@@ -351,10 +352,12 @@ describe('Compose form component', () => {
   });
 
   it('displays an error on attempt to save a draft with attachments', async () => {
-    const screen = setup(initialState, Paths.COMPOSE, {
+    const customProps = {
+      ...draftMessage,
+      messageValid: true,
       isSignatureRequired: false,
-      messageValid: false,
-    });
+    };
+    const screen = setup(initialState, Paths.COMPOSE, { draft: customProps });
     const file = new File(['(⌐□_□)'], 'test.png', { type: 'image/png' });
     const uploader = screen.getByTestId('attach-file-input');
 
@@ -371,7 +374,6 @@ describe('Compose form component', () => {
       modal = screen.queryByTestId('quit-compose-double-dare');
       expect(modal).to.exist;
     });
-
     expect(modal).to.have.attribute(
       'modal-title',
       "We can't save attachments in a draft message",
@@ -882,7 +884,7 @@ describe('Compose form component', () => {
     expect(screen.queryByTestId('send-button')).to.not.exist;
   });
 
-  it('displays alerts in Electronic Signature component if signature and checkbox is required', async () => {
+  it('displays alerts in Electronic Signature component if signature is required', async () => {
     const screen = renderWithStoreAndRouter(
       <ComposeForm recipients={initialState.sm.recipients} />,
       {
@@ -920,17 +922,40 @@ describe('Compose form component', () => {
     );
     inputVaTextInput(screen.container, 'Test User', signatureTextFieldSelector);
     expect(signatureTextField).to.have.attribute('error', '');
+  });
 
-    const checkboxSelector = `va-checkbox[label='${
+  it('displays an error in Electronic Signature component if checkbox is not checked', async () => {
+    const screen = renderWithStoreAndRouter(
+      <ComposeForm recipients={initialState.sm.recipients} />,
+      {
+        initialState,
+        reducers: reducer,
+      },
+    );
+    // Enters value for all other compose form fields first
+    const tgRecipient = initialState.sm.recipients.allowedRecipients.find(
+      r => r.signatureRequired,
+    ).id;
+    selectVaSelect(screen.container, tgRecipient);
+
+    const checkboxSelector = `va-checkbox[label="${
       ElectronicSignatureBox.CHECKBOX_LABEL
-    }']`;
-    const checkbox = screen.container.querySelector(checkboxSelector);
-    const sendButton = screen.getByTestId('save-draft-button');
+    }"]`;
 
-    fireEvent.click(sendButton);
-    expect(checkbox).to.have.attribute(
-      'error',
-      `${ErrorMessages.ComposeForm.CHECKBOX_REQUIRED}`,
-    );
+    await waitFor(() => {
+      const sendButton = screen.getByTestId('send-button');
+      const checkbox = screen.container.querySelector(checkboxSelector);
+      checkVaCheckbox(checkbox, false);
+
+      // after clicking send, validation checks on Electronic Signature component runs
+      fireEvent.click(sendButton);
+      expect(checkbox).to.have.attribute(
+        'error',
+        `${ErrorMessages.ComposeForm.CHECKBOX_REQUIRED}`,
+      );
+
+      checkVaCheckbox(checkbox, true);
+      expect(checkbox).to.have.attribute('error', '');
+    });
   });
 });

src/applications/mhv-secure-messaging/tests/components/Compose/RecipientsSelect.unit.spec.jsx

@@ -57,31 +57,38 @@ describe('RecipientsSelect', () => {
     const onValueChange = sinon.spy();
     const setCheckboxMarked = sinon.spy();
     const setElectronicSignature = sinon.spy();
+    const setAlertDisplayed = sinon.spy();
     const customProps = {
       onValueChange,
       setCheckboxMarked,
       setElectronicSignature,
+      setAlertDisplayed,
     };
     const screen = setup({ props: customProps });
     const val = recipientsList[0].id;
     selectVaSelect(screen.container, val);
     const select = screen.getByTestId('compose-recipient-select');
 
     waitFor(() => {
+      expect(setAlertDisplayed).to.be.calledOnce;
       expect(select).to.have.value(val);
       expect(onValueChange.calledOnce).to.be.true;
+      expect(onValueChange.calledWith(recipientsList[0])).to.be.true;
     });
-    expect(onValueChange.calledWith(recipientsList[0])).to.be.true;
   });
 
   it('displays the signature alert when a recipient with signatureRequired is selected', async () => {
+    const setAlertDisplayed = sinon.spy();
     const customProps = {
       isSignatureRequired: true,
+      setAlertDisplayed,
+      alertDisplayed: true,
     };
     const { getByTestId } = setup({ props: customProps });
 
     waitFor(() => {
       const alert = getByTestId('signature-alert');
+      expect(setAlertDisplayed).to.be.calledOnce;
       expect(alert).to.exist;
       expect(alert).to.contain.text(
         Constants.Prompts.Compose.SIGNATURE_REQUIRED,

src/applications/mhv-secure-messaging/tests/e2e/keyboard-nav-test/secure-messaging-compose-error-message-keyboard-nav.cypress.spec.js

@@ -4,7 +4,6 @@ import PatientComposePage from '../pages/PatientComposePage';
 import FolderLoadPage from '../pages/FolderLoadPage';
 import { AXE_CONTEXT, Data } from '../utils/constants';
 
-// focus validation temporary commented due to focus error (will be fixed in MHV-61146)
 describe('Secure Messaging Compose Errors Keyboard Nav', () => {
   beforeEach(() => {
     SecureMessagingSite.login();
@@ -22,7 +21,7 @@ describe('Secure Messaging Compose Errors Keyboard Nav', () => {
     PatientComposePage.getMessageBodyField().type(Data.TEST_MESSAGE_BODY);
     PatientComposePage.pushSendMessageWithKeyboardPress();
     PatientComposePage.verifyErrorText(Data.PLEASE_SELECT_RECIPIENT);
-    // PatientComposePage.verifyFocusOnErrorMessage();
+    PatientComposePage.verifyFocusOnErrorMessage('SELECT');
 
     cy.injectAxe();
     cy.axeCheck(AXE_CONTEXT);
@@ -36,12 +35,12 @@ describe('Secure Messaging Compose Errors Keyboard Nav', () => {
     PatientComposePage.getMessageBodyField().type(Data.TEST_MESSAGE_BODY);
     PatientComposePage.pushSendMessageWithKeyboardPress();
     PatientComposePage.verifyErrorText(Data.PLEASE_SELECT_CATEGORY);
-    // PatientComposePage.verifyFocusOnErrorMessage();
+    PatientComposePage.verifyFocusOnErrorMessage('INPUT');
 
     cy.injectAxe();
     cy.axeCheck(AXE_CONTEXT);
 
-    // PatientComposePage.selectCategory();
+    PatientComposePage.selectCategory();
   });
 
   it('focus on error message for empty message subject', () => {
@@ -50,7 +49,7 @@ describe('Secure Messaging Compose Errors Keyboard Nav', () => {
     PatientComposePage.getMessageBodyField().type(Data.TEST_MESSAGE_BODY);
     PatientComposePage.pushSendMessageWithKeyboardPress();
     PatientComposePage.verifyErrorText(Data.SUBJECT_CANNOT_BLANK);
-    // PatientComposePage.verifyFocusOnErrorMessage();
+    PatientComposePage.verifyFocusOnErrorMessage('INPUT');
 
     cy.injectAxe();
     cy.axeCheck(AXE_CONTEXT);
@@ -66,7 +65,7 @@ describe('Secure Messaging Compose Errors Keyboard Nav', () => {
     });
     PatientComposePage.pushSendMessageWithKeyboardPress();
     PatientComposePage.verifyErrorText(Data.BODY_CANNOT_BLANK);
-    // PatientComposePage.verifyFocusOnErrorMessage();
+    PatientComposePage.verifyFocusOnErrorMessage('TEXTAREA');
 
     cy.injectAxe();
     cy.axeCheck(AXE_CONTEXT);

src/applications/mhv-secure-messaging/tests/e2e/keyboard-nav-test/secure-messaging-keyboard-nav-save-draft.cypress.spec.js

@@ -2,7 +2,7 @@ import SecureMessagingSite from '../sm_site/SecureMessagingSite';
 import PatientInboxPage from '../pages/PatientInboxPage';
 import PatientComposePage from '../pages/PatientComposePage';
 import requestBody from '../fixtures/message-compose-request-body.json';
-import { AXE_CONTEXT } from '../utils/constants';
+import { AXE_CONTEXT, Locators } from '../utils/constants';
 
 describe('Check confirmation message after save draft', () => {
   it('Check confirmation message after save draft', () => {
@@ -22,9 +22,12 @@ describe('Check confirmation message after save draft', () => {
     cy.injectAxe();
     cy.axeCheck(AXE_CONTEXT);
 
-    PatientComposePage.verifyDraftSaveButtonOnFocus();
+    PatientComposePage.verifyAlertFocusFocus();
+    cy.get(Locators.BUTTONS.ALERT_CLOSE).click();
+
     cy.get('.sm-breadcrumb-list-item')
       .find('a')
       .click();
+    cy.get(Locators.BACK_TO).click();
   });
 });

src/applications/mhv-secure-messaging/tests/e2e/pages/ContactListPage.js

@@ -160,7 +160,6 @@ class ContactListPage {
       .find(`a[href*="contact"]`)
       .click({ force: true });
 
-    cy.contains(`Delete draft`).click({ force: true });
     cy.url().should(`include`, `${Paths.UI_MAIN}/contact-list`);
   };
 

src/applications/mhv-secure-messaging/tests/e2e/pages/PatientComposePage.js

@@ -64,7 +64,6 @@ class PatientComposePage {
   };
 
   selectRecipient = (index = 1) => {
-    cy.get(Locators.ALERTS.REPT_SELECT).click();
     cy.get(Locators.ALERTS.REPT_SELECT)
       .shadow()
       .find('select')
@@ -426,8 +425,8 @@ class PatientComposePage {
       .should('be.visible');
   };
 
-  verifyDraftSaveButtonOnFocus = () => {
-    cy.get(Locators.BUTTONS.SAVE_DRAFT)
+  verifyAlertFocusFocus = () => {
+    cy.get(`.first-focusable-child`)
       .should('exist')
       .and('be.focused');
   };
@@ -503,7 +502,6 @@ class PatientComposePage {
 
   backToInbox = () => {
     cy.get(Locators.BACK_TO).click();
-    cy.get('[visible=""] > [secondary=""]').click({ force: true });
   };
 }