Changeset 12073 for trunk/src/bp-templates/bp-nouveau/buddypress/common/js-templates/messages/index.php

Timestamp:

05/10/2018 06:23:58 AM (8 years ago)

Author:

imath

Message:

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

File:

• trunk/src/bp-templates/bp-nouveau/buddypress/common/js-templates/messages/index.php (modified) (1 diff)

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

@@ -123 +123 @@
     <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>
-    </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>
-        </a>
-    </div>
+        <label for="bp-message-thread-{{data.id}}" class="bp-screen-reader-text"><?php esc_html_e( 'Select message:', 'buddypress' ); ?> {{data.subject}}</label>
+    </div>
+
+    <# if ( ! data.recipientsCount ) { #>
+        <div class="thread-from">
+            <a class="user-link" href="{{data.sender_link}}">
+                <img class="avatar" src="{{data.sender_avatar}}" alt="" />
+                <span class="bp-screen-reader-text"><?php esc_html_e( 'From:', 'buddypress' ); ?></span>
+                <span class="user-name">{{data.sender_name}}</span>
+            </a>
+        </div>
+    <# } else {
+        var recipient = _.first( data.recipients );
+        #>
+        <div class="thread-to">
+            <a class="user-link" href="{{recipient.user_link}}">
+                <img class="avatar" src="{{recipient.avatar}}" alt="" />
+                <span class="bp-screen-reader-text"><?php esc_html_e( 'To:', 'buddypress' ); ?></span>
+                <span class="user-name">{{recipient.user_name}}</span>
+            </a>
+
+            <# if ( data.toOthers ) { #>
+                <span class="num-recipients">{{data.toOthers}}</span>
+            <# } #>
+        </div>
+    <# } #>
+
     <div class="thread-content" data-thread-id="{{data.id}}">
         <div class="thread-subject">
             <span class="thread-count">({{data.count}})</span>
-            <span class="subject"><# print( data.subject ); #></span>
-        </div>
-        <p class="excerpt"><# print( data.excerpt ); #></p>
+            <a class="subject" href="#view/{{data.id}}">{{data.subject}}</a>
+        </div>
+        <p class="excerpt">{{data.excerpt}}</p>
     </div>
     <div class="thread-date">