[buddypress-trac] [BuddyPress Trac] #7731: BP Nouveau: Messages UI issues

[buddypress-trac]

#7731: BP Nouveau: Messages UI issues
--------------------------+---------------------
 Reporter:  mercime       |       Owner:  (none)
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  3.0
Component:  Templates     |     Version:
 Severity:  blocker       |  Resolution:
 Keywords:  has-patch     |
--------------------------+---------------------

Comment (by 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 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.
 - Accidentally pressed CTL+Enter and 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 and Firefox = 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 CTL+Enter like NVDA on Edge and Firefox = 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 "From"
 text 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&r=g&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 "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
 [https://webaim.org/projects/screenreadersurvey7/#primay Screen Reader
 User Survey #7] by Webaim.org. Top 4 screen readers per survey: Paid JAWS
 (best on IE, Windows), free NVDA (best on Firefox, Windows), free
 VoiceOver (best on Safari, MacOS), and 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".

-- 
Ticket URL: <https://buddypress.trac.wordpress.org/ticket/7731#comment:12>
BuddyPress Trac <http://buddypress.org/>
BuddyPress Trac