Changeset 12057

Timestamp:

05/05/2018 04:59:09 AM (6 years ago)

Author:

mercime

Message:

Nouveau: Fix the status of a group invitation for screen reader text and tooltip.

Improve Backbone Invites template to make sure that the text for screen readers
& tooltips shows the current state of group invitation for site members.

Props imath.
Fixes #7712.

Location:

trunk/src/bp-templates/bp-nouveau

Files:

• buddypress/common/js-templates/invites/index.php (modified) (1 diff)
• js/buddypress-group-invites.js (modified) (2 diffs)

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

@@ -66 +66 @@
     <div class="action">
         <# if ( undefined === data.is_sent || ( false === data.is_sent && true === data.can_edit ) ) { #>
-            <button type="button" class="button invite-button group-add-remove-invite-button bp-tooltip bp-icons" data-bp-tooltip="<?php esc_attr_e( 'Invite / Uninvite', 'buddypress' ); ?>">
+            <button type="button" class="button invite-button group-add-remove-invite-button bp-tooltip bp-icons<# if ( data.selected ) { #> selected<# } #>" data-bp-tooltip="<# if ( data.selected ) { #><?php esc_attr_e( 'Disinvite', 'buddypress' ); ?><# } else { #><?php esc_attr_e( 'Invite', 'buddypress' ); ?><# } #>">
                 <span class="icons" aria-hidden="true"></span>
-                <span class="bp-screen-reader-text"><?php esc_html_e( 'Invite/Uninvite', 'buddypress' ); ?></span>
+                <span class="bp-screen-reader-text">
+                    <# if ( data.selected ) { #>
+                        <?php esc_html_e( 'Disinvite', 'buddypress' ); ?>
+                    <# } else { #>
+                        <?php esc_html_e( 'Invite', 'buddypress' ); ?>
+                    <# } #>
+                </span>
             </button>
         <# } #>
 
         <# if ( undefined !== data.can_edit && true === data.can_edit ) { #>
-            <button type="button" class="button invite-button group-remove-invite-button bp-tooltip bp-icons" data-bp-tooltip="<?php esc_attr_e( 'Remove', 'buddypress' ); ?>">
+            <button type="button" class="button invite-button group-remove-invite-button bp-tooltip bp-icons" data-bp-tooltip="<?php esc_attr_e( 'Disinvite', 'buddypress' ); ?>">
                 <span class=" icons" aria-hidden="true"></span>
-                <span class="bp-screen-reader-text"><?php esc_html_e( 'Remove', 'buddypress' ); ?></span>
+                <span class="bp-screen-reader-text"><?php esc_html_e( 'Disinvite', 'buddypress' ); ?></span>
             </button>
         <# } #>

trunk/src/bp-templates/bp-nouveau/js/buddypress-group-invites.js

@@ -622 +622 @@
 
             if ( invite ) {
+                this.model.set( 'selected', true, { silent: true } );
+            }
+        },
+
+        render: function() {
+            if ( this.model.get( 'selected' ) ) {
                 this.el.className = 'selected';
-                this.model.set( 'selected', true, { silent: true } );
-            }
+            } else {
+                this.el.className = '';
+            }
+
+            bp.Nouveau.GroupInvites.View.prototype.render.apply( this, arguments );
         },
 
@@ -634 +643 @@
             if ( false === selected ) {
                 this.model.set( 'selected', true );
-
-                // Set the selected class
-                $( this.el ).addClass( 'selected' );
             } else {
                 this.model.set( 'selected', false );
 
-                // Set the selected class
-                $( this.el ).removeClass( 'selected' );
-
                 if ( ! bp.Nouveau.GroupInvites.invites.length  ) {
                     bp.Nouveau.GroupInvites.invites.reset();
                 }
             }
+
+            // Rerender to update buttons.
+            this.render();
         },