Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[crit] JAWS+Chrome: Chat: Updates to chat window (messages, typing status) are not announced #5681

Closed
ogumen opened this issue Oct 6, 2021 · 0 comments

Comments

@ogumen
Copy link

ogumen commented Oct 6, 2021

Action Performed:

Prerequisites:

  • User has created personal account and is logged into same.
  • User has Concierge chat in chat history.
  1. Using JAWS+Chrome, open https://staging.new.expensify.com/new/group
  2. Tab to the Concierge chat in the history and press Enter key. The focus moves to the message bar.
  3. Enter any message into the field and press Enter to send it, note if it is announced when posted to the chat window.
  4. When the other party is typing, note if the message indicating so is announced.
  5. When a response is received by the other party note if it is announced.

Expected Result:

All updates to the chat window should be announced to the user so they are aware their messages are posting, other users are typing, and messages have been received. Message posts from the users should announce as "I posted [message content] [date/time]". Messages from other participants should announce as "[username] posted on [date / time] [message content]". When other parties are in the middle of typing and the status message below indicates such it should be announced. i.e. "Concierge is typing".

Actual Result:

No visual updates to the live chat area are ever announced when they appear. Messages posted by the user, message received, and status messages indicating users are typing do not announce at all.

HTML:
<div class="css-1dbjc4n r-16y2uox" style="justify-content: flex-start; padding-top: 16px; padding-bottom: 16px; -webkit-box-pack: start;"><div class="css-1dbjc4n r-1d5kdc7 r-1qc3rpd" style="z-index: 24;"><div class="css-1dbjc4n"><div tabindex="0" class="css-1dbjc4n r-1loqt21 r-1otgn73"><div class="css-1dbjc4n"><div class="css-1dbjc4n"><div class="css-1dbjc4n r-1niwhzg" style="cursor: default; display: flex; justify-content: space-between; -webkit-box-pack: justify;"><div class="css-1dbjc4n" style="display: flex; flex-direction: row; padding: 8px 20px; -webkit-box-orient: horizontal; -webkit-box-direction: normal;"><div tabindex="0" class="css-1dbjc4n r-1loqt21 r-1otgn73"><div class="css-1dbjc4n r-633pao"><div class="css-1dbjc4n r-1mlwlqe r-1udh08x r-417010" style="border-radius: 20px; height: 40px; margin-right: 8px; width: 40px;"><div class="css-1dbjc4n r-1niwhzg r-vvn4in r-u6sd8q r-4gszlv r-1p0dtai r-1pi2tsx r-1d2f490 r-u8s1d r-zchlnj r-ipm5af r-13qz1uu r-1wyyakw" style="background-image: url(&quot;https://d2k5nsl2zxldvw.cloudfront.net/images/icons/concierge_2021.png&quot; );"></div><img alt="" draggable="false" src="https://d2k5nsl2zxldvw.cloudfront.net/images/icons/concierge_2021.png" class="css-9pa8cd"></div></div></div><div class="css-1dbjc4n r-16y2uox r-1wbh5a2" style="flex-basis: 0px; position: relative;">...</div>

Workaround:

No workaround

Area issue was found in:

Chat page

Failed WCAG checkpoints

4.1.3

User impact:

The entire live chat functionality is unusable to screen reader users. They will never know messages have been posted, received, or other parties are typing without having to manually navigate the content constantly. This would still not notify the user of typing status since that is very dynamic.

Suggested resolution:

Wrap the entire live chat window using a live region, so that all changes to the chat windows are announced when displayed. See below for some best practice ideas for live chat windows.
https://accessibility.blog.gov.uk/2016/12/09/patterns-for-accessible-webchats/
https://www.maxability.co.in/2018/11/11/how-to-make-live-chat-accessible/

Platform:

Where is this issue occurring?

  • Web

Version Number:
**Reproducible in staging?:**Yes
Reproducible in production?:
Notes/Photos/Videos: Any additional supporting documentation
Issue reported by:
Bug5187706_Chrome_Jaws-Chat-Updates_to_chat_window_not_announced__msgs__typing_status-typing

Bug5187706_Screen_Readers-Chat-Updates_to_chat_window_not_announced__msgs__typing_status.mp4

View all open jobs on GitHub

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants