Skip to:
Content

BuddyPress.org

Changeset 12032


Ignore:
Timestamp:
05/01/2018 07:31:11 PM (18 months 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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/bp-templates/bp-nouveau/buddypress/common/js-templates/invites/index.php

    r11899 r12032  
    104104                </button>
    105105            </form>
    106             </div>
     106        </div>
    107107    </div>
    108108</script>
     
    110110<script type="text/html" id="tmpl-bp-invites-paginate">
    111111    <# if ( 1 !== data.page ) { #>
    112         <button type="button" id="bp-invites-prev-page" class="button invite-button">
    113             <span class="bp-screen-reader-text"><?php esc_html_e( 'Previous', 'buddypress' ); ?></span>
    114         </button>
     112        <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' ); ?>">
     113            <span class="dashicons dashicons-arrow-left" aria-hidden="true"></span>
     114            <span class="bp-screen-reader-text"><?php esc_html_e( 'Previous page', 'buddypress' ); ?></span>
     115        </a>
    115116    <# } #>
    116117
    117118    <# if ( data.total_page !== data.page ) { #>
    118         <button type="button" id="bp-invites-next-page" class="button invite-button">
    119             <span class="bp-screen-reader-text"><?php esc_html_e( 'Next', 'buddypress' ); ?></span>
     119        <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' ); ?>">
     120            <span class="bp-screen-reader-text"><?php esc_html_e( 'Next page', 'buddypress' ); ?></span>
     121            <span class="dashicons dashicons-arrow-right" aria-hidden="true"></span>
    120122        </button>
    121123    <# } #>
  • trunk/src/bp-templates/bp-nouveau/js/buddypress-group-invites.js

    r12025 r12032  
    480480
    481481    bp.Views.Pagination = bp.Nouveau.GroupInvites.View.extend( {
    482         tagName   : 'li',
     482        tagName   : 'div',
    483483        className : 'last',
    484484        template  :  bp.template( 'bp-invites-paginate' )
     
    505505                view.remove();
    506506            } );
     507
     508            if ( 1 === collection.options.total_page ) {
     509                return;
     510            }
    507511
    508512            this.views.add( new bp.Views.Pagination( { model: new Backbone.Model( collection.options ) } ) );
Note: See TracChangeset for help on using the changeset viewer.