Toast Notifications Don't Alert Screen Reader Users

[bbertucc]

On submitting a form or doing an action, there are no notifications that the action was done.

Here is what I expected:

• when signing up, after entering the verification, notify that you successfully signed up.
• when creating a report, notify that the report page is created.
• after selecting a filter, notify that the filter has been selected.
• after removing a filter, notify that the filter has been selected.
• when saving filters, notify that the filters have been updated.
• when deleting a report, notify that the report page is deleted.
• when sending a page to scan, notify that the scan is being sent
• when a page is successfully sent, notify that the page is successfully sent to the scan.
• when sending a property to scan, notify that the scan is being sent - please wait
• when a property is successfully sent, notify that the property is successfully sent to the scan.
• when a scan status on the scans page changes, notify of the new scan status.
• when adding a property, notify that the property has been added.
• when updating a property, notify that the property has been updated.
• when deleting a property, notify that the property has been deleted.
• when updating your account, nofity that the account is updated
• when logging out, notify you've logged out
• when deleting your user account, notify that your user account is deleted.

[wilsuriel03]

working on it

[wilsuriel03]

complete ✅

[kevinandrews1]

On JAWS and confirm this is still an issue. For example when I delete a report or property I only know the reports or properties page has loaded. After I verify and sign up, I don't know that I've been taken to the reports page. I press the send to scan button I don't get any information other than the page has loaded--it seems to not do much of anything from a screen reader perspective.

[bbertucc]

Looks like this hasn't been deployed yet @kevinandrews1

[bbertucc]

@wilsuriel03 - as I wrote in Slack, please use the Radix Toast notifications. Those Radix notifications are in spec of W3C accessibility. They don't work all the time on Apple VoiceOver, but that's a problem with how Apple VoiceOver works - not Radix. @azdak and @alexstine also tested the radix example and it works fine.

Let me know when it's up on staging, then @kevinandrews1 or @alexstine can test one last time and I can push to production.

[wilsuriel03]

@bbertucc this is ready for testing

[kevinandrews1]

When testing getting page not found when trying to create report or property - @wilsuriel03 I'm logged into @bbertucc's on dev. For the record the success notifcation when logging in is good. I'll keep this open for now but I can retest later today if this is fixed in the interim. I'm thinking the toast is ok but want to confirm before closing.

[bbertucc]

@kevinandrews1 can you try this again on our production? This time, can you go through our full list of tests and record what is or isn't creating notifications? (A screen recording of you going through and just saying "this worked" and "this didn't" might be best.

Here is the full list of tests in order that you should do it (using H3s to divide up the tests):

Signup and Verification

Start URL: https://dashboard.equalify.app/signup Test:

1. The following fields are editable and property labeled: First Name, Last Name, Email, Password, Confirm Password
2. Hide and show password button works
3. On clicking "continue," fields have proper validation: First name is required, Last name is required, Please enter a valid email address, Password must be at least 6 characters, Passwords don't match.
4. Users cannot add duplicate users.
5. Successfully clicking "continue" launches a notification "A verification code has been sent to your email."
6. When clicking from the email, validate verification announcing "Invalid verification code provided, please try again." if the code isn't correct.
7. Code can be resent to email.
8. On successfully validating after clicking "Verify and Sign Up" button, add notification "Account verified successfully" then redirect to reports page.

Note: When testing on a screen reader, the signup page and email verification page should be read out in addition to all form verification notifications.

Login

Start URL: https://dashboard.equalify.app/signup Test:

1. Click the "Log In" link
2. Enter in an invalid login.
3. Should be prompted with an error "incorrect username or password"
4. Enter in a correct login.
5. Verification message: "Verification successful. Redirecting to reports page"
6. On reports page.

Note: When testing on a screen reader, the signup page and email verification page should be read out in addition to all form verification notifications.

Creating a Report and Viewing Basic Data

Start URL: https://dashboard.equalify.app/reports Test:

1. You are logged out, you visit the url and it redirects you to the login.
2. After login, you are redirected to the reports page.
3. You have no properties.
4. "Create a report" button takes you to the "Create New Report" page.
5. All fields on page are disabled with an alert above form that says "You must have one property to create report."
6. Click "Cancel".
7. You are redirected to the Reports page.
8. After creating a property, return to "Create Report".
9. You select "Properties" under the "Filter By" dropdown field.
10. You can now search by properties. As you type the name of the property, suggestions appear.
11. Select the property you created
12. Click "Create Report"
13. You are notified "Report created successfully" and redirected to the reports page.
14. Now scan your property then go back to the reports page.
15. Click "View Report" of the report you created.
16. On the report page, your report should be fully populated with chart data that includes the number of equalified and active issues each day, a list of messages with a count of total equalified and active nodes per message, a list of tags, and a list of urls.
17. The message, tag, and page lists are paginated.
18. Where pagination is present, click to the next page of results to see the results loaded.

Browsing Message Details Page

Start URL: https://dashboard.equalify.app/reports

1. Click on a report with content.
2. Click on a message.
3. You are taken to a Message detail page with chart data filtered to the message that includes the number of equalified and active issues each day and a list of code snippets related to the message with a page url and status.
4. The code snippets list is paginated if there are over 10 code snippets.
5. If pagination is present, click to the next page of results to see the results loaded.
6. Click the Report name at the top of the page to go back to the report.

Browsing URL Details Page

Start URL: https://dashboard.equalify.app/reports

1. Click on a report with content.
2. Click on a URL in the page list.
3. You are taken to a Page detail page with chart data filtered to the page that includes the number of equalified and active issues each day and a list of code snippets messages related to the page with the code.
4. The code snippets list is paginated if there are over 10 code snippets.
5. If pagination is present, click to the next page of results to see the results loaded.
6. Click the Report name at the top of the page to go back to the report.

Browsing Tag Details Page

Start URL: https://dashboard.equalify.app/reports

1. Click on a report with content.
2. Click on a Tag in the tag list.
3. You are taken to a Tag detail page with chart data filtered to the page that includes the number of equalified and active issues each day and a list of messages related to the tag with a count of equalify and active for each message.
4. The messages list is paginated if there are over 10 messages.
5. If pagination is present, click to the next page of results to see the results loaded.
6. Click the Report name at the top of the page to go back to the report.

Editing a Report

Start URL: https://dashboard.equalify.app/reports

1. Click on a report with content.
2. Click edit report.
3. The report should only have one filter, filtering by a single property.
4. Add a filter for a message by selected the dropdown under filter by and typing content text related to a message
5. You should be prompted with options of different messages.
6. Select a message.
7. A notification should say "Message filter added"
8. Remove the added message.
9. A notification should say "Message filter removed."
10. Add two more messages, then click Update report.
11. You should be taken back to the report page then a notification should say "Report updated successfully."
12. The report should only be listing data related to the messages you selected.
13. Go back to "edit report".
14. Add in three additional messages.
15. Click update report.
16. You should be taken back to the report page then a notification should say "Report updated successfully."
17. The report should only be listing data related to the messages you selected.
18. Go back to "edit report".
19. Add in three additional url.
20. Click update report.
21. You should be taken back to the report page then a notification should say "Report updated successfully."
22. The report should only be listing data related to the messages you selected.
23. Go back to "edit report".
24. Delete all the filters.
25. Click update report.
26. You should receive a notification that you cannot update a report if there are no filters.
27. Add in the property filter.
28. Click update report.
29. You should be taken back to the report page then a notification should say "Report updated successfully."
30. The report should only be listing data related to the messages you selected.

Scanning a New Property with Single Page Discovery

Start URL: https://dashboard.equalify.app/reports Test:

1. Select "scans" from the navigation.
2. You should see a table with six columns.
3. Select "Properties" from the navigation.
4. Select "Add property" for an existing property
5. Property Name, URL, and Property Discovery should be required. You should not be able to click "Add Property" without filling in valid fields.
6. Fill in an invalid URL and click "Add Property"
7. You should be notified, "Please enter a valid URL".
8. Enter a valid URL.
9. Make sure the property has "Property Discovery" set to single.
10. Click "Add Property".
11. You should receive a "Property added" notification and you should be sent back to the properties page.
12. Now edit that property you added.
13. Send property to scan by clicking "Send to Scan"
14. You should receive a notification that says "Property sent to scan successfully!"
15. Navigate back to the Scans page.
16. If you just sent the property to scan, you should see the property in the table with the status "Processing". Since this is a single scan, you should only see that URL you wanted processing.
17. After no more than 1 minute, the scan should go from processing to complete.
18. Click the "Download" link of the scan that you just sent.
19. A json file of scan data should be sent.
20. Review scan data to make sure it seems like the information that you added.
21. Create a report with the property you just scanned selected from the filters and confirm that data is related to the property. There should also be only one URL, since the property was a single page scan.

Scanning a New Property with Sitemap Discovery

Start URL: https://dashboard.equalify.app/reports Test:

1. Select "scans" from the navigation.
2. You should see a table with six columns.
3. Select "Properties" from the navigation.
4. Select "Add property" for an existing property
5. Property Name, URL, and Property Discovery should be required. You should not be able to click "Add Property" without filling in valid fields.
6. Fill in an invalid URL and click "Add Property"
7. You should be notified, "Please enter a valid URL".
8. Enter a valid URL.
9. Make sure the property has "Property Discovery" set to "Sitemap."
10. Click "Add Property".
11. You should receive a "Property added" notification and you should be sent back to the properties page.
12. Now edit that property you added.
13. Send property to scan by clicking "Send to Scan".
14. After no more than 1-minute, you should receive a notification that says "Property sent to scan successfully!"
15. Navigate back to the Scans page.
16. If you just sent the property to scan, you should see the property in the table with the status "Processing". Since this is a single scan, you should only see URLs related to the property you wanted processing.
17. After no more than 1 minute per page, the scan should go from processing to complete.
18. Click the "Download" link of the one page you just sent.
19. A json file of scan data should be sent.
20. Review scan data to make sure it seems like the information that you added.
21. Create a report with the property you just scanned selected from the filters and confirm that data is related to the property.

Logging Out

Start URL: https://dashboard.equalify.app/reports Test:

1. Click the "My Account" link in navigation
2. Click "Log Out"
3. You should receive a notification that "You have logged out" and be redirected to the Login page.

Deleting Account

Start URL: https://dashboard.equalify.app/reports Test:

1. Click the "My Account" link in navigation
2. Click "Delete Account"
3. You should be prompted with a form to confirm account deletion.
4. Confirm.
5. You should receive a notification that says "Your account is deleted" and be redirected to the Login page.

[kevinandrews1]

Hey @bbertucc I broke this up into two video recording because I wasn't sure if my free Zoom would cut me off. I go through each step and document it for you and anyone else.

• Part 1
• Part 2

[bbertucc]

@wilsuriel03 -

Yay! looks like most of the notifications are working perfectly! A few notes:

Video 1

• [x] 5:11 - Doesn’t say reports page is loaded
• [x] 7:42 - When logging in doesn’t say reports page is loaded
• [x] 10:13 - When no properties are added into Equalify, disable all fields and show alert that you must add a property to create a report.
• [x] 13:36 & 24:07 - Remove “(Already Selected)’ text. It creates a confusing notification on screen reader. It can just be disabled. We do not need that extra text.
• [x] 16:33 and 18:30 - Clicking Next/Previous pages doesn’t announce when the next or previous content is loaded
• [x] 30:06 - Validate so the form requires http: or https properties
• [x] 32:31 - Make sure removing a buttong just says “removed filter”
• [x] 33:41 - Weird removing stale content in dom
• [x] 33:41 - Needs to notify that you cannot save a filter because a property or URL filter is not added.

Video 2

• [ ] 13:35 - Didn’t announce that account was deleted

[alexstine]

@bbertucc @kevinandrews1 I did not see a visible page message that an account was successfully deleted. If a message is not visible on the page, should we announce it?

[bbertucc]

@alexstine we might actually just need to create that message.

[bbertucc]

Moving this to Version 1.1, since we decided it wasn't mission cirtical.

[bbertucc]

@azdak updating this for you. Deleting an account is the only toast notification that was left.

[azdak]

So due to how stuff is architected, there's a little bit of an edge case/race condition thing happening with the account deletion toast, the user flow being:

• User confirms account deletion
• Function to delete the account is called
• Since the account has been deleted, the auth is no longer valid
• Since the auth is no longer valid, the user is logged out and taken to the login screen

...and all this happens before there's time to push a toast notification.

I've tweaked things slightly on staging so that following user confirmation of account deletion, a toast is pushed that says "Deleting account...", and then the delete function is called, and the user is taken to the login screen (a separate toast will appear if the deletion fails). I think this more or less conveys what's happening to the user, but open to it if folks think we need more- could also try to figure out another solution that gets around this limitation, like a system to inject notifications into the login screen. Thoughts?

[alexstine]

@azdak After the redirect to the login page, can you display the toast at that point?

1. User opens account deletion dialog.
2. Confirm.
3. Redirect to reports page first and then log out occurs. Not sure why this happens.
4. Login page loads. I think then we could trigger an alert that says "Account successfully deleted."

This is a tricky order of operations issue.

[azdak]

@alexstine Ok so I was probably overthinking this haha- everything I was saying above is true, but this being an SPA, code context is largely kept intact between views- so while I was tinkering, I tried just wrapping the toast call in a timeout, and it's now showing up both visually and in NVDA for me on the login screen after account deletion lol. Not the most elegant solution, but gift horses, mouths, etc. Just pushed to staging for testing-

[alexstine]

@azdak On staging, the announcement is working now but the toast is not visible in the DOM on the login page. I get the alert that my account has been deleted and then login page loaded.