[buddypress-trac] [BuddyPress Trac] #7714: BP-Nouveau: Keyboard focus lost in air with Messages bulk actions UI

[buddypress-trac]

#7714: BP-Nouveau: Keyboard focus lost in air with Messages bulk actions UI
--------------------------+-----------------------------
 Reporter:  mercime       |      Owner:
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Templates     |    Version:
 Severity:  normal        |   Keywords:
--------------------------+-----------------------------
 The current bulk actions UI hides the options for the bulk actions off-
 screen using .bp-hide class which causes keyboard focus to jump to the top
 ala #7711 after tabbing through the checkbox:

 {{{
 .bp-hide {
         height: 0;
         left: -999em;
         overflow: hidden;
         position: absolute;
         top: -999em;
 }
 }}}


 We could restructure the new Messages bulk actions UI to be similar in
 functionality to Gmail's custom components which are accessible for visual
 users, screen readers users, and keyboard users.
 - Instead of using `<input type="checkbox" ...>` we could use the "div for
 interactive elements that do something" - the semantic `<button>` element.
 - Add `aria-haspopup="true" aria-expanded="false" bp-tooltip="Select
 messages bulk action" aria-label="Select messages bulk action"` or better
 yet, remove the `aria-label` and `bp-tooltip` and show text in button
 instead. Use JavaScript to change state to `aria-expanded="true"` when
 clicked on
 - For the options available, use `div` with `role="menu" aria-
 haspopup="true"` to wrap all options, each option is wrapped with  `role
 ="menu-item"` and use JS to indicate which is selected.

--
Ticket URL: <https://buddypress.trac.wordpress.org/ticket/7714>
BuddyPress Trac <http://buddypress.org/>
BuddyPress Trac