[a11y support] MHV Secure Messaging: Submission delay, due to the inclusion of attachments

The Problem

Inquiry from MHV - Secure Messaging

c/o 5/30/2023 c/o Joel (MHV SM):

We're working on a flow for when users send a large file size attachment packet on a message, there's a potentially long wait time. Currently, we don't have a way to alert users that the system is processing and that they'll need to wait on the current screen to get a system confirmation of the message sending or failing. If they navigate away, the message can still be sent, but they'll need to "manually check" in their sent messages folder to confirm it. I've [Joel] worked w/ Coulton to establish a flow + design elements to use

Link to the Sketch File Flow Created by Joel and Coulton

Draft Images 5/31/2023

Sketch Screens SM Submission Delay May 31 2023.png

Pictured (left to right): Draft screen, spinner screen, modal screen, success screen, error screen and inbox screens, as shown in Sketch on 5/31/2023.

Feedback & Questions

On 5/31/2023, @sara-amanda (CAIA) met with the Platform Governance Team to discuss this issue, during office hours. The following feedback and questions came out of that meeting. Please reach out to @sara-amanda with any questions.

Existing Pattern

Files pattern in DST - progress bar is the closest thing for the loading indicator
The platform team recommends following this closely.
Progress bar, if you leave this page if it is still attached?
Allison is a fan of a modal IF you try to leave the page.
- :star: Consider adding an alert style to the modal.
  - You are leaving and this hasn't been sent, we need to let you know.
  - It may not stop you from sending, so that would need to be conveyed.
    What happens if you close the browser?
You may have to put text on the page that says do not close the browser.
How does it still run in the background?
Timeout?
Is there a timeout for a user’s login?
- Would this be impacted?
Is there a timeout for the file upload?
- If yes, how long?
Is there a system timeout?
Overall, how long should the user wait?
- Convey that information to the user for expectations.
  Be specific
Be specific as to the reason why it is still sending, because of the attachment.
CAIA content needed here (@laurwill )
Your file should be no larger than …
25 MB? (SM may say 10 MB?)
If the limit doesn’t work, change the limit?
- Would this be the root of the problem, limit the files?
- Any testing around this?
  How long does the alert message show up?
:warning: It is not dismissible?
- You should be able to “x” out of that message.
  Sent folder to confirm it was sent …
Do you not get the alert, if you navigate away?
Set expectations with time duration for this wait and when the message might pop into the sent box?
- How long should they wait?
- When should they check back?
  Message could not be sent
When does the pop up show?
What if it shows after you send another message?
- How do you differentiate the two?
:warning: Reminder: Avoid stacking alerts.
Context to make sure it makes sense
If this was to show on other pages at the top …
- It could be visually disrupting (a11y issue)

Next Steps

[ ] Review CAIA a11y/Platform feedback and questions above
[ ] Meet to discuss further next steps

Resources

Slack Convo :thread: in Secure Messaging Channel
Alert Component - DST
Files Pattern - DST
Status Messages - WCAG
Consistent Help - WCAG
Related Ticket c/o Josh - Bug Ticket #725
Adrian Roselli Article c/o Josh
Collaboration Cycle for [VFS MHV Secure Messaging, MHV Secure Messaging, Secure Messaging]#51115
Historical, Related Reference

I reached out to Josh Kim, to see if he could recall any historical issues relating to this item on May 30, 2023.

I think this has come up before in larger conversations on alerts, status, etc. I remember working with Matthew Dingee to mock some of this up and propose a new way of handling alerts at large This ticket has some notes, but there’s another bit of work Matt did to explore a message holder.

CAIA Ticket :ticket:

Please find this newly-created ticket, as it relates to this :thread: thread in Slack #mhv-secure-messaging on form submission delays, due to the inclusion of attachments.@VA-Dook this should help guide your work on this issue. Happy to sync with you further to discuss.

Note: I will be OOO 6/2-6/9/2023, please reach out to @SarahKay8 and @coforma-terry in my absence.

cc: @VA-Dook @underpaid1ntern @coforma-terry @joshkimux @coultonbunney-usds @SarahKay8 @allison0034 @briandeconinck

CAIA Functionality Inquiry

Question posed in Slack from 6/1/2023.
FYI - Lichelle Bain created a ticket for future enhancements for this potential work. https://jira.devops.va.gov/browse/MHV-46006 (SM Team has access)

Automate Failure Message

Is there a way to automate a failure email, much like the success email - in the sent files? Can they be sent to the inbox with the subject noting at the front success or failure?

If so the alert message could say and link to the inbox for them to check back after xx amount of time?

Inbox contents:

Successful Send: Subject of Email Failure to Send: Subject of Email

Alert message

Your file(s) appear to be xxx size. Due to the large size, it will take a bit to send. Please check your inbox (link) in xx minutes to verify the send?

Feedback from Oleksii Morgun:

We would need to initiate the discussion with MHV Communications team that maintains APIs. I am not sure what LOE is involved. This would be an enhancement to their API functionality which may be a long term solution. If we would absolutely need to go that route, then Bryan Riley and Lichelle Bain would need to coordinate that with MHV Communications.

A11y Spinner Discussion

Notes from Spinner Discussion 6/8/2023.

Spinner Accessibility

Angela mentioned the need for an Aria-live region for the spinner with a recurring status message while uploading.
When a user attempts to navigate away from the page, the warning modal will appear.
This modal will require user testing to determine if this is the best way to handle this messaging in regard to novice screen reader users.

Spinner to Modal Screen

Spinner screen to the modal discussion Aliyah and Randy (Duke) Larson in Slack 6/8/2023

Once the process of uploading is initiated it will continue or fail regardless of what you do on the front end. This means that the modal is only an indication of "if you leave, you won't know what happens with your upload".
As for initiating the modal, this would happen if you attempted to use the menu to go to another page.
There is an edge case that I brought up where someone might close the browser (to be handled by devs).

Hi Joel and Randy (it doesn't seem that I can tag you here, so I'll post the ticket on the Slack thread as well)

This is the content for the spinner and modal screens. Randy previously mentioned that at this time there isn't a content need for the success and failure messages.

Spinner

https://www.sketch.com/s/23f63aae-1e68-46fb-a197-af29ee4d3fd4/a/K0APq0V#Comment

Suggested content:

We’re still sending your message…

Notes:

Ellipsis is used in the design system

Modal

https://www.sketch.com/s/23f63aae-1e68-46fb-a197-af29ee4d3fd4/a/w52mg29#Comment

Suggested content:

[title] Leave this page?

Your message is still sending.

If you leave this page now, you’ll need to check your Sent folder to confirm that your message successfully sent.

If your message isn’t there, check your Draft folder and try sending it again. You’ll need to attach your files again when you’re ready to send the message.

Stay on page [button] Leave this page [button]

Notes:

As we chatted Joel, there are a few places someone can check for a successfully sent message or for a message that didn't send (likely due to internet connectivity). The common folders would be the "Sent" and "Draft" folders
I've also added content here about the user needing to attach their file again when they're ready to send, since attached files don't save in drafts.

One last question is about the type of modal you all are planning to use. Will this be a default modal or a warning modal?

Hi @aliyahblackmore , thanks for the content and the question about the modal type - it's a good point to bring up.

Since this is a type of warning/pause for the user to consider what action they might want to take + its consequences - we'll use the warning type since there's a destructive possibility of attachments not being saved. The modals communicating that attachments aren't saved on drafts use a warning style alert/modal.

CAIA A11y Inquiry Follow-Up

Hi @underpaid1ntern - as you are wrapping up the content items with @aliyahblackmore , can you fill in the blanks here for the questions posed earlier, from my meeting with the Platform team, regarding this ticket? They are in the original ticket body above, but will paste them here for quick reference.Just wanting to make sure all of these were reviewed.

Note: I wasn't able to test the warning. I did however log into staging and test uploading a document. The first test instance it appears to have sent 3x and there is still 1 in the draft folder. The second test instance it said there was an error that occurred. It said it could not save my draft. It still let me attach and send though. It sent one version.

I filled out what I know from what I can see, and from conversations with @aliyahblackmore, below.

Feedback/Questions from Platform Office Hours

Existing Pattern

Feedback is: Files pattern in DST - progress bar is the closest thing for the loading indicator
- The platform team recommends following this closely.
- Progress bar, if you leave this page if it is still attached?
[x] USING WARNING STYLE FOR MODAL AS OF 7/5/2023 - ALERT PATTERN va-alert status=warning
- Feedback was: Allison is a fan of a modal IF you try to leave the page.
- :star: Consider adding an alert style to the modal.
  - You are leaving and this hasn't been sent, we need to let you know.
  - It may not stop you from sending, so that would need to be conveyed.
    What happens if you close the browser?
Feedback is:
- You may have to put text on the page that says do not close the browser.
- How does it still run in the background?
  Timeout?
Feedback is:
- Is there a timeout for a user’s login?
  - Would this be impacted?
- Is there a timeout for the file upload?
  - If yes, how long?
- Is there a system timeout?
Overall, how long should the user wait?
- [x] USING "LATER" AS OF 7/5/2023: Using the term "later" to address when the user should check their "sent" or "Draft" folders because there may be various variable (like internet) that determine when someone should go back to check their folder.
- Feedback was: Convey that information to the user for expectations.
  Be specific
[x] CONTENT UPDATED AS OF 7/5/2023 CAIA content provided by (@aliyahblackmore )
Feedback was: Be specific as to the reason why it is still sending, because of the attachment.

Your file should be no larger than …

[x] USING 10 MB AS OF 7/5/2023: What to know about attaching files (drop-down arrow) includes language noting: There can be up to 4 files to each message. The file types and the max size for each file is 6 MB. The maximum total size for all files attached to 1 message is 10 MB.
Feedback was:
- 25 MB? (SM may say 10 MB?)
- If the limit doesn’t work, change the limit?
- Would this be the root of the problem, limit the files?
- QUESTION: Any testing around this?
  How long does the alert message show up?
Feedback is:
- :warning: It is not dismissible?
  - You should be able to “x” out of that message.
    Sent folder to confirm it was sent …
[x] CONTENT UPDATED AS OF 7/5/2023 by @aliyahblackmore using the term "later."
- Feedback was: WAS NOT ABLE TO BE TESTED
  - Do you not get the alert, if you navigate away?
  - Set expectations with time duration for this wait and when the message might pop into the sent box?
    - How long should they wait?
    - When should they check back?
      Message could not be sent
Feedback is:
- When does the pop up show?
- What if it shows after you send another message?
- How do you differentiate the two?
:warning: Reminder: Avoid stacking alerts.
Context to make sure it makes sense
Feedback is:
- If this was to show on other pages at the top …
  - It could be visually disrupting (a11y issue)

cc: @coforma-terry @SarahKay8

CAIA Note

QQ: @underpaid1ntern have you had a chance to look at the above comment addressing the Platform feedback provided in Office Hours? (cc: @AngelaFowler82 )

@sara-amanda will follow up :)

Hi @sara-amanda , sorry this has taken me forever to return to. I got pulled onto some critical tasks that took a while.

Responses:

Existing Pattern

The files pattern + progress bar is hard to implement in SM because we don't preload files. I asked the developers if there would be any way for us to provide meaningful feedback about the status of uploading files OR the status of the message processing and they said no. The API isn't built in a way to report that.
The files will be "in flight" after a user clicks send.
The modal will be in an alert style.
The text lets the user know that they'll need to check in other places to confirm if the message sent or not.

What happens if you close the browser?

We will probably need to put text about not closing the browser. I think it makes most sense to do this on the spinner. So it would say: "Don't close your browser. We’re still sending your message..."
It runs in the background because the message and files are now "on the server side" meaning they've been sent over and are processing... the front end is waiting for a response from the backend.

Timeout?

There is a session timer. I'm not sure how long it is on VA.gov, but it follows the "default" set by the environment that applies to other tools. The timer resets whenever a user takes action.
We don't have a specified timeout for the file upload. I am recommending 15 or 20 seconds. Our lead dev did a test and the response time close to the file upload limit was 12 secs.
I'm not sure what system time out refers to here. I don't think there is in the sense that it's possible to have "an infinite" user session if a user does an action in the system before the session timer kicks them out. (we discovered this because of how the autosave function was working, previously)
We can't determine how long a user should wait so using "later" in the verbiage

Be specific?

SM has a limit of 10 mb
I don't believe the product owner will want to change the limits. It was previously 4 mb, then 6mb, and now 10mb because of user feedback.
limiting files may help
Testing in what sense?

How long does the alert message show up?

It is dismissible

Sent folder to confirm it was sent...

The alert would appear when navigating away. This functionality hasn't been built yet which is why that couldn't be tested.
We don't know when the message might appear due to system malfunction.

Message could not be sent

The popup comes up when user tries to navigate away before the backend sends a response that the message succeeded or failed
"What if it show after you send another message?" => I don't understand this question. The Veteran would have to check in sent for both messages to confirm they went through if they chose to exit out of the spinner before receiving a system response both times.
"How do you differentiate the two?" I don't understand what this question refers to.

Context to make sure it makes sense

This only shows when sending a message with a large attachment packet from the following scenarios: Starting a new message, resuming a draft of a new message conversation, replying to a conversation that isn't older than 45 days.

If there are more questions, I think a meeting would make sense to wrap up this ticket. Happy to schedule something.

cc: @coforma-terry @SarahKay8

CAIA Update

@underpaid1ntern, thank you for getting to this and for your updates! cc: @coultonbunney-usds

After reviewing your updates in this ticket above (#59425), I also met with @briandeconinck , @humancompanion-usds and @allison0034 of Platform, and then with @SarahKay8 and @AngelaFowler82.

There are three issue areas outstanding since they aren't resolved completely, from the original list above, additional group feedback can be found in this comment below.

[ ] Be specific

[ ] Confirm in sent folder

[ ] Message could not be sent

Additional Questions

Here are some additional questions that came up, during these review discussions:

Happy vs. Unhappy Path Questions

What happens if this breaks and times out and doesn't send and has a file attached?
- Is there an undeliverable message instead?
What happens if it does send?
- Just check the sent file?
Are you treating the message and attachment delivery the same?
- Do both have to succeed for either to succeed or one or the other?

Recommendation from Platform:

New Collab Cycle (Abbreviated) Ticket Needed

Based on the initial findings above, and those remaining, to make sure, ultimately, that the best product is shipped.

[ ] Platform is requesting that you submit a kickoff request to process the remaining issues through the collab cycle.
- You can skip Design Intent and go straight to Midpoint, where they can provide additional feedback.

Secure Messaging needs another staging review. There are still a lot of unknowns. It is hard to look at it and give feedback, since there are so many unknowns.

CAIA Additional Testing

Please tag @SarahKay8 and myself @sara-amanda , along with @coforma-terry - if you would like us to retest anything, just provide the following:

[ ] URL to test
[ ] Link to accounts to use in test
[ ] Note the scenarios mentioned in this ticket that need retested

Group Feedback Followups

Feedback Key:

a (CAIA)
b (SM)
c/d (CAIA, Platform or Angela and includes :new: emoji icon)

(1) BE SPECIFIC :red_circle:

1.a ORIGINAL FEEDBACK: BE SPECIFIC

CONTENT UPDATED AS OF 7/5/2023 CAIA content provided by Aliyah
Feedback was: Be specific as to the reason why it is still sending, because of the attachment.

1.b. RESPONSE FROM JOEL: Be specific?

SM has a limit of 10 mb
I don't believe the product owner will want to change the limits. It was previously 4 mb, then 6mb, and now 10mb because of user feedback.
Limiting files may help?
Testing in what sense?

:new: 1.c. Follow-up feedback from Platform: Be specific?

Later Terminology: Ambiguous - user testing item "later" - if no longer than 20 seconds (later = 10 seconds ... user may jump thinking 5 min.)
However If it runs in the background, later may work.

(2) CONFIRM IN SENT FOLDER :red_circle:

2.a. ORIGINAL FEEDBACK: Sent folder to confirm it was sent …

CONTENT UPDATED AS OF 7/5/2023 by Aliyah using the term "later."
Feedback was: WAS NOT ABLE TO BE TESTED
Do you not get the alert, if you navigate away?
Set expectations with time duration for this wait and when the message might pop into the sent box?
How long should they wait?
When should they check back?

2.b. FEEDBACK FROM JOEL: Sent folder to confirm it was sent... The alert would appear when navigating away.

This functionality hasn't been built yet which is why that couldn't be tested.
We don't know when the message might appear due to system malfunction.

:new: 2c. Follow-up feedback from Angela: Sent folder to confirm it was sent... OK, so when I send a message it doesn't say anything for a few seconds and then it says secure message is successfully sent then it takes me to the inbox and places focus on the h1. I'm going to try again and see if I can't find that spinner., Didn't find it.

:new: 2d. Follow-up feedback from CAIA:Sent folder to confirm it was sent...

This functionality hasn't been built yet which is why that couldn't be tested.

We don't know when the message might appear due to system malfunction.

When will this functionality be built?
When might we know when the message might appear?

(3) MESSAGE COULD NOT BE SENT :red_circle:

3.a. ORIGINAL FEEDBACK: Message could not be sent

Feedback is:

When does the pop up show?
What if it shows after you send another message?
How do you differentiate the two?
:warning:Reminder: Avoid stacking alerts.

3.b. FEEDBACK FROM JOEL: Message could not be sent

The popup comes up when user tries to navigate away before the backend sends a response that the message succeeded or failed
"What if it show after you send another message?" => I don't understand this question.
- The Veteran would have to check in sent for both messages to confirm they went through if they chose to exit out of the spinner before receiving a system response both times.
"How do you differentiate the two?" I don't understand what this question refers to.

:new: 3c. Follow-up feedback from CAIA: Message could not be sent.

"What if it show after you send another message?" aka ...
- What if you send more than one message, how do you know which one the popup pertains to?
"How do you differentiate the two?" aka ...
- How do you know which message the popup pertains to, if you send more than one message.

@coforma-terry feedback shared

Hi @underpaid1ntern - just checking in with this - do you still require a review? Thanks! cc @sara-amanda

department-of-veterans-affairs / va.gov-team