WordPress.org

Make WordPress Core

Ticket #27555: 27555.4.diff

File 27555.4.diff, 15.8 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 */
     
    10271026        width: 260px;
    10281027}
    10291028
     1029.tagcloud-link.button-link {
     1030    color: #0073aa;
     1031        text-decoration: underline;
     1032}
     1033
     1034.tagcloud-link.button-link:hover {
     1035        color: #00a0d2;
     1036}
     1037
     1038.tagcloud-link.button-link:focus {
     1039        color: #124964;
     1040        -webkit-box-shadow:
     1041                0 0 0 1px #5b9dd9,
     1042                0 0 2px 1px rgba(30, 140, 190, .8);
     1043        box-shadow:
     1044                0 0 0 1px #5b9dd9,
     1045                0 0 2px 1px rgba(30, 140, 190, .8);
     1046}
     1047
    10301048#post-body-content .tagsdiv .the-tags {
    10311049        margin: 0 5px;
    10321050}
     
    10521070        margin: 2px 0 12px;
    10531071}
    10541072
     1073/* Suggest.js autocomplete, no more used by core. */
    10551074.ac_results {
    10561075        display: none;
    10571076        margin: -1px 0 0;
     
    14381457                margin: 25px 10px;
    14391458        }
    14401459
    1441         .tagchecklist span {
     1460        .tagchecklist > span {
    14421461                font-size: 16px;
    14431462                line-height: 1.4;
    14441463        }
  • src/wp-admin/css/forms.css

     
    594594        padding: 4px 10px;
    595595        white-space: nowrap;
    596596        text-align: left;
     597        cursor: pointer;
    597598}
    598599
    599 .ui-autocomplete li.ui-state-focus {
     600/* Colors for the wplink toolbar autocomplete. */
     601.ui-autocomplete .ui-state-focus {
    600602        background-color: #ddd;
    601         cursor: pointer;
    602603}
    603604
     605/* Colors for the tags autocomplete. */
     606.wp-tags-autocomplete .ui-state-focus {
     607        background-color: #0073aa;
     608        color: #fff;
     609}
     610
    604611/*------------------------------------------------------------------------------
    605612  15.0 - Comments Screen
    606613------------------------------------------------------------------------------*/
  • 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: 1px solid #5b9dd9;
     451}
     452
    449453.tablenav .button,
    450454.nav .button {
    451455        padding-top: 2px;
  • src/wp-admin/css/press-this.css

     
    770770        margin: 10px 0 6px 16px;
    771771}
    772772
    773 
    774 /* Tag hint TODO needed? */
    775 /* Tag suggestions */
    776 .ac_results {
    777         padding: 0;
    778         margin: -1px 0 0 -1px;
    779         list-style: none;
    780         position: absolute;
    781         z-index: 10000;
    782         display: none;
    783         border: 1px solid #d8d8d8;
    784         background-color: #fff;
    785         font-size: 14px;
    786 }
    787 
    788 .ac_results li {
    789         padding: 6px 16px;
    790         white-space: nowrap;
    791         text-align: left;
    792 }
    793 
    794 .ac_results .ac_over {
    795         background-color: #e5e5e5;
    796         background-color: #00a0d2;
    797         color: #fff;
    798         cursor: pointer;
    799 }
    800 
    801 .ac_match {
    802         text-decoration: underline;
    803 }
    804 
    805773/* Tags */
    806774.tagchecklist {
    807775        padding: 16px 28px 5px;
     
    817785        clear: both;
    818786}
    819787
    820 .tagchecklist span {
    821         display: block;
     788.tagchecklist > span {
     789        float: left;
    822790        margin-right: 25px;
    823         float: left;
    824791        font-size: 13px;
    825792        line-height: 1.8;
    826793        white-space: nowrap;
     
    828795}
    829796
    830797@media (max-width: 600px) {
    831         .tagchecklist span {
     798        .tagchecklist > span {
    832799                margin-bottom: 15px;
    833800                font-size: 16px;
    834801                line-height: 1.3;
     
    836803}
    837804
    838805.tagchecklist .ntdelbutton {
    839         margin: 1px 0 0 -17px;
     806        position: absolute;
     807        width: 24px;
     808        height: 24px;
     809        border: none;
     810        margin: 0 0 0 -19px;
     811        padding: 0;
     812        background: none;
    840813        cursor: pointer;
    841         width: 20px;
    842         height: 20px;
    843         display: block;
    844         float: left;
    845         text-indent: 0;
    846         overflow: hidden;
     814        text-indent: 0;;
    847815        position: absolute;
    848         outline: 0;
    849816}
    850817
    851 .tagchecklist .ntdelbutton:before {
     818.tagchecklist .ntdelbutton .remove-tag-icon:before {
    852819        content: "\f153";
    853820        display: block;
    854         margin: 2px 0;
     821        margin-left: 2px;
    855822        height: 20px;
    856823        width: 20px;
    857         background: 0 0;
     824        border-radius: 50%;
     825        background: transparent;
    858826        color: #9ea7af;
    859         font: 400 16px/1 dashicons;
     827        /* line-height tweak to vertically center the icon cross browsers */
     828        font: 400 16px/1.28 dashicons;
    860829        text-align: center;
    861         speak: none;
    862830        -webkit-font-smoothing: antialiased;
    863831}
    864832
    865 .tagchecklist .ntdelbutton:focus:before {
    866         color: #00a0d2;
     833.tagchecklist .ntdelbutton:focus {
     834        outline: 0;
    867835}
    868836
     837.tagchecklist .ntdelbutton:hover .remove-tag-icon:before,
     838.tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
     839        color: #c00;
     840}
    869841
     842.tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
     843        -webkit-box-shadow:
     844                0 0 0 1px #5b9dd9,
     845                0 0 2px 1px rgba(30, 140, 190, .8);
     846        box-shadow:
     847                0 0 0 1px #5b9dd9,
     848                0 0 2px 1px rgba(30, 140, 190, .8);
     849}
     850
    870851/* THE TAG CLOUD. */
    871852.tagsdiv + p {
    872853        margin: 0;
     
    21942175        -webkit-box-shadow: 0 1px 2px rgba( 30, 140, 190, 0.8 );
    21952176        box-shadow: 0 1px 2px rgba( 30, 140, 190, 0.8 );
    21962177        background-color: #fff;
     2178        font-size: 14px;
    21972179}
    21982180
    21992181.ui-autocomplete li {
     
    22012183        padding: 4px 10px;
    22022184        white-space: nowrap;
    22032185        text-align: left;
     2186        cursor: pointer;
    22042187}
    22052188
    2206 .ui-autocomplete li.ui-state-focus {
     2189/* Colors for the wplink toolbar autocomplete. */
     2190.ui-autocomplete .ui-state-focus {
    22072191        background-color: #ddd;
    2208         cursor: pointer;
    22092192}
     2193
     2194/* Colors for the tags autocomplete. */
     2195.wp-tags-autocomplete .ui-state-focus {
     2196        background-color: #0073aa;
     2197        color: #fff;
     2198}
  • src/wp-admin/includes/class-wp-press-this.php

     
    940940
    941941                if ( $user_can_assign_terms ) {
    942942                        ?>
    943                         <button type="button" class="button-link tagcloud-link" id="link-post_tag"><?php echo $taxonomy->labels->choose_from_most_used; ?></button>
     943                        <button type="button" class="button-link tagcloud-link" id="link-post_tag" aria-expanded="false"><?php echo $taxonomy->labels->choose_from_most_used; ?></button>
    944944                        <?php
    945945                }
    946946        }
  • src/wp-admin/includes/meta-boxes.php

     
    442442        <div class="tagchecklist"></div>
    443443</div>
    444444<?php if ( $user_can_assign_terms ) : ?>
    445 <p class="hide-if-no-js"><a href="#titlediv" class="tagcloud-link" id="link-<?php echo $tax_name; ?>"><?php echo $taxonomy->labels->choose_from_most_used; ?></a></p>
     445<p class="hide-if-no-js"><button type="button" class="button-link tagcloud-link" id="link-<?php echo $tax_name; ?>" aria-expanded="false"><?php echo $taxonomy->labels->choose_from_most_used; ?></button></p>
    446446<?php endif; ?>
    447447<?php
    448448}
  • src/wp-admin/js/tags-box.js

     
    8686
    8787                                // If tags editing isn't disabled, create the X button.
    8888                                if ( ! disabled ) {
    89                                         xbutton = $( '<a id="' + id + '-check-num-' + key + '" class="ntdelbutton" tabindex="0">X</a>' );
     89                                        /*
     90                                         * Build the X buttons, hide the X icon with aria-hidden and
     91                                         * use visually hidden text for screen readers.
     92                                         */
     93                                        xbutton = $( '<button type="button" id="' + id + '-check-num-' + key + '" class="ntdelbutton">' +
     94                                                '<span class="remove-tag-icon" aria-hidden="true"></span>' +
     95                                                '<span class="screen-reader-text">' + window.tagsSuggestL10n.removeTerm + ' ' + val + '</span>' +
     96                                                '</button>' );
    9097
    9198                                        xbutton.on( 'click keypress', function( e ) {
    92                                                 // Trigger function if pressed Enter - keyboard navigation
    93                                                 if ( e.type === 'click' || e.keyCode === 13 ) {
    94                                                         // When using keyboard, move focus back to the new tag field.
    95                                                         if ( e.keyCode === 13 ) {
    96                                                                 $( this ).closest( '.tagsdiv' ).find( 'input.newtag' ).focus();
    97                                                         }
     99                                                // On click or when using the Enter/Spacebar keys.
     100                                                if ( 'click' === e.type || 13 === e.keyCode || 32 === e.keyCode ) {
     101                                                        /*
     102                                                         * When using the keyboard, move focus back to the
     103                                                         * add new tag field. Note: when releasing the pressed
     104                                                         * key this will fire the `keyup` event on the input.
     105                                                         */
     106                                                        if ( 13 === e.keyCode || 32 === e.keyCode ) {
     107                                                                $( this ).closest( '.tagsdiv' ).find( 'input.newtag' ).focus();
     108                                                        }
    98109
     110                                                        tagBox.userAction = 'remove';
    99111                                                        tagBox.parseTags( this );
    100112                                                }
    101113                                        });
     
    106118                                // Append the span to the tag list.
    107119                                tagchecklist.append( span );
    108120                        });
     121                        // The buttons list is built now, give feedback to screen reader users.
     122                        tagBox.screenReadersMessage();
    109123                },
    110124
    111125                flushTags : function( el, a, f ) {
     
    117131
    118132                        text = a ? $(a).text() : newtag.val();
    119133
    120                         if ( 'undefined' == typeof( text ) ) {
     134                        /*
     135                         * Return if there's no new tag or if the input field is empty.
     136                         * Note: when using the keyboard to add tags, focus is moved back to
     137                         * the input field and the `keyup` event attached on this field will
     138                         * fire when releasing the pressed key. Checking also for the field
     139                         * emptiness avoids to set the tags and call quickClicks() again.
     140                         */
     141                        if ( 'undefined' == typeof( text ) || '' === text ) {
    121142                                return false;
    122143                        }
    123144
     
    148169                                r = $( '<p id="tagcloud-' + tax + '" class="the-tagcloud">' + r + '</p>' );
    149170
    150171                                $( 'a', r ).click( function() {
     172                                        tagBox.userAction = 'add';
    151173                                        tagBox.flushTags( $( '#' + tax ), this );
    152174                                        return false;
    153175                                });
     
    156178                        });
    157179                },
    158180
     181                /**
     182                 * Track the user's last action.
     183                 *
     184                 * @since 4.7.0
     185                 */
     186                userAction: '',
     187
     188                /**
     189                 * Dispatch an audible message to screen readers.
     190                 *
     191                 * @since 4.7.0
     192                 */
     193                screenReadersMessage: function() {
     194                        var message;
     195
     196                        switch ( this.userAction ) {
     197                                case 'remove':
     198                                        message = window.tagsSuggestL10n.termRemoved;
     199                                        break;
     200
     201                                case 'add':
     202                                        message = window.tagsSuggestL10n.termAdded;
     203                                        break;
     204
     205                                default:
     206                                        return;
     207                        }
     208
     209                        window.wp.a11y.speak( message, 'assertive' );
     210                },
     211
    159212                init : function() {
    160213                        var ajaxtag = $('div.ajaxtag');
    161214
     
    164217                        });
    165218
    166219                        $( '.tagadd', ajaxtag ).click( function() {
     220                                tagBox.userAction = 'add';
    167221                                tagBox.flushTags( $( this ).closest( '.tagsdiv' ) );
    168222                        });
    169223
    170224                        $( 'input.newtag', ajaxtag ).keyup( function( event ) {
    171225                                if ( 13 == event.which ) {
     226                                        tagBox.userAction = 'add';
    172227                                        tagBox.flushTags( $( this ).closest( '.tagsdiv' ) );
    173228                                        event.preventDefault();
    174229                                        event.stopPropagation();
     
    189244                                });
    190245                        });
    191246
    192                         // tag cloud
     247                        // Fetch and toggle the Tag cloud.
    193248                        $('.tagcloud-link').click(function(){
    194                                 tagBox.get( $(this).attr('id') );
    195                                 $(this).unbind().click(function(){
    196                                         $(this).siblings('.the-tagcloud').toggle();
    197                                         return false;
    198                                 });
    199                                 return false;
     249                                // On the first click, fetch the tag cloud and insert it in the DOM.
     250                                tagBox.get( $( this ).attr( 'id' ) );
     251                                // Update button state, remove previous click and attach new one to toggle the cloud.
     252                                $( this )
     253                                        .attr( 'aria-expanded', 'true' )
     254                                        .unbind()
     255                                        .click( function() {
     256                                                $( this )
     257                                                        .attr( 'aria-expanded', 'false' === $( this ).attr( 'aria-expanded' ) ? 'true' : 'false' )
     258                                                        .siblings( '.the-tagcloud' ).toggle();
     259                                        });
    200260                        });
    201261                }
    202262        };
  • src/wp-admin/js/tags-suggest.js

     
    1616                var $element = $( this );
    1717
    1818                options = options || {};
    19                
     19
    2020                var taxonomy = options.taxonomy || $element.attr( 'data-wp-taxonomy' ) || 'post_tag';
    21                
     21
    2222                delete( options.taxonomy );
    2323
    2424                options = $.extend( {
    25                         source: function( request, response ) {                         
     25                        source: function( request, response ) {
    2626                                var term;
    2727
    2828                                if ( last === request.term ) {
     
    8282                                if ( $.ui.keyCode.TAB === event.keyCode ) {
    8383                                        if ( typeof window.uiAutocompleteL10n !== 'undefined' ) {
    8484                                                // Audible confirmation message when a tag has been selected.
    85                                                 window.wp.a11y.speak( window.uiAutocompleteL10n.itemSelected );
     85                                                window.wp.a11y.speak( window.tagsSuggestL10n.termSelected, 'assertive' );
    8686                                        }
    8787
    8888                                        event.preventDefault();
     
    160160                                // so we need to find the active item with other means.
    161161                                $( this ).find( '[aria-selected="true"]' ).removeAttr( 'aria-selected' );
    162162                        });
    163                        
     163
    164164                return this;
    165165        };
    166166
  • src/wp-includes/script-loader.php

     
    531531                $scripts->add( 'tags-suggest', "/wp-admin/js/tags-suggest$suffix.js", array( 'jquery-ui-autocomplete', 'wp-a11y' ), false, 1 );
    532532                did_action( 'init' ) && $scripts->localize( 'tags-suggest', 'tagsSuggestL10n', array(
    533533                        'tagDelimiter' => _x( ',', 'tag delimiter' ),
     534                        'removeTerm'   => __( 'Remove term:' ),
     535                        'termSelected' => __( 'Term selected.' ),
     536                        'termAdded'    => __( 'Term added.' ),
     537                        'termRemoved'  => __( 'Term removed.' ),
    534538                ) );
    535539
    536540                $scripts->add( 'post', "/wp-admin/js/post$suffix.js", array( 'suggest', 'wp-lists', 'postbox', 'tags-box', 'underscore', 'word-count', 'wp-a11y' ), false, 1 );