[MM-44873] Screen reader not announcing the current state of user

[babinderrathi]

Summary

screen reader not announcing the current state of user

Ticket Link

https://mattermost.atlassian.net/browse/MM-44873

Related Pull Requests

none

Screenshots

| before |

https://user-images.githubusercontent.com/102028591/190590603-057f6610-91bb-459f-b477-96913fabf50b.mp4

| after |

https://user-images.githubusercontent.com/102028591/191520032-978b076e-c4bf-4179-9334-9f56db2b869e.mp4

Release Note

when we hover over the current status icon, the Screen Reader does not announce the status of the user. Now it announcing the current status and also tell user to open and change the status.

[mm-cloud-bot]

@babinderrathi: Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

I understand the commands that are listed here

[mattermod]

Hello @babinderrathi,

Thanks for your pull request! A Core Committer will review your pull request soon. For code contributions, you can learn more about the review process here.

[mattermod]

E2E tests not automatically triggered, because PR has no approval yet. Please ask a developer to review and then try again to attach the QA label.

[M-ZubairAhmed]

/release-note-none

[cwarnermm]

Does the phrase "You can change status by opening button" follow existing phrasing elsewhere across the UI? I propose updating the audible text to specify the specific UI element the user needs to select to change their user status. Something along the lines of "You can change status by selecting your profile picture".

[hmhealey]

^ @laneycs

I'm not sure exactly how we'd want this to work since we probably want something a bit more concise here. Something like "current status is away, set status button". Also, I think the "button" part at the end can't be changed since the screen reader adds that on itself

[laneycs]

@hmhealey @cwarnermm Just tested this with Voiceover on macOS Monterey with VoiceOver built-in screenreader. The existing copy reads and speaks as follows:

1. When the user profile is on:hover, "User profile image, image, banner."
2. When the user profile is selected to view the dropdown menu: "You are currently on an image. To begin interacting with the contents of this image, press Control-Optin-Shift-Down Arrow."

I believe this user flow should be more descriptive and follow similar existing copy in the navigation menu as follows:

1. When the user profile is selected, "You are currently on the user profile image. Your status is currently set to ______. Select to update your profile settings and status in the user profile menu."
2. When the user profile menu is selected: "You are currently on the user profile menu. To begin interacting with this menu, press Control-Option-Shift-Down Arrow."
3. As the user navigates through the profile menu:

• "You are currently on user profile settings. Select to open the user profile settings modal."
• "You are currently on user status: Custom. Select to set a custom status and emoji."
• "You are currently on user status: Online. Select to set your status to Online."
• "You are currently on user status: Away. Select to set your status to Away."
• "You are currently on user status: Do not Disturb. Select to set your status to Do not Disturb and choose a timeframe for disabling your notifications."
• "You are currently on user status: Offline. Select to set your status to Offline."

[hmhealey]

/e2e-tests

[mattermod]

Successfully triggered e2e testing! https://git.internal.mattermost.com/qa/cypress-ui-automation/-/pipelines/247973

[jgilliam17]

Thanks @babinderrathi Significant number of cypress tests failed. See full report here Can you please take a look and fix. Thanks 🙂

[jgilliam17]

/update-branch

[jgilliam17]

@babinderrathi When testing manually, JAWS reader is announcing user status - that ~looks~ sounds good. I re-ran the e2es after updating the branch and still seeing high number of failures. Let me know if you need help identifying failed tests. Additionally if you have any questions or need help with Cypress please ask in our QA channel on community. Thanks 🙂

[mattermod]

This PR has been automatically labelled "stale" because it hasn't had recent activity. A core team member will check in on the status of the PR to help with questions. Thank you for your contribution!

[hmhealey]

Hi, @babinderrathi. If you have any questions or if there's anything we could help out with, feel free to let us know

[jgilliam17]

/e2e-test

[mattermod]

Successfully triggered e2e testing! https://git.internal.mattermost.com/qa/cypress-ui-automation/-/pipelines/257199

[mm-cloud-bot]

Test server destroyed

[jgilliam17]

@hmhealey Can you please approve the last workflow and merge? Thanks 🙂

[amyblais]

/cherry-pick release-7.1

[mattermod]

Cherry pick is scheduled.

[mattermod]

Error trying doing the automated Cherry picking. Please do this manually

+++ Updating remotes...
Fetching upstream
Failed to add the RSA host key for IP address '140.82.114.3' to the list of known hosts (/app/.ssh/known_hosts).
From github.com:mattermost/mattermost-webapp
   5026f247a..926776e5f  MM-47663-b         -> upstream/MM-47663-b
 + d5b1dba6d...4f249f597 cloud              -> upstream/cloud  (forced update)
 * [new branch]          cloud-2022-11-03-backup -> upstream/cloud-2022-11-03-backup
   4f249f597..a9ff61e8f  master             -> upstream/master
   c316a6bc4..bd6b181bd  release-7.5        -> upstream/release-7.5
 * [new branch]          test_cases_demoted -> upstream/test_cases_demoted
Fetching origin
Failed to add the RSA host key for IP address '140.82.113.4' to the list of known hosts (/app/.ssh/known_hosts).
+++ Updating remotes done...
+++ Creating local branch automated-cherry-pick-of-mattermost-webapp-#11145-upstream-release-7.1-1667503976
Switched to a new branch 'automated-cherry-pick-of-mattermost-webapp-#11145-upstream-release-7.1-1667503976'
Branch 'automated-cherry-pick-of-mattermost-webapp-#11145-upstream-release-7.1-1667503976' set up to track remote branch 'release-7.1' from 'upstream'.

+++ About to attempt cherry pick of PR #11145 with merge commit a9ff61e8f654ff415bd3fddc21d7dd31c3b4da88.

error: could not apply a9ff61e8f... [MM-44873] Screen reader not announcing the current state of user (#11145)
hint: after resolving the conflicts, mark the corrected paths
hint: with 'git add <paths>' or 'git rm <paths>'
hint: and commit the result with 'git commit'

+++ Conflicts detected:

UU components/status_dropdown/__snapshots__/status_dropdown.test.tsx.snap
UU components/status_dropdown/status_dropdown.tsx
Aborting.

+++ Aborting in-progress git cherry-pick.

+++ Returning you to the master branch and cleaning up.

[amyblais]

@hmhealey @nevyangelova Can you help manually cherry-pick this to release-7.1 branch?