WordPress.org
Get WordPress

Make WordPress Core

Changeset 44924


Ignore:
Timestamp:
03/18/2019 03:21:17 PM (6 years ago)
Author:
afercia
Message:

Accessibility: Improve the Comments and Privacy count text.

  • standardizes the Comment count string to %s Comment in moderation', '%s Comments in moderation so it can be bulk-updated
  • adds the string as visually hidden text in the admin menu
  • introduces an updateInModerationText JS simple function, responsible to correctly update all the related text using the data from the AJAX response
  • adds a visually hidden text "1 Privacy Policy update" to the Privacy menu items count
  • adds/improves translators comments

Changes that apply to all the count bubbles (Updates, plugins, etc.)

  • makes the bubbles and their text slightly bigger
  • improves the active menu item bubble contrast by changing the background color to red (option 2 in the screenshot attached in a previous comment)

Props adamsoucie, afercia.
Fixes #33030.

Location:
trunk/src
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/js/_enqueues/admin/edit-comments.js

    r44759 r44924  
    88(function($) {
    99var getCount, updateCount, updateCountText, updatePending, updateApproved,
    10     updateHtmlTitle, updateDashboardText, adminTitle = document.title,
     10    updateHtmlTitle, updateDashboardText, updateInModerationText, adminTitle = document.title,
    1111    isDashboard = $('#dashboard_right_now').length,
    1212    titleDiv, titleRegEx;
    … …  
    8787    };
    8888
    89     updateDashboardText = function ( response ) {
     89    updateDashboardText = function( response ) {
    9090        if ( ! isDashboard || ! response || ! response.i18n_comments_text ) {
    9191            return;
    9292        }
    9393
    94         var rightNow = $( '#dashboard_right_now' );
    95 
    96         $( '.comment-count a', rightNow ).text( response.i18n_comments_text );
    97         $( '.comment-mod-count a', rightNow ).text( response.i18n_moderation_text )
    98             .parent()
    99             [ response.in_moderation > 0 ? 'removeClass' : 'addClass' ]( 'hidden' );
    100     };
    101 
    102     updateHtmlTitle = function ( diff ) {
     94        $( '.comment-count a', '#dashboard_right_now' ).text( response.i18n_comments_text );
     95    };
     96
     97    /**
     98     * Updates the "comments in moderation" text across the UI.
     99     *
     100     * @since 5.2.0
     101     *
     102     * @param {object} response Ajax response from the server.
     103     *
     104     * @return {void}
     105     */
     106    updateInModerationText = function( response ) {
     107        if ( ! response || ! response.i18n_moderation_text ) {
     108            return;
     109        }
     110
     111        // Update the "comment in moderation" text across the UI.
     112        $( '.comments-in-moderation-text' ).text( response.i18n_moderation_text );
     113        // Hide the "comment in moderation" text in the Dashboard "At a Glance" widget.
     114        if ( isDashboard && response.in_moderation ) {
     115            $( '.comment-mod-count', '#dashboard_right_now' )
     116                [ response.in_moderation > 0 ? 'removeClass' : 'addClass' ]( 'hidden' );
     117        }
     118    };
     119
     120    updateHtmlTitle = function( diff ) {
    103121        var newTitle, regExMatch, titleCount, commentFrag;
    104122
    … …  
    239257        if ( response ) {
    240258            updateDashboardText( response.supplemental );
     259            updateInModerationText( response.supplemental );
    241260            updatePending( diff, response.supplemental.postId );
    242261            updateApproved( -1 * diff, response.supplemental.postId );
    … …  
    319338            spamDiff, trashDiff, pendingDiff, approvedDiff,
    320339
    321             approved = commentRow.hasClass( 'approved' ),
     340            /*
     341             * As `wpList` toggles only the `unapproved` class, the approved comment
     342             * rows can have both the `approved` and `unapproved` classes.
     343             */
     344            approved = commentRow.hasClass( 'approved' ) && ! commentRow.hasClass( 'unapproved' ),
    322345            unapproved = commentRow.hasClass( 'unapproved' ),
    323346            spammed = commentRow.hasClass( 'spam' ),
    … …  
    326349
    327350        updateDashboardText( newTotal );
     351        updateInModerationText( newTotal );
    328352
    329353        // the order of these checks is important
    … …  
    509533
    510534        animated = $( ':animated', '#the-comment-list' );
    511         animatedCallback = function () {
     535        animatedCallback = function() {
    512536            if ( ! $( '#the-comment-list tr:visible' ).length ) {
    513537                theList.get(0).wpList.add( theExtraList.find( '.no-items' ).clone() );
    … …  
    604628
    605629        this.comments_listing = $('#comments-form > input[name="comment_status"]').val() || '';
    606 
    607         /* $(listTable).bind('beforeChangePage', function(){
    608             commentReply.close();
    609         }); */
    610630    },
    611631
    … …  
    844864
    845865        if ( r.supplemental.i18n_comments_text ) {
    846             if ( isDashboard ) {
    847                 updateDashboardText( r.supplemental );
    848             } else {
    849                 updateApproved( 1, r.supplemental.parent_post_id );
    850                 updateCountText( 'span.all-count', 1 );
    851             }
     866            updateDashboardText( r.supplemental );
     867            updateInModerationText( r.supplemental );
     868            updateApproved( 1, r.supplemental.parent_post_id );
     869            updateCountText( 'span.all-count', 1 );
    852870        }
    853871

  • trunk/src/wp-admin/css/admin-menu.css

    r44791 r44924  
    516516    display: inline-block;
    517517    vertical-align: top;
    518     margin: 1px 0 0 2px;
     518    box-sizing: border-box;
     519    margin: 1px 0 -1px 2px;
    519520    padding: 0 5px;
    520     min-width: 7px;
    521     height: 17px;
    522     border-radius: 11px;
     521    min-width: 18px;
     522    height: 18px;
     523    border-radius: 9px;
    523524    background-color: #ca4a1f;
    524525    color: #fff;
    525     font-size: 9px;
     526    font-size: 11px;
    526527    line-height: 17px;
    527528    text-align: center;
    … …  
    531532#adminmenu li.current a .awaiting-mod,
    532533#adminmenu li a.wp-has-current-submenu .update-plugins {
    533     background-color: #00b9eb;
     534    background-color: #ca4a1f;
    534535    color: #fff;
    535536}

  • trunk/src/wp-admin/includes/ajax-actions.php

    r44908 r44924  
    461461                    'i18n_moderation_text' => sprintf(
    462462                        /* translators: %s: number of comments in moderation */
    463                         _nx( '%s in moderation', '%s in moderation', $counts->moderated, 'comments' ),
     463                        _n( '%s Comment in moderation', '%s Comments in moderation', $counts->moderated ),
    464464                        number_format_i18n( $counts->moderated )
    465465                    ),
    … …  
    510510    $time    = time();
    511511    $comment = get_comment( $comment_id );
     512    $counts  = wp_count_comments();
    512513
    513514    $x = new WP_Ajax_Response(
    514515        array(
    515516            'what'         => 'comment',
    516             // Here for completeness - not used.
    517517            'id'           => $comment_id,
    518518            'supplemental' => array(
    519                 'status'           => $comment ? $comment->comment_approved : '',
    520                 'postId'           => $comment ? $comment->comment_post_ID : '',
     519                'status'               => $comment ? $comment->comment_approved : '',
     520                'postId'               => $comment ? $comment->comment_post_ID : '',
    521521                /* translators: %s: number of comments */
    522                 'total_items_i18n' => sprintf( _n( '%s item', '%s items', $total ), number_format_i18n( $total ) ),
    523                 'total_pages'      => ceil( $total / $per_page ),
    524                 'total_pages_i18n' => number_format_i18n( ceil( $total / $per_page ) ),
    525                 'total'            => $total,
    526                 'time'             => $time,
     522                'total_items_i18n'     => sprintf( _n( '%s item', '%s items', $total ), number_format_i18n( $total ) ),
     523                'total_pages'          => ceil( $total / $per_page ),
     524                'total_pages_i18n'     => number_format_i18n( ceil( $total / $per_page ) ),
     525                'total'                => $total,
     526                'time'                 => $time,
     527                'in_moderation'        => $counts->moderated,
     528                'i18n_moderation_text' => sprintf(
     529                    /* translators: %s: number of comments in moderation */
     530                    _n( '%s Comment in moderation', '%s Comments in moderation', $counts->moderated ),
     531                    number_format_i18n( $counts->moderated )
     532                ),
    527533            ),
    528534        )
    … …  
    12921298        ),
    12931299        'i18n_moderation_text' => sprintf(
    1294             /* translators: %s: number of comments moderated */
    1295             _nx( '%s in moderation', '%s in moderation', $counts->moderated, 'comments' ),
     1300            /* translators: %s: number of comments in moderation */
     1301            _n( '%s Comment in moderation', '%s Comments in moderation', $counts->moderated ),
    12961302            number_format_i18n( $counts->moderated )
    12971303        ),

  • trunk/src/wp-admin/includes/dashboard.php

    r44896 r44924  
    292292        $moderated_comments_count_i18n = number_format_i18n( $num_comm->moderated );
    293293        /* translators: %s: number of comments in moderation */
    294         $text = sprintf( _nx( '%s in moderation', '%s in moderation', $num_comm->moderated, 'comments' ), $moderated_comments_count_i18n );
    295         /* translators: %s: number of comments in moderation */
    296         $aria_label = sprintf( _nx( '%s comment in moderation', '%s comments in moderation', $num_comm->moderated, 'comments' ), $moderated_comments_count_i18n );
     294        $text = sprintf( _n( '%s Comment in moderation', '%s Comments in moderation', $num_comm->moderated ), $moderated_comments_count_i18n );
    297295        ?>
    298296        <li class="comment-mod-count
    … …  
    302300        }
    303301        ?>
    304         "><a href="edit-comments.php?comment_status=moderated" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php echo $text; ?></a></li>
     302        "><a href="edit-comments.php?comment_status=moderated" class="comments-in-moderation-text"><?php echo $text; ?></a></li>
    305303        <?php
    306304    }

  • trunk/src/wp-admin/menu.php

    r43223 r44924  
    4343        $cap = 'update_languages';
    4444    }
     45    /* translators: %s: number of pending updates */
    4546    $submenu['index.php'][10] = array( sprintf( __( 'Updates %s' ), "<span class='update-plugins count-{$update_data['counts']['total']}'><span class='update-count'>" . number_format_i18n( $update_data['counts']['total'] ) . '</span></span>' ), $cap, 'update-core.php' );
    4647    unset( $cap );
    … …  
    7576// Avoid the comment count query for users who cannot edit_posts.
    7677if ( current_user_can( 'edit_posts' ) ) {
    77     $awaiting_mod = wp_count_comments();
    78     $awaiting_mod = $awaiting_mod->moderated;
    79     $menu[25]     = array(
    80         sprintf( __( 'Comments %s' ), '<span class="awaiting-mod count-' . absint( $awaiting_mod ) . '"><span class="pending-count">' . number_format_i18n( $awaiting_mod ) . '</span></span>' ),
     78    $awaiting_mod      = wp_count_comments();
     79    $awaiting_mod      = $awaiting_mod->moderated;
     80    $awaiting_mod_i18n = number_format_i18n( $awaiting_mod );
     81    /* translators: %s: number of comments in moderation */
     82    $awaiting_mod_text = sprintf( _n( '%s Comment in moderation', '%s Comments in moderation', $awaiting_mod ), $awaiting_mod_i18n );
     83
     84    $menu[25] = array(
     85        /* translators: %s: number of comments in moderation */
     86        sprintf( __( 'Comments %s' ), '<span class="awaiting-mod count-' . absint( $awaiting_mod ) . '"><span class="pending-count" aria-hidden="true">' . $awaiting_mod_i18n . '</span><span class="comments-in-moderation-text screen-reader-text">' . $awaiting_mod_text . '</span></span>' ),
    8187        'edit_posts',
    8288        'edit-comments.php',
    … …  
    215221}
    216222
     223/* translators: %s: number of pending plugin updates */
    217224$menu[65] = array( sprintf( __( 'Plugins %s' ), $count ), 'activate_plugins', 'plugins.php', '', 'menu-top menu-icon-plugins', 'menu-plugins', 'dashicons-admin-plugins' );
    218225
    … …  
    265272
    266273$change_notice = '';
    267 if ( current_user_can( 'manage_privacy_options' ) && WP_Privacy_Policy_Content::text_change_check() ) {
    268     $change_notice = ' <span class="update-plugins 1"><span class="plugin-count">' . number_format_i18n( 1 ) . '</span></span>';
    269 }
    270 
    271 // translators: %s is the update notification bubble, if updates are available.
     274if ( current_user_can( 'manage_privacy_options' ) && ! WP_Privacy_Policy_Content::text_change_check() ) {
     275    $change_notice_number = number_format_i18n( 1 );
     276    /* translators: %s: number of Privacy Policy update is always 1 */
     277    $change_notice_text = sprintf( __( '%s Privacy Policy update' ), $change_notice_number );
     278    $change_notice      = '<span class="update-plugins 1"><span class="plugin-count" aria-hidden="true">' . $change_notice_number . '</span><span class="screen-reader-text">' . $change_notice_text . '</span></span>';
     279}
     280
     281/* translators: %s: update notification bubble, if updates are available */
    272282$menu[80]                               = array( sprintf( __( 'Settings %s' ), $change_notice ), 'manage_options', 'options-general.php', '', 'menu-top menu-icon-settings', 'menu-settings', 'dashicons-admin-settings' );
    273283    $submenu['options-general.php'][10] = array( _x( 'General', 'settings screen' ), 'manage_options', 'options-general.php' );
    … …  
    277287    $submenu['options-general.php'][30] = array( __( 'Media' ), 'manage_options', 'options-media.php' );
    278288    $submenu['options-general.php'][40] = array( __( 'Permalinks' ), 'manage_options', 'options-permalink.php' );
    279     // translators: %s is the update notification bubble, if updates are available.
     289    /* translators: %s: update notification bubble, if updates are available */
    280290    $submenu['options-general.php'][45] = array( sprintf( __( 'Privacy %s' ), $change_notice ), 'manage_privacy_options', 'privacy.php' );
    281291

  • trunk/src/wp-includes/admin-bar.php

    r44608 r44924  
    886886    $awaiting_mod  = wp_count_comments();
    887887    $awaiting_mod  = $awaiting_mod->moderated;
    888     $awaiting_text = sprintf( _n( '%s comment awaiting moderation', '%s comments awaiting moderation', $awaiting_mod ), number_format_i18n( $awaiting_mod ) );
     888    $awaiting_text = sprintf(
     889        /* translators: %s: number of comments in moderation */
     890        _n( '%s Comment in moderation', '%s Comments in moderation', $awaiting_mod ),
     891        number_format_i18n( $awaiting_mod )
     892    );
    889893
    890894    $icon   = '<span class="ab-icon"></span>';
    891895    $title  = '<span class="ab-label awaiting-mod pending-count count-' . $awaiting_mod . '" aria-hidden="true">' . number_format_i18n( $awaiting_mod ) . '</span>';
    892     $title .= '<span class="screen-reader-text">' . $awaiting_text . '</span>';
     896    $title .= '<span class="screen-reader-text comments-in-moderation-text">' . $awaiting_text . '</span>';
    893897
    894898    $wp_admin_bar->add_menu(
Note: See TracChangeset for help on using the changeset viewer.