BP Nouveau: Messages UI issues

[mercime]

1) Other than for bulk selection, what is the checkbox for in each Message list? There's no button to do something after you check one for a message row. Also, NVDA screen reader or ChromeVox or Narrator only announces "Select this message", but for what message? And even if we append the title of the Message to "Select this message", then clicking on it, there's nothing actionable after the checkbox which relates specifically to the Message.

2) Keyboard & Screen Reader users cannot open a Message to view the whole conversation and respond to the message.

A mouse click and a tap on a touch screen (phone) seemed to do nothing. After I tapped the Message title, I expected to see a new screen showing the whole message and a textbox where I can respond to the message.

Only discovered on the laptop that if you scroll down just below the message list, that the whole message for that Message title I clicked on shows up. Checked on the phone again and yes the message showed up below the message list but that was unexpected. Then seeing that whole message below, I still need to click on the icon to "View full conversation and reply".

For Keyboard users: Tabbing through a Message thread, the focus goes to the checkbox and link to sender's profile page of that row then goes to the next row's checkbox and link to sender's profile page. No way to navigate to view the whole message and respond to it.

For Screen reader users: The screen reader announces the list, the checkbox, link to sender's profile page, title of the message, excerpt of the message, and the date, no way to navigate to view the whole message and respond to it.

One solution would be to make the title of the Message a link to view the entire Message in another page.

3) No indication the Message was starred/not starred in Messages inbox. Related: #7723 - Cannot Star or Unstar in single message view

4) No indication that the Message was read/unread in Messages inbox.

[imath]

In 7731.patch :

1. Unread threads are in bold

2. New info feedbacks are added to explain how to use the UI
3. It's now possible to use the keyboard to interact with the displayed messages list :

• use ctrl + d to preview down and ctrl + u to preview up
• use ctrl + enter to open a previewed/selected thread in its single view.

4. Clicking on the All message checkbox adds a message about how to use the bulk actions

5. Clicking on one of the message checkbox opens the same info

[imath]

Thanks @mercime

7731.2.patch is another approach that listens to the thread container focus to update the active conversation, when a conversation is active, Pressing the enter or space key opens the full conversation.

Here's a screencap of the message to inform the user about how to activate/open a conversation :

Looking at your gif, that might be more in line with what's expected.

[mercime]

This is much better @imath! Looks like you almost read my mind with the animated gif alone. Kudos for removing focus on the message UL and moving the focus to the thread-item. Recommend that focus be moved from each message thread to the .thread-subject instead for the following reasons :

a) Keyboard-only users. Visual sequence expected:

• Tab and focus on checkbox
• Tab and focus on Sender link
• Tab (if has tabindex="0") and focus on Message .thread-subject which can be clickable via pressing the ENTER key to view the whole Message.

b) Users of screen readers. Screen readers announce content in a linear fashion, from top to bottom of source code. Ideal sequence:

• Checkbox [announced: Select this message, Checkbox not checked] - go even further by announcing the title in label for announcement: 'Select Message: <Message Title>`, Checkbox not checked
• Username of sender [announced: Mathieu Viet, Link ] - can go further and prepend <span class="bp-screen-reader-text">From </span> to Mathieu Viet, Link
• Message Title that's announced as clickable by "<Message Title>, Press <kbd>Enter</kbd> to view message". If this was a link, it would be very clear at the onset what it would lead to.

Notes:
a- Instead of #message-threads li.unread { font-weight: bold; }, use numeric value for bold #message-threads li.unread { font-weight: 700; }
b- .thread-date has become wonky as seen in both screenshots.
c- to self: recalled outline:0 on a couple of our form elements but not sure if it came from theme or our stylesheet. Will double-check as removing outline is bad for a11y.

[imath]

Great thanks a lot for your explanations @mercime I'm going to work on another patch to try to adapt the UI accordingly.

[imath]

@mercime 7731.03.patch should be better. I've added a style rule to show a dotted border around the thread title @hnla could you review it as i'm not confident with sass/less, thanks.

[hnla]

@imath looks ok, checked against existing partial & should do what's intended.

[imath]

Awesome, thanks a lot for your help 👌

[mercime]

@imath Thank you for the updated patch.

Summary

Tested on Windows 10. Passed on Keyboard tests. Failed on Screen Reader tests except on Chrome and Chromevox combo.

Keyboard Test Results

Passed. Tested on Windows 10 - works on Firefox , Chrome, Edge, and IE 11/10.

Screen Reader Test Results

NVDA on Firefox - best free screen-reader combo on Windows
Announced: Select Message Castle Tower checkbox not checked
Announced: Mathieu Viet From Mathieu Viet link
Announced: 2 Castle Tower Castle Tower Press kbd Enter kbd to view conversation.

• Press Space bar = Nothing is announced. Message does not open in new window. I did SEE the message showing up in "Active Conversation" box below the list of messages when I scrolled down.
• Press Enter key = Nothing is announced. Message does not open in new window. I did SEE the message showing up in "Active Conversation" box below the list of messages when I scrolled down.
• Must Press Enter key twice in very quick succession = Message opens up in a new window.

Chromevox on Chrome
Announced: Select Message Castle Tower
Announced: Mathieu Viet From Mathieu Viet
Announced: 2 Castle Tower Castle Tower Press kbd Enter kbd to view conversation.

• Press Enter key or space bar = Opens the Message

Some additional testing done:

NVDA on Edge 42.17...
Announced: Select Message Castle Tower checkbox not checked
Announced: Mathieu Viet From Mathieu Viet
Announced: 2 Castle Tower Castle Tower Press kbd Enter kbd to view conversation.

• Press Enter key or space bar = Nothing happens. Nothing is announced. Message does not open in new window. I did SEE the message showing up in "Active Conversation" box below the list of messages when I scrolled down.
• Tried Press Enter key twice in very quick succession like NVDA on Firefox but that doesn't work.
• Accidentally pressed CTL+Enter and the Message opened up in new window.

NVDA on IE 11
Announced: Select Message Castle Tower checkbox not checked
Announced: Out of list 3 items, Mathieu Viet From Mathieu Viet link
Announced: 2 Castle Tower Castle Tower Press kbd Enter kbd to view conversation.

• Press Enter key or space bar = Nothing is announced. Message does not open in new window. I did SEE the message showing up in "Active Conversation".
• Tried Press Enter key twice in very quick succession like NVDA on Firefox but that doesn't work.
• Tried CTL+Enter like on NVDA on Edge above, the Message opened up in new window.

Narrator on Edge 42.17...
Announced: Unchecked Select Message Castle Tower checkbox
Announced: Mathieu Viet From Mathieu Viet link
Announced: Group (or Groove, haven't encountered this before)

• Press Enter key = Announced: "Text is not editable"
• Press Space bar = Announced: "Command not available"
• Tried Press Enter key twice in very quick succession like NVDA on Firefox but that doesn't work.
• Tried CTL+Enter like NVDA on Edge = Announced: "Not a Narrator Command"

Narrator on IE 11
Announced: Unchecked Select Message Castle Tower checkbox
Announced: Mathieu Viet From Mathieu Viet
Announced: 2 Castle Tower Castle Tower Press kbd Enter kbd to view conversation Group(or Groove, haven't encountered this before)

• Press Enter key = Announced: "Text is not editable"
• Press Space bar = Announced: "Command not available"
• Tried Press Enter key twice in very quick succession like NVDA on Firefox but that doesn't work.
• Tried CTL+Enter like NVDA on Edge = Announced: "Not a Narrator Command"

Not tested on paid screen readers like JAWS (popular and one of the very first screen readers), Window-Eyes, nor Dragon Naturally Speaking. But I know that Dragon has a command to reveal links (like other screen readers) on screen so Dragon users can call out the link number to go to open the link. The Message Subject won't be shown as a link (or clickable) on screen.

Notes

1/ The duplicate "Mathieu Viet" when focus was on sender link was due to the rendered markup which repeated the text for screen readers. The screen-reader-text "From" was supposed to be added before the sender name.

<a class="user-link" href="http://localhost/allsvn/members/mamah/">
	<img class="avatar" alt="" src="//www.gravatar.com/avatar/9f05b6e5c8ff9d0f49b5949afb9a153b?s=32&amp;r=g&amp;d=mm">
	<span class="user-name">Mathieu Viet</span>
	<span class="bp-screen-reader-text">From: Mathieu Viet</span>
</a>

2/ The duplicate message title, "Castle Tower" when focus was on this element was due to rendered markup which repeated the text for screen readers. Only the screen-reader-text "Press Enter to view the full conversation." was supposed to have been added after the subject title.

<div class="thread-subject" tabindex="0">
	<span class="thread-count">(1)</span>
	<span class="subject">Castle Tower</span>
	<span class="bp-screen-reader-text">Castle Tower. Press Enter to view the full conversation.</span>
</div>

3/ "kbd" before and after Enter. My bad, automatic enclosing tags on my part. Please remove tags.

4/ We should consider screen reader brand usage per ​Screen Reader User Survey #7 by Webaim.org.
Top 5 screen readers per survey: Paid JAWS (best on IE, Windows), free NVDA (best on Firefox, Windows), free VoiceOver (best on Safari, MacOS), paid Zoom Text (Windows), and free System Access to Go (Windows only). Unless we find another solution, it's looking more like the easiest solution is that we change the Message title into a natively supported link which is 100% compatibile with all screen readers and then remove the screen-reader-text "Press enter .... open the message".

[imath]

Thanks a lot for your tests @mercime I’ll submit a new patch using a link for the message subject making sure this link doesn’t make the Preview box useless.

[imath]

​7731.04.patch is doing two things:

1. it uses a link to maximize screen readers support and removes the extra data in bp-screen-reader-text spans. (@mercime i hope this will finally fix the a11y trouble)
2. it changes the markup a bit when the user is viewing his sentbox, it's no more a "from" user but "to" users. As they are already listed in the preview I pick the first and add a mention to inform about the number of other participants in the thread. See the screenshot below.

This second part of the patch needs your attention @hnla because i had to edit css.

[hnla]

Folks I'm very scared at the detail in some tickets going in at quite a late stage, I think UI unless it's a manifest issue or bug must take second place to testing?

@imath what am I looking for with changes to styles, what needs focus and testing?

In the SC above that sub menu looks a bit odd is this a particular WP twentysomething theme?

[imath]

@hnla unfortunately I think the change is to reply to an issue : instead of listing recipients i was using the sender data into the sentbox. You need to test the "Messages sent" nav : instead of .thread-from, i'm using .thread-to and i've tried to make sure both are using the same style. SC is made in TwentySeventeen, i probably played with the customizer :)

[mercime]

@imath Tested the 7731.04.patch. Have similar results to 7731.03.patch: passed on keyboard but not on screen readers except Chromevox/Chrome.

Replying to imath:

... using a link for the message subject making sure this link doesn’t make the Preview box useless.

Thinking about this, perhaps instead of making the Message Title link go to view the full message screen, make that link navigate to a new anchor link below -> Active Message (instead of Active Conversation) after the list of Messages for all: mouse, keyboard, and screen reader users.

Whether we go on this route or not, please remove the tabindex=0 on the .thread-item because when focused, the screen reader announces the whole row with the checkbox, link, and message link. Pressing Enter after hearing any of those does not lead anywhere.

If we do go with suggestion above,
-- remove
<span class="bp-screen-reader-text"><?php esc_html_e( 'Press Enter to read the mesage below.', 'buddypress' ); ?></span>
from bp-nouveau/buddypress/common/js-templates/messages/index.php as it is no longer necessary to announce a link that works as expected.

-- change
'howto' => __( 'Click on the message title to preview it in the Active conversation box. Double click on the message title to open the full conversation.', 'buddypress' ),
to
'howto' => __( 'Press Enter or click on the message title to read it in the Active Message box below.', 'buddypress' ),

It's almost a couple of hours past midnight so do excuse any mistakes made above.

[imath]

Thanks a lot for your tests @mercime (and have a lovely night ☺️) I think the software you are talking about are triggering a click event instead of a keydown event which could explain why it fails for them.

Anyways, let's get rid of the double click which would probably fail on mobile devices and let's go with your suggestion above.

With .05 applied, when you click on a message title, it is previewed in the box below and the "Open full conversation" link in this box is focused.

If you click on an already previewed message title link, it opens it directly.

[imath]

I've updated 7731.05.patch and tested it on Chrome + VoiceOver, and it works as expected. On Firefox or Safari + Voice over it doesn't. I don't have Windows so i cannot test the other screen reader softwares. But i'm afraid we'll never managed to get it working the way it should.. Is .05 better than all the others @mercime ?

[mercime]

@imath Yes, 7731.05.patch is better than all the others 👍 Surprised that it didn't work with Safari & Voiceover.

Tested with NVDA/Firefox, Narrator/Edge-IE 11, Chromevox/Chrome.

• Press Enter on first message title in the list: opens up the new page to the full conversation
• After pressing Enter on the second or succeeding message titles,the next thing I hear is "View full conversation and reply link". I press Enter and it opens up the new page to the full conversation.

[imath]

Awesome! Thanks a lot for your feedback! Let’s have it in 🙌

[imath]

In 12073:

BP Nouveau - Messages UI: Improve a11y in message boxes.

Message boxes are listing messages (inbox, starbox, sentbox). Using screen reader softwares or the keyboard, it is now a better experience to navigate in these lists. Pressing the Tab key makes you navigate from the Message Checkbox, to the sender/recipients link and finally to the Message title. Once on a Message title, pressing the enter key activates the message and updates the preview box. Pressing on the enter key another time opens the full conversation.

Huge Props mercime

Fixes #7731

[hnla]

@imath certainly looks ok, nice job, a lot to check though so only given a cursory run through.