Skip to:
Content

BuddyPress.org

Changeset 12073


Ignore:
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

Location:
trunk/src/bp-templates/bp-nouveau
Files:
6 edited

Legend:

Unmodified
Added
Removed

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

    r12067 r12073  
    123123    <div class="thread-cb">
    124124        <input class="message-check" type="checkbox" name="message_ids[]" id="bp-message-thread-{{data.id}}" value="{{data.id}}">
    125         <label for="bp-message-thread-{{data.id}}" class="bp-screen-reader-text"><?php esc_html_e( 'Select this message', 'buddypress' ); ?></label>
    126     </div>
    127     <div class="thread-from">
    128         <a class="user-link" href="{{data.sender_link}}">
    129             <img class="avatar" src="{{data.sender_avatar}}" alt="" />
    130             <span class="user-name">{{data.sender_name}}</span>
    131         </a>
    132     </div>
     125        <label for="bp-message-thread-{{data.id}}" class="bp-screen-reader-text"><?php esc_html_e( 'Select message:', 'buddypress' ); ?> {{data.subject}}</label>
     126    </div>
     127
     128    <# if ( ! data.recipientsCount ) { #>
     129        <div class="thread-from">
     130            <a class="user-link" href="{{data.sender_link}}">
     131                <img class="avatar" src="{{data.sender_avatar}}" alt="" />
     132                <span class="bp-screen-reader-text"><?php esc_html_e( 'From:', 'buddypress' ); ?></span>
     133                <span class="user-name">{{data.sender_name}}</span>
     134            </a>
     135        </div>
     136    <# } else {
     137        var recipient = _.first( data.recipients );
     138        #>
     139        <div class="thread-to">
     140            <a class="user-link" href="{{recipient.user_link}}">
     141                <img class="avatar" src="{{recipient.avatar}}" alt="" />
     142                <span class="bp-screen-reader-text"><?php esc_html_e( 'To:', 'buddypress' ); ?></span>
     143                <span class="user-name">{{recipient.user_name}}</span>
     144            </a>
     145
     146            <# if ( data.toOthers ) { #>
     147                <span class="num-recipients">{{data.toOthers}}</span>
     148            <# } #>
     149        </div>
     150    <# } #>
     151
    133152    <div class="thread-content" data-thread-id="{{data.id}}">
    134153        <div class="thread-subject">
    135154            <span class="thread-count">({{data.count}})</span>
    136             <span class="subject"><# print( data.subject ); #></span>
    137         </div>
    138         <p class="excerpt"><# print( data.excerpt ); #></p>
     155            <a class="subject" href="#view/{{data.id}}">{{data.subject}}</a>
     156        </div>
     157        <p class="excerpt">{{data.excerpt}}</p>
    139158    </div>
    140159    <div class="thread-date">

  • trunk/src/bp-templates/bp-nouveau/css/buddypress-rtl.css

    r12069 r12073  
    29642964}
    29652965
    2966 #message-threads li .thread-from {
     2966#message-threads li .thread-from,
     2967#message-threads li .thread-to {
    29672968    -webkit-flex: 1 2 20%;
    29682969    -moz-flex: 1 2 20%;
    … …  
    29722973}
    29732974
    2974 #message-threads li .thread-from img.avatar {
     2975#message-threads li .thread-from img.avatar,
     2976#message-threads li .thread-to img.avatar {
    29752977    float: right;
    29762978    margin: 0 0 0 10px;
    29772979}
    29782980
    2979 #message-threads li .thread-from .user-name {
     2981#message-threads li .thread-from .user-name,
     2982#message-threads li .thread-to .user-name {
    29802983    display: inline-block;
    29812984    line-height: 1.1;
     2985}
     2986
     2987#message-threads li .thread-from .num-recipients,
     2988#message-threads li .thread-to .num-recipients {
     2989    color: #737373;
     2990    font-weight: 400;
     2991    font-size: 12px;
     2992    margin: 0;
    29822993}
    29832994
    … …  
    30063017}
    30073018
    3008 #message-threads li .thread-content {
    3009     cursor: pointer;
     3019#message-threads li.unread {
     3020    font-weight: 700;
    30103021}
    30113022
    … …  
    30173028
    30183029#message-threads li .thread-content .thread-from,
     3030#message-threads li .thread-content .thread-to,
    30193031#message-threads li .thread-content .thread-subject {
    30203032    font-size: 13px;
    … …  
    30233035@media screen and (min-width: 46.8em) {
    30243036    #message-threads li .thread-content .thread-from,
     3037    #message-threads li .thread-content .thread-to,
    30253038    #message-threads li .thread-content .thread-subject {
    30263039        font-size: 16px;

  • trunk/src/bp-templates/bp-nouveau/css/buddypress.css

    r12069 r12073  
    29642964}
    29652965
    2966 #message-threads li .thread-from {
     2966#message-threads li .thread-from,
     2967#message-threads li .thread-to {
    29672968    -webkit-flex: 1 2 20%;
    29682969    -moz-flex: 1 2 20%;
    … …  
    29722973}
    29732974
    2974 #message-threads li .thread-from img.avatar {
     2975#message-threads li .thread-from img.avatar,
     2976#message-threads li .thread-to img.avatar {
    29752977    float: left;
    29762978    margin: 0 10px 0 0;
    29772979}
    29782980
    2979 #message-threads li .thread-from .user-name {
     2981#message-threads li .thread-from .user-name,
     2982#message-threads li .thread-to .user-name {
    29802983    display: inline-block;
    29812984    line-height: 1.1;
     2985}
     2986
     2987#message-threads li .thread-from .num-recipients,
     2988#message-threads li .thread-to .num-recipients {
     2989    color: #737373;
     2990    font-weight: 400;
     2991    font-size: 12px;
     2992    margin: 0;
    29822993}
    29832994
    … …  
    30063017}
    30073018
    3008 #message-threads li .thread-content {
    3009     cursor: pointer;
     3019#message-threads li.unread {
     3020    font-weight: 700;
    30103021}
    30113022
    … …  
    30173028
    30183029#message-threads li .thread-content .thread-from,
     3030#message-threads li .thread-content .thread-to,
    30193031#message-threads li .thread-content .thread-subject {
    30203032    font-size: 13px;
    … …  
    30233035@media screen and (min-width: 46.8em) {
    30243036    #message-threads li .thread-content .thread-from,
     3037    #message-threads li .thread-content .thread-to,
    30253038    #message-threads li .thread-content .thread-subject {
    30263039        font-size: 16px;

  • trunk/src/bp-templates/bp-nouveau/includes/messages/functions.php

    r12071 r12073  
    108108        ),
    109109        'bulk_actions'  => bp_nouveau_messages_get_bulk_actions(),
     110        'howto'         => __( 'Click on the message title to preview it in the Active conversation box below.', 'buddypress' ),
     111        'howtoBulk'     => __( 'Use the select box to define your bulk action and click on the &#10003; button to apply.', 'buddypress' ),
     112        'toOthers'      => array(
     113            'one'  => __( '(and 1 other)', 'buddypress' ),
     114            'more' => __( '(and %d others)', 'buddypress' ),
     115        ),
    110116    );
    111117

  • trunk/src/bp-templates/bp-nouveau/js/buddypress-messages.js

    r12071 r12073  
    635635
    636636        events: {
    637             'click .thread-content'       : 'changePreview',
    638             'dblclick .thread-content'    : 'loadSingleView'
     637            'click .subject' : 'changePreview'
    639638        },
    640639
    … …  
    667666        threadsFetched: function() {
    668667            bp.Nouveau.Messages.removeFeedback();
     668
     669            // Inform the user about how to use the UI.
     670            bp.Nouveau.Messages.displayFeedback( BP_Nouveau.messages.howto, 'info' );
    669671        },
    670672
    … …  
    689691        },
    690692
    691         changePreview: function( event ) {
    692             var target = $( event.currentTarget );
    693 
    694             if ( ! target.hasClass( 'thread-content' ) || $( event.target ).hasClass( 'user-link' ) ) {
    695                 return event;
    696             }
    697 
    698             event.preventDefault();
    699 
    700             if ( target.parent( 'li' ).hasClass( 'selected' ) ) {
     693        setActiveThread: function( active ) {
     694            if ( ! active ) {
    701695                return;
    702696            }
    703697
    704             var selected = target.data( 'thread-id' );
    705 
    706698            _.each( this.collection.models, function( thread ) {
    707                 if ( thread.id === selected ) {
     699                if ( thread.id === active ) {
    708700                    thread.set( 'active', true );
    709701                } else {
    … …  
    713705        },
    714706
     707        changePreview: function( event ) {
     708            var target = $( event.currentTarget );
     709
     710            event.preventDefault();
     711            bp.Nouveau.Messages.removeFeedback();
     712
     713            // If the click is done on an active conversation, open it.
     714            if ( $( event.currentTarget ).closest( '.thread-item' ).hasClass( 'selected' ) ) {
     715                this.loadSingleView( event );
     716
     717            // Otherwise activate the conversation and display its preview.
     718            } else {
     719                this.setActiveThread( target.closest( '.thread-content' ).data( 'thread-id' ) );
     720
     721                $( '.message-action-view' ).focus();
     722            }
     723        },
     724
    715725        loadSingleView: function( event ) {
    716             var target = $( event.currentTarget );
    717 
    718             if ( ! target.hasClass( 'thread-content' ) || $( event.target ).hasClass( 'user-link' ) ) {
    719                 return event;
    720             }
    721 
    722726            event.preventDefault();
    723727
    724             var id = target.data( 'thread-id' );
    725 
    726             bp.Nouveau.Messages.router.navigate( 'view/' + id, { trigger: true } );
     728            bp.Nouveau.Messages.router.navigate(
     729                'view/' + $( event.currentTarget ).closest( '.thread-content' ).data( 'thread-id' ),
     730                { trigger: true }
     731            );
    727732        }
    728733    } );
    … …  
    744749            if ( this.model.get( 'unread' ) ) {
    745750                this.el.className += ' unread';
     751            }
     752
     753            if ( 'sentbox' === bp.Nouveau.Messages.box ) {
     754                var recipientsCount = this.model.get( 'recipients' ).length, toOthers = '';
     755
     756                if ( 2 === recipientsCount ) {
     757                    toOthers = BP_Nouveau.messages.toOthers.one;
     758                } else if ( 2 < recipientsCount ) {
     759                    toOthers = BP_Nouveau.messages.toOthers.more.replace( '%d', Number( recipientsCount - 1 ) );
     760                }
     761
     762                this.model.set( {
     763                    recipientsCount: recipientsCount,
     764                    toOthers: toOthers
     765                }, { silent: true } );
     766            } else if ( this.model.get( 'recipientsCount' )  ) {
     767                this.model.unset( 'recipientsCount', { silent: true } );
    746768            }
    747769
    … …  
    790812            if ( hasChecked ) {
    791813                $( '#user-messages-bulk-actions' ).closest( '.bulk-actions-wrap' ).removeClass( 'bp-hide' );
     814
     815                // Inform the user about how to use the bulk actions.
     816                bp.Nouveau.Messages.displayFeedback( BP_Nouveau.messages.howtoBulk, 'info' );
    792817            } else {
    793818                $( '#user-messages-bulk-actions' ).closest( '.bulk-actions-wrap' ).addClass( 'bp-hide' );
     819
     820                bp.Nouveau.Messages.removeFeedback();
    794821            }
    795822        },
    … …  
    932959            if ( isChecked ) {
    933960                $( this.el ).find( '.bulk-actions-wrap' ).removeClass( 'bp-hide' ).addClass( 'bp-show' );
     961
     962                // Inform the user about how to use the bulk actions.
     963                bp.Nouveau.Messages.displayFeedback( BP_Nouveau.messages.howtoBulk, 'info' );
    934964            } else {
    935965                $( this.el ).find( '.bulk-actions-wrap' ).addClass( 'bp-hide' );
     966
     967                bp.Nouveau.Messages.removeFeedback();
    936968            }
    937969

  • trunk/src/bp-templates/bp-nouveau/sass/_nouveau_messages.scss

    r12067 r12073  
    9797        }
    9898
    99         .thread-from {
     99        .thread-from,
     100        .thread-to {
    100101
    101102            @include box-item-size(1, 2, 20%);
    … …  
    110111                line-height: 1.1;
    111112            }
     113
     114            .num-recipients {
     115                color: $meta-text;
     116                font-weight: 400;
     117
     118                @include font-size(12);
     119                margin: 0;
     120            }
    112121        }
    113122
    … …  
    134143        }
    135144
     145        // the unread parent li
     146        &.unread {
     147            font-weight: 700;
     148        }
     149
    136150        .thread-content {
    137             cursor: pointer;
    138151
    139152            .excerpt {
    … …  
    145158
    146159            .thread-from,
     160            .thread-to,
    147161            .thread-subject {
    148162
Note: See TracChangeset for help on using the changeset viewer.