WordPress.org

Make WordPress Core

Ticket #27555: 27555.3.diff

File 27555.3.diff, 10.2 KB (added by afercia, 4 years ago)
  • src/wp-admin/css/common.css

     
    759759
    760760/* @todo can we combine these into a class or use an existing dashicon one? */
    761761.welcome-panel .welcome-panel-close:before,
    762 .tagchecklist span a:before,
     762.tagchecklist .ntdelbutton .remove-tag-icon:before,
    763763#bulk-titles div a:before,
    764764.notice-dismiss:before {
    765765        background: none;
     
    779779        margin: 0;
    780780}
    781781
    782 .tagchecklist span a:before,
    783782#bulk-titles div a:before {
    784783        margin: 1px 0;
    785784}
    786785
     786.tagchecklist .ntdelbutton .remove-tag-icon:before {
     787        margin-left: 2px;
     788        border-radius: 50%;
     789        /* vertically center the icon cross browsers */
     790        line-height: 1.28;
     791}
     792
     793.tagchecklist .ntdelbutton:focus {
     794        outline: 0;
     795}
     796
    787797.welcome-panel .welcome-panel-close:hover:before,
    788798.welcome-panel .welcome-panel-close:focus:before,
    789 .tagchecklist span a:hover:before,
    790 #bulk-titles div a:hover:before {
     799.tagchecklist .ntdelbutton:hover .remove-tag-icon:before,
     800.tagchecklist .ntdelbutton:focus .remove-tag-icon:before,
     801#bulk-titles div a:hover:before,
     802#bulk-titles div a:focus:before {
    791803        color: #c00;
    792804}
    793805
     806.tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
     807        -webkit-box-shadow:
     808                0 0 0 1px #5b9dd9,
     809                0 0 2px 1px rgba(30, 140, 190, .8);
     810        box-shadow:
     811                0 0 0 1px #5b9dd9,
     812                0 0 2px 1px rgba(30, 140, 190, .8);
     813}
     814
    794815.key-labels label {
    795816        line-height: 24px;
    796817}
     
    35713592        .sidebar-name-arrow,
    35723593        .sidebar-name:hover .sidebar-name-arrow,
    35733594        .meta-box-sortables .postbox:hover .handlediv,
    3574         .tagchecklist span a,
    35753595        #bulk-titles div a,
    3576         .tagchecklist span a:hover,
    35773596        #bulk-titles div a:hover {
    35783597                background: none !important;
    35793598        }
  • src/wp-admin/css/edit.css

     
    582582        position: absolute;
    583583}
    584584
    585 .tagchecklist span {
     585.tagchecklist > span {
     586        float: left;
    586587        margin-right: 25px;
    587         display: block;
    588         float: left;
    589588        font-size: 13px;
    590589        line-height: 1.8em;
    591590        cursor: default;
     
    594593        text-overflow: ellipsis;
    595594}
    596595
    597 .tagchecklist span a {
    598         margin: 1px 0 0 -17px;
     596.tagchecklist .ntdelbutton {
     597        position: absolute;
     598        width: 24px;
     599        height: 24px;
     600        border: none;
     601        margin: 0 0 0 -19px;
     602        padding: 0;
     603        background: none;
    599604        cursor: pointer;
    600         width: 20px;
    601         height: 20px;
    602         display: block;
    603         float: left;
    604605        text-indent: 0;
    605         overflow: hidden;
    606         position: absolute;
    607606}
    608607
    609608#poststuff h3.hndle, /* Back-compat for pre-4.4 */
     
    14381437                margin: 25px 10px;
    14391438        }
    14401439
    1441         .tagchecklist span {
     1440        .tagchecklist > span {
    14421441                font-size: 16px;
    14431442                line-height: 1.4;
    14441443        }
  • src/wp-admin/css/ie.css

     
    441441        padding-right: 1px;
    442442}
    443443
    444 .tagchecklist span, .tagchecklist span a {
     444.tagchecklist > span, .tagchecklist .ntdelbutton {
    445445        display: inline-block;
    446446        display: block;
    447447}
    448448
     449.tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
     450        outline: #5b9dd9 solid 1px;
     451}
     452
    449453.tablenav .button,
    450454.nav .button {
    451455        padding-top: 2px;
  • src/wp-admin/css/press-this.css

     
    817817        clear: both;
    818818}
    819819
    820 .tagchecklist span {
    821         display: block;
     820.tagchecklist > span {
     821        float: left;
    822822        margin-right: 25px;
    823         float: left;
    824823        font-size: 13px;
    825824        line-height: 1.8;
    826825        white-space: nowrap;
     
    828827}
    829828
    830829@media (max-width: 600px) {
    831         .tagchecklist span {
     830        .tagchecklist > span {
    832831                margin-bottom: 15px;
    833832                font-size: 16px;
    834833                line-height: 1.3;
     
    836835}
    837836
    838837.tagchecklist .ntdelbutton {
    839         margin: 1px 0 0 -17px;
     838        position: absolute;
     839        width: 24px;
     840        height: 24px;
     841        border: none;
     842        margin: 0 0 0 -19px;
     843        padding: 0;
     844        background: none;
    840845        cursor: pointer;
    841         width: 20px;
    842         height: 20px;
    843         display: block;
    844         float: left;
    845         text-indent: 0;
    846         overflow: hidden;
     846        text-indent: 0;;
    847847        position: absolute;
    848         outline: 0;
    849848}
    850849
    851 .tagchecklist .ntdelbutton:before {
     850.tagchecklist .ntdelbutton .remove-tag-icon:before {
    852851        content: "\f153";
    853852        display: block;
    854         margin: 2px 0;
     853        margin-left: 2px;
    855854        height: 20px;
    856855        width: 20px;
    857         background: 0 0;
     856        border-radius: 50%;
     857        background: transparent;
    858858        color: #9ea7af;
    859         font: 400 16px/1 dashicons;
     859        /* line-height tweak to vertically center the icon cross browsers */
     860        font: 400 16px/1.28 dashicons;
    860861        text-align: center;
    861         speak: none;
    862862        -webkit-font-smoothing: antialiased;
    863863}
    864864
    865 .tagchecklist .ntdelbutton:focus:before {
    866         color: #00a0d2;
     865.tagchecklist .ntdelbutton:focus {
     866        outline: 0;
    867867}
    868868
     869.tagchecklist .ntdelbutton:hover .remove-tag-icon:before,
     870.tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
     871        color: #c00;
     872}
    869873
     874.tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
     875        -webkit-box-shadow:
     876                0 0 0 1px #5b9dd9,
     877                0 0 2px 1px rgba(30, 140, 190, .8);
     878        box-shadow:
     879                0 0 0 1px #5b9dd9,
     880                0 0 2px 1px rgba(30, 140, 190, .8);
     881}
     882
    870883/* THE TAG CLOUD. */
    871884.tagsdiv + p {
    872885        margin: 0;
  • src/wp-admin/js/tags-box.js

     
    33
    44var tagBox, array_unique_noempty;
    55
    6 ( function( $ ) {
     6// Make sure the wp object exists.
     7window.wp = window.wp || {};
     8
     9( function( $, wp ) {
    710        // Return an array with any duplicate, whitespace or empty values removed
    811        array_unique_noempty = function( array ) {
    912                var out = [];
     
    8184
    8285                                // If tags editing isn't disabled, create the X button.
    8386                                if ( ! disabled ) {
    84                                         xbutton = $( '<a id="' + id + '-check-num-' + key + '" class="ntdelbutton" tabindex="0">X</a>' );
     87                                        /*
     88                                         * Build the X buttons, hide the X icon with aria-hidden and
     89                                         * use visually hidden text for screen readers.
     90                                         */
     91                                        xbutton = $( '<button type="button" id="' + id + '-check-num-' + key + '" class="ntdelbutton">' +
     92                                                '<span class="remove-tag-icon" aria-hidden="true"></span>' +
     93                                                '<span class="screen-reader-text">' + window.tagsBoxL10n.removeTerm + ' ' + val + '</span>' +
     94                                                '</button>' );
    8595
    8696                                        xbutton.on( 'click keypress', function( e ) {
    87                                                 // Trigger function if pressed Enter - keyboard navigation
    88                                                 if ( e.type === 'click' || e.keyCode === 13 ) {
    89                                                         // When using keyboard, move focus back to the new tag field.
    90                                                         if ( e.keyCode === 13 ) {
     97                                                // On click or when using the Enter/Spacebar keys.
     98                                                if ( 'click' === e.type || 13 === e.keyCode || 32 === e.keyCode ) {
     99                                                        /*
     100                                                         * When using the keyboard, move focus back to the
     101                                                         * add new tag field. Note: when releasing the pressed
     102                                                         * key this will fire the `keyup` event on the input.
     103                                                         */
     104                                                        if ( 13 === e.keyCode || 32 === e.keyCode ) {
    91105                                                                $( this ).closest( '.tagsdiv' ).find( 'input.newtag' ).focus();
    92106                                                        }
    93107
     108                                                        tagBox.userAction = 'remove';
    94109                                                        tagBox.parseTags( this );
    95110                                                }
    96111                                        });
     
    101116                                // Append the span to the tag list.
    102117                                tagchecklist.append( span );
    103118                        });
     119                        // The buttons list is built now, give feedback to screen reader users.
     120                        tagBox.screenReadersMessage();
    104121                },
    105122
    106123                flushTags : function( el, a, f ) {
     
    113130
    114131                        text = a ? $(a).text() : newtag.val();
    115132
    116                         if ( 'undefined' == typeof( text ) ) {
     133                        /*
     134                         * Return if there's no new tag or if the input field is empty.
     135                         * Note: when using the keyboard to add tags, focus is moved back to
     136                         * the input field and the `keyup` event attached on this field will
     137                         * fire when releasing the pressed key. Checking also for the field
     138                         * emptiness avoids to set the tags and call quickClicks() again.
     139                         */
     140                        if ( 'undefined' == typeof( text ) || '' === text ) {
    117141                                return false;
    118142                        }
    119143
     
    144168                                r = $( '<p id="tagcloud-' + tax + '" class="the-tagcloud">' + r + '</p>' );
    145169
    146170                                $( 'a', r ).click( function() {
     171                                        tagBox.userAction = 'add';
    147172                                        tagBox.flushTags( $( '#' + tax ), this );
    148173                                        return false;
    149174                                });
     
    152177                        });
    153178                },
    154179
     180                /**
     181                 * Track the user's last action.
     182                 *
     183                 * @since 4.7.0
     184                 */
     185                userAction: '',
     186
     187                /**
     188                 * Dispatch an audible message to screen readers.
     189                 *
     190                 * @since 4.7.0
     191                 */
     192                screenReadersMessage: function() {
     193                        var message;
     194
     195                        switch ( this.userAction ) {
     196                                case 'remove':
     197                                        message = window.tagsBoxL10n.termRemoved;
     198                                        break;
     199
     200                                case 'add':
     201                                        message = window.tagsBoxL10n.termAdded;
     202                                        break;
     203
     204                                default:
     205                                        return;
     206                        }
     207
     208                        wp.a11y.speak( message, 'assertive' );
     209                },
     210
    155211                init : function() {
    156212                        var t = this, ajaxtag = $('div.ajaxtag');
    157213
     
    160216                        });
    161217
    162218                        $('.tagadd', ajaxtag).click(function(){
     219                                tagBox.userAction = 'add';
    163220                                t.flushTags( $(this).closest('.tagsdiv') );
    164221                        });
    165222
    166223                        $('input.newtag', ajaxtag).keyup(function(e){
    167224                                if ( 13 == e.which ) {
     225                                        tagBox.userAction = 'add';
    168226                                        tagBox.flushTags( $(this).closest('.tagsdiv') );
    169227                                        return false;
    170228                                }
     
    199257                        });
    200258                }
    201259        };
    202 }( jQuery ));
     260}( jQuery, window.wp ));
  • src/wp-includes/script-loader.php

     
    523523                        'postBoxEmptyString' => __( 'Drag boxes here' ),
    524524                ) );
    525525
    526                 $scripts->add( 'tags-box', "/wp-admin/js/tags-box$suffix.js", array( 'jquery', 'suggest' ), false, 1 );
     526                $scripts->add( 'tags-box', "/wp-admin/js/tags-box$suffix.js", array( 'jquery', 'suggest', 'wp-a11y' ), false, 1 );
    527527                did_action( 'init' ) && $scripts->localize( 'tags-box', 'tagsBoxL10n', array(
    528528                        'tagDelimiter' => _x( ',', 'tag delimiter' ),
     529                        'removeTerm'   => __( 'Remove term:' ),
     530                        'termAdded'    => __( 'Term added.' ),
     531                        'termRemoved'  => __( 'Term removed.' ),
    529532                ) );
    530533
    531534                $scripts->add( 'post', "/wp-admin/js/post$suffix.js", array( 'suggest', 'wp-lists', 'postbox', 'tags-box', 'underscore', 'word-count', 'wp-a11y' ), false, 1 );