[med] JAWS+Chrome: Chat: Chat status icons are not announced

[ogumen]

Action Performed:

Prerequisites:

• User has created personal account and is logged into same.
• User has multiple chats in chat history.
• 1 or more chats are pinned to top of history.
• 1 or more chats have a draft message not yet sent.

1. Using JAWS+Chrome, open https://staging.new.expensify.com/
2. Note in the chat history panel on the left has icon indicators for pinned chats (pin icon) and those with a draft message (pencil icon). Tab over to the chat entries with those icons and note if their meaning is announced.

Expected Result:

The icons let users know which chats are pinned to the top and which have draft messages waiting to be addressed. This information should be announced when the chat room buttons are focused. e.g. 'Buttons [chat label] pinned to top or message in draft' or similar.

Actual Result:

Nothing is announced to indicate the meaning of the icons to users.

HTML:
<div class="css-1dbjc4n r-1awozwy" style="flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal;"><div class="css-1dbjc4n" style="margin-left: 8px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="16" height="16" fill="#C6C9CA"><path d="M13.6 2.9L3 13.5l-1.4 4.1c-.1.5.2 1 .8.8L6.5 17 17.1 6.4l-3.5-3.5zm-9.8 14l-.5-.5.6-2 1.8 1.9-1.9.6zM18 5.6L14.4 2c1-1 2.5-1 3.5 0C19 3 19 4.6 18 5.6z"></path></svg></div></div>

Workaround:

No workaround

Area issue was found in:

Chat page

Failed WCAG checkpoints

1.1.1

User impact:

The screen reader users will not get the information that the status icons provide.

Suggested resolution:

Use the title attribute with the element to provide a proper name to the icons that describes its purposes. e.g. 'message in draft', 'Chat pinned', etc.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title

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:

Bug5187237_Screen_Readers-Chat-Chat_status_icons_are_not_announced.mp4

View all open jobs on GitHub

[dangrous]

@Expensify/marketing Hi! We need copy for what a screen reader will read to the user if a chat is pinned, and if it has a draft message. My current drafts are:

Draft: "Has draft message"
Pinned: "Chat pinned"

Do these sound good to you? If not, let me know and I can swap them out.

[melvin-bot]

Triggered auto assignment to @ryanldonato (Waiting for copy), see https://stackoverflow.com/c/expensify/questions/7025/ for more details.

[jamesdeanexpensify]

@dangrous I just applied the "Waiting for copy" label. Whenever you need a copy review or suggestion, just add that label to any issue and a member of the marketing-content team will be assigned!

[dangrous]

Oh great, thank you! We should update the checklist to have that info - I guess what it says is old?

[jamesdeanexpensify]

Oh! Where's the checklist?

[dangrous]

It's the checklist that shows up when you make an App PR -

- [ ] I verified any copy / text shown in the product was added in all `src/languages/*` files
- [ ] I verified any copy / text that was added to the app is correct English and approved by marketing by tagging the marketing team on the original GH to get the correct copy.

If you let me know what you think the correct steps are I can get that updated! I guess it's still the same process, just maybe tagging the marketing team on the original GH by adding the "Waiting For Copy" label might be better.

[jamesdeanexpensify]

Yeah I think just "adding the "Waiting for Copy" label for a copy review" or something like that would be great. It will auto-assign someone from the marketing team to review! I think it only works for issues, not PRs though.

[ryanldonato]

@dangrous just going to make one small tweak to the copy:

Draft: Drafts
Pinned: Chat Pinned

If there are multiple drafted messages will they all appear in LHN like they do in slack?

[dangrous]

@ryanldonato Yep! Each chat with a draft will have this draft symbol on it (and therefore will be read out on the screen reader). As for the copy, my only question - since this is only read out by a screen reader - will that sound weird to just say "drafts"? I'm worried it'll sound like it's ONLY the drafts, or alternately a button to click on to view drafts, or something like that.

For reference, with the copy I have now currently, it reads out "dgalerosen@expensifail.com Last Chat message preview Has draft message Chat pinned, group" so it would be, with this copy, "dgalerosen@expensifail.com last chat message preview drafts chat pinned, group". Happy to go with whatever you decide, just wanted to make sure you had all the info!

(Also I definitely want to change that "last chat message preview" part because that's useless, but that will be on another issue.)

[ryanldonato]

@dangrous thanks for the context! I agree with you, let's go with:

Drafts: Drafted Message
Pinned: Chat Pinned