Changeset 12032

Timestamp:

05/01/2018 07:31:11 PM (8 years ago)

Author:

imath

Message:

BP Nouveau: improve markup and a11y of the Group invites UI

• Only write pagination markup if there is more than one page of results.
• Add BP Tooltips and use semantic links instead of buttons.
• Use a div container for the pagination instead of an orphan li.

Props mercime

Fixes #7752

Location:

trunk/src/bp-templates/bp-nouveau

Files:

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

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

@@ -104 +104 @@
                                 </button>
                         </form>
-                        </div>
+                </div>
         </div>
 </script>
@@ -110 +110 @@
 <script type="text/html" id="tmpl-bp-invites-paginate">
         <# if ( 1 !== data.page ) { #>
-                <button type="button" id="bp-invites-prev-page" class="button invite-button">
-                        <span class="bp-screen-reader-text"><?php esc_html_e( 'Previous', 'buddypress' ); ?></span>
-                </button>
+                <a href="#previous-page" id="bp-invites-prev-page" class="button invite-button bp-tooltip" data-bp-tooltip="<?php esc_attr_e( 'Previous page', 'buddypress' ); ?>">
+                        <span class="dashicons dashicons-arrow-left" aria-hidden="true"></span>
+                        <span class="bp-screen-reader-text"><?php esc_html_e( 'Previous page', 'buddypress' ); ?></span>
+                </a>
         <# } #>
 
         <# if ( data.total_page !== data.page ) { #>
-                <button type="button" id="bp-invites-next-page" class="button invite-button">
-                        <span class="bp-screen-reader-text"><?php esc_html_e( 'Next', 'buddypress' ); ?></span>
+                <a href="#next-page" id="bp-invites-next-page" class="button invite-button bp-tooltip" data-bp-tooltip="<?php esc_attr_e( 'Next page', 'buddypress' ); ?>">
+                        <span class="bp-screen-reader-text"><?php esc_html_e( 'Next page', 'buddypress' ); ?></span>
+                        <span class="dashicons dashicons-arrow-right" aria-hidden="true"></span>
                 </button>
         <# } #>

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

@@ -480 +480 @@
 
         bp.Views.Pagination = bp.Nouveau.GroupInvites.View.extend( {
-                tagName   : 'li',
+                tagName   : 'div',
                 className : 'last',
                 template  :  bp.template( 'bp-invites-paginate' )
@@ -505 +505 @@
                                 view.remove();
                         } );
+
+                        if ( 1 === collection.options.total_page ) {
+                                return;
+                        }
 
                         this.views.add( new bp.Views.Pagination( { model: new Backbone.Model( collection.options ) } ) );