Changeset 11951

Timestamp:

04/05/2018 12:16:07 AM (7 years ago)

Author:

mercime

Message:

BP Nouveau: Improve HTML Markup of Messages bulk actions.

-Remove nesting of input controls within the label tags for a cleaner markup.
-Move the list element containing the checkbox and bulk actions closer to the
message list especially for mobile view.
-Reveal the label tag for the checkbox so that sighted users may see what the checkbox is for.
Style and JS support for this change have already been committed in r11916 and
r11920.

Fixes #7714.

File:

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

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

@@ -73 +73 @@
 
 <script type="text/html" id="tmpl-bp-messages-filters">
-    <li class="user-messages-bulk-actions"></li>
     <li class="user-messages-search" role="search" data-bp-search="{{data.box}}">
         <div class="bp-search messages-search">
@@ -88 +87 @@
         </div>
     </li>
+    <li class="user-messages-bulk-actions"></li>
 </script>
 
 <script type="text/html" id="tmpl-bp-bulk-actions">
-    <label for="user_messages_select_all">
-        <input type="checkbox" id="user_messages_select_all" value="1"/>
-        <span class="bp-screen-reader-text"><?php esc_html_e( 'Select All Messages', 'buddypress' ); ?></span>
-    </label>
-<div class="bulk-actions-wrap bp-hide">
+    <input type="checkbox" id="user_messages_select_all" value="1"/>
+    <label for="user_messages_select_all"><?php esc_html_e( 'All Messages', 'buddypress' ); ?></label>
+    <div class="bulk-actions-wrap bp-hide">
         <div class="bulk-actions select-wrap">
             <label for="user-messages-bulk-actions" class="bp-screen-reader-text">
@@ -107 +105 @@
             <span class="select-arrow" aria-hidden="true"></span>
         </div>
-        <button class="messages-button bulk-apply" type="submit">
+        <button class="messages-button bulk-apply bp-tooltip" type="submit" data-bp-tooltip="<?php echo esc_attr( 'Apply', 'buddypress' ); ?>">
             <span class="dashicons dashicons-yes" aria-hidden="true"></span>
             <span class="bp-screen-reader-text"><?php esc_html_e( 'Apply', 'buddypress' ); ?></span>
@@ -116 +114 @@
 <script type="text/html" id="tmpl-bp-messages-thread">
     <div class="thread-cb">
-        <label for="bp-message-thread-{{data.id}}">
-            <input class="message-check" type="checkbox" name="message_ids[]" id="bp-message-thread-{{data.id}}" value="{{data.id}}">
-            <span class="bp-screen-reader-text"><?php esc_html_e( 'Select this message', 'buddypress' ); ?></span>
-        </label>
+        <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">