Ticket #7731: 7731.03.patch

src/bp-templates/bp-nouveau/buddypress/common/js-templates/messages/index.php

@@ -122 +122 @@
 <script type="text/html" id="tmpl-bp-messages-thread">
         <div class="thread-cb">
                 <input class="message-check" type="checkbox" name="message_ids[]" id="bp-message-thread-{{data.id}}" value="{{data.id}}">
-                <label for="bp-message-thread-{{data.id}}" class="bp-screen-reader-text"><?php esc_html_e( 'Select this message', 'buddypress' ); ?></label>
+                <label for="bp-message-thread-{{data.id}}" class="bp-screen-reader-text"><?php esc_html_e( 'Select message:', 'buddypress' ); ?> {{data.subject}}</label>
         </div>
         <div class="thread-from">
                 <a class="user-link" href="{{data.sender_link}}">
                         <img class="avatar" src="{{data.sender_avatar}}" alt="" />
                         <span class="user-name">{{data.sender_name}}</span>
+                        <span class="bp-screen-reader-text"><?php esc_html_e( 'From:', 'buddypress' ); ?> {{data.sender_name}}</span>
                 </a>
         </div>
         <div class="thread-content" data-thread-id="{{data.id}}">
-                <div class="thread-subject">
+                <div class="thread-subject" tabindex="0">
                         <span class="thread-count">({{data.count}})</span>
-                        <span class="subject"><# print( data.subject ); #></span>
+                        <span class="subject">{{data.subject}}</span>
+                        <span class="bp-screen-reader-text">{{data.subject}}. <?php esc_html_e( 'Press <kbd>Enter</kbd> to view the full conversation.', 'buddypress' ); ?></span>
                 </div>
-                <p class="excerpt"><# print( data.excerpt ); #></p>
+                <p class="excerpt">{{data.excerpt}}</p>
         </div>
         <div class="thread-date">
                 <time datetime="{{data.date.toISOString()}}">{{data.display_date}}</time>

src/bp-templates/bp-nouveau/css/buddypress-rtl.css

@@ -2989 +2989 @@
         line-height: 1.1;
 }
 
+#message-threads li .thread-subject:focus {
+        border: 1px dotted #333;
+}
+
 #message-threads li .thread-content {
         -webkit-flex: 1 2 60%;
         -moz-flex: 1 2 60%;
@@ -3009 +3013 @@
         background-color: #fafafa;
 }
 
+#message-threads li.unread {
+        font-weight: 700;
+}
+
 #message-threads li.selected .thread-subject .subject {
         color: #5087e5;
 }

src/bp-templates/bp-nouveau/css/buddypress.css

@@ -2989 +2989 @@
         line-height: 1.1;
 }
 
+#message-threads li .thread-subject:focus {
+        border: 1px dotted #333;
+}
+
 #message-threads li .thread-content {
         -webkit-flex: 1 2 60%;
         -moz-flex: 1 2 60%;
@@ -3009 +3013 @@
         background-color: #fafafa;
 }
 
+#message-threads li.unread {
+        font-weight: 700;
+}
+
 #message-threads li.selected .thread-subject .subject {
         color: #5087e5;
 }

src/bp-templates/bp-nouveau/includes/messages/functions.php

@@ -98 +98 @@
                 'nonces' => array(
                         'send' => wp_create_nonce( 'messages_send_message' ),
                 ),
-                'loading' => __( 'Loading messages. Please wait.', 'buddypress' ),
+                'loading'      => __( 'Loading messages. Please wait.', 'buddypress' ),
                 'bulk_actions' => bp_nouveau_messages_get_bulk_actions(),
+                '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' ),
+                'howtoBulk'    => __( 'Use the select box to define your bulk action and click on the ✓ button to apply.', 'buddypress' ),
         );
 
         // Star private messages.

src/bp-templates/bp-nouveau/js/buddypress-messages.js

@@ -634 +634 @@
                 tagName   : 'div',
 
                 events: {
-                        'click .thread-content'       : 'changePreview',
-                        'dblclick .thread-content'    : 'loadSingleView'
+                        'click .thread-content'    : 'changePreview',
+                        'dblclick .thread-content' : 'loadSingleView',
+                        'focus .thread-item'       : 'focusIn',
+                        'keydown .thread-subject'  : 'keyDown'
                 },
 
                 initialize: function() {
@@ -666 +668 @@
 
                 threadsFetched: function() {
                         bp.Nouveau.Messages.removeFeedback();
+
+                        // Inform the user about how to use the UI.
+                        bp.Nouveau.Messages.displayFeedback( BP_Nouveau.messages.howto, 'info' );
                 },
 
                 threadsFetchError: function( collection, response ) {
@@ -688 +693 @@
                         this.views.add( '#message-threads', new bp.Views.userThread( { model: thread } ) );
                 },
 
+                getActiveThread: function() {
+                        var activeThread = this.collection.findWhere( { active: true } );
+
+                        if ( ! activeThread.get( 'id' ) ) {
+                                return false;
+                        }
+
+                        return activeThread;
+                },
+
+                setActiveThread: function( active ) {
+                        if ( ! active ) {
+                                return;
+                        }
+
+                        _.each( this.collection.models, function( thread ) {
+                                if ( thread.id === active ) {
+                                        thread.set( 'active', true );
+                                } else {
+                                         thread.unset( 'active' );
+                                }
+                        }, this );
+                },
+
                 changePreview: function( event ) {
                         var target = $( event.currentTarget );
 
@@ -696 +725 @@
                         }
 
                         event.preventDefault();
+                        bp.Nouveau.Messages.removeFeedback();
 
                         if ( target.parent( 'li' ).hasClass( 'selected' ) ) {
                                 return;
                         }
 
-                        var selected = target.data( 'thread-id' );
-
-                        _.each( this.collection.models, function( thread ) {
-                                if ( thread.id === selected ) {
-                                        thread.set( 'active', true );
-                                } else {
-                                        thread.unset( 'active' );
-                                }
-                        }, this );
+                        this.setActiveThread( target.data( 'thread-id' ) );
                 },
 
                 loadSingleView: function( event ) {
@@ -724 +746 @@
                         var id = target.data( 'thread-id' );
 
                         bp.Nouveau.Messages.router.navigate( 'view/' + id, { trigger: true } );
+                },
+
+                focusIn: function( event ) {
+                        if ( ! $( event.currentTarget ).hasClass( 'thread-item' ) || $( event.currentTarget ).hasClass( 'selected' ) ) {
+                                return;
+                        }
+
+                        var threadId = $( event.currentTarget ).find( '.thread-content' ).first().data( 'thread-id' );
+
+                        if ( threadId ) {
+                                bp.Nouveau.Messages.removeFeedback();
+                                this.setActiveThread( threadId );
+                        }
+                },
+
+                keyDown: function( event ) {
+                        if ( ! $( event.currentTarget ).hasClass( 'thread-subject' ) && ! $( event.currentTarget ).closest( '.thread-item' ).hasClass( 'selected' ) ) {
+                                return;
+                        }
+
+                        // Catch enter and space events
+                        if ( 'keydown' === event.type && 13 !== event.keyCode && 32 !== event.keyCode ) {
+                                return;
+                        }
+
+                        event.preventDefault();
+
+                        var thread = this.getActiveThread();
+
+                        if ( ! _.isNumber( thread.get( 'id' ) ) ) {
+                                return;
+                        }
+
+                        bp.Nouveau.Messages.router.navigate( 'view/' + thread.get( 'id' ), { trigger: true } );
                 }
         } );
 
@@ -732 +788 @@
                 template  : bp.template( 'bp-messages-thread' ),
                 className : 'thread-item',
 
+                attributes: {
+                        'tabIndex': 0
+                },
+
                 events: {
                         'click .message-check' : 'singleSelect'
                 },
@@ -789 +849 @@
 
                         if ( hasChecked ) {
                                 $( '#user-messages-bulk-actions' ).closest( '.bulk-actions-wrap' ).removeClass( 'bp-hide' );
+
+                                // Inform the user about how to use the bulk actions.
+                                bp.Nouveau.Messages.displayFeedback( BP_Nouveau.messages.howtoBulk, 'info' );
                         } else {
                                 $( '#user-messages-bulk-actions' ).closest( '.bulk-actions-wrap' ).addClass( 'bp-hide' );
+
+                                bp.Nouveau.Messages.removeFeedback();
                         }
                 },
 
@@ -920 +985 @@
 
                         if ( isChecked ) {
                                 $( this.el ).find( '.bulk-actions-wrap' ).removeClass( 'bp-hide' ).addClass( 'bp-show' );
+
+                                // Inform the user about how to use the bulk actions.
+                                bp.Nouveau.Messages.displayFeedback( BP_Nouveau.messages.howtoBulk, 'info' );
                         } else {
                                 $( this.el ).find( '.bulk-actions-wrap' ).addClass( 'bp-hide' );
+
+                                bp.Nouveau.Messages.removeFeedback();
                         }
 
                         _.each( this.collection.models, function( model ) {

src/bp-templates/bp-nouveau/sass/_nouveau_messages.scss

@@ -111 +111 @@
                         }
                 }
 
+                .thread-subject:focus {
+                        border: 1px dotted $black;
+                }
+
                 .thread-content {
 
                         @include box-item-size(1, 2, 60%);
@@ -133 +137 @@
                         }
                 }
 
+                // the unread parent li
+                &.unread {
+                        font-weight: 700;
+                }
+
                 .thread-content {
                         cursor: pointer;