[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 2nd-opinion  |
-----------------------------------+---------------------

Comment (by 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 check
 - 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.

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