Ticket #27555: 27555.4.diff

src/wp-admin/css/common.css

@@ -759 +759 @@
 
 /* @todo can we combine these into a class or use an existing dashicon one? */
 .welcome-panel .welcome-panel-close:before,
-.tagchecklist span a:before,
+.tagchecklist .ntdelbutton .remove-tag-icon:before,
 #bulk-titles div a:before,
 .notice-dismiss:before {
         background: none;
@@ -779 +779 @@
         margin: 0;
 }
 
-.tagchecklist span a:before,
 #bulk-titles div a:before {
         margin: 1px 0;
 }
 
+.tagchecklist .ntdelbutton .remove-tag-icon:before {
+        margin-left: 2px;
+        border-radius: 50%;
+        /* vertically center the icon cross browsers */
+        line-height: 1.28;
+}
+
+.tagchecklist .ntdelbutton:focus {
+        outline: 0;
+}
+
 .welcome-panel .welcome-panel-close:hover:before,
 .welcome-panel .welcome-panel-close:focus:before,
-.tagchecklist span a:hover:before,
-#bulk-titles div a:hover:before {
+.tagchecklist .ntdelbutton:hover .remove-tag-icon:before,
+.tagchecklist .ntdelbutton:focus .remove-tag-icon:before,
+#bulk-titles div a:hover:before,
+#bulk-titles div a:focus:before {
         color: #c00;
 }
 
+.tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
+        -webkit-box-shadow:
+                0 0 0 1px #5b9dd9,
+                0 0 2px 1px rgba(30, 140, 190, .8);
+        box-shadow:
+                0 0 0 1px #5b9dd9,
+                0 0 2px 1px rgba(30, 140, 190, .8);
+}
+
 .key-labels label {
         line-height: 24px;
 }
@@ -3571 +3592 @@
         .sidebar-name-arrow,
         .sidebar-name:hover .sidebar-name-arrow,
         .meta-box-sortables .postbox:hover .handlediv,
-        .tagchecklist span a,
         #bulk-titles div a,
-        .tagchecklist span a:hover,
         #bulk-titles div a:hover {
                 background: none !important;
         }

src/wp-admin/css/edit.css

@@ -582 +582 @@
         position: absolute;
 }
 
-.tagchecklist span {
+.tagchecklist > span {
+        float: left;
         margin-right: 25px;
-        display: block;
-        float: left;
         font-size: 13px;
         line-height: 1.8em;
         cursor: default;
@@ -594 +593 @@
         text-overflow: ellipsis;
 }
 
-.tagchecklist span a {
-        margin: 1px 0 0 -17px;
+.tagchecklist .ntdelbutton {
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        border: none;
+        margin: 0 0 0 -19px;
+        padding: 0;
+        background: none;
         cursor: pointer;
-        width: 20px;
-        height: 20px;
-        display: block;
-        float: left;
         text-indent: 0;
-        overflow: hidden;
-        position: absolute;
 }
 
 #poststuff h3.hndle, /* Back-compat for pre-4.4 */
@@ -1027 +1026 @@
         width: 260px;
 }
 
+.tagcloud-link.button-link {
+    color: #0073aa;
+        text-decoration: underline;
+}
+
+.tagcloud-link.button-link:hover {
+        color: #00a0d2;
+}
+
+.tagcloud-link.button-link:focus {
+        color: #124964;
+        -webkit-box-shadow:
+                0 0 0 1px #5b9dd9,
+                0 0 2px 1px rgba(30, 140, 190, .8);
+        box-shadow:
+                0 0 0 1px #5b9dd9,
+                0 0 2px 1px rgba(30, 140, 190, .8);
+}
+
 #post-body-content .tagsdiv .the-tags {
         margin: 0 5px;
 }
@@ -1052 +1070 @@
         margin: 2px 0 12px;
 }
 
+/* Suggest.js autocomplete, no more used by core. */
 .ac_results {
         display: none;
         margin: -1px 0 0;
@@ -1438 +1457 @@
                 margin: 25px 10px;
         }
 
-        .tagchecklist span {
+        .tagchecklist > span {
                 font-size: 16px;
                 line-height: 1.4;
         }

src/wp-admin/css/forms.css

@@ -594 +594 @@
         padding: 4px 10px;
         white-space: nowrap;
         text-align: left;
+        cursor: pointer;
 }
 
-.ui-autocomplete li.ui-state-focus {
+/* Colors for the wplink toolbar autocomplete. */
+.ui-autocomplete .ui-state-focus {
         background-color: #ddd;
-        cursor: pointer;
 }
 
+/* Colors for the tags autocomplete. */
+.wp-tags-autocomplete .ui-state-focus {
+        background-color: #0073aa;
+        color: #fff;
+}
+
 /*------------------------------------------------------------------------------
   15.0 - Comments Screen
 ------------------------------------------------------------------------------*/

src/wp-admin/css/ie.css

@@ -441 +441 @@
         padding-right: 1px;
 }
 
-.tagchecklist span, .tagchecklist span a {
+.tagchecklist > span, .tagchecklist .ntdelbutton {
         display: inline-block;
         display: block;
 }
 
+.tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
+        outline: 1px solid #5b9dd9;
+}
+
 .tablenav .button,
 .nav .button {
         padding-top: 2px;

src/wp-admin/css/press-this.css

@@ -770 +770 @@
         margin: 10px 0 6px 16px;
 }
 
-
-/* Tag hint TODO needed? */
-/* Tag suggestions */
-.ac_results {
-        padding: 0;
-        margin: -1px 0 0 -1px;
-        list-style: none;
-        position: absolute;
-        z-index: 10000;
-        display: none;
-        border: 1px solid #d8d8d8;
-        background-color: #fff;
-        font-size: 14px;
-}
-
-.ac_results li {
-        padding: 6px 16px;
-        white-space: nowrap;
-        text-align: left;
-}
-
-.ac_results .ac_over {
-        background-color: #e5e5e5;
-        background-color: #00a0d2;
-        color: #fff;
-        cursor: pointer;
-}
-
-.ac_match {
-        text-decoration: underline;
-}
-
 /* Tags */
 .tagchecklist {
         padding: 16px 28px 5px;
@@ -817 +785 @@
         clear: both;
 }
 
-.tagchecklist span {
-        display: block;
+.tagchecklist > span {
+        float: left;
         margin-right: 25px;
-        float: left;
         font-size: 13px;
         line-height: 1.8;
         white-space: nowrap;
@@ -828 +795 @@
 }
 
 @media (max-width: 600px) {
-        .tagchecklist span {
+        .tagchecklist > span {
                 margin-bottom: 15px;
                 font-size: 16px;
                 line-height: 1.3;
@@ -836 +803 @@
 }
 
 .tagchecklist .ntdelbutton {
-        margin: 1px 0 0 -17px;
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        border: none;
+        margin: 0 0 0 -19px;
+        padding: 0;
+        background: none;
         cursor: pointer;
-        width: 20px;
-        height: 20px;
-        display: block;
-        float: left;
-        text-indent: 0;
-        overflow: hidden;
+        text-indent: 0;;
         position: absolute;
-        outline: 0;
 }
 
-.tagchecklist .ntdelbutton:before {
+.tagchecklist .ntdelbutton .remove-tag-icon:before {
         content: "\f153";
         display: block;
-        margin: 2px 0;
+        margin-left: 2px;
         height: 20px;
         width: 20px;
-        background: 0 0;
+        border-radius: 50%;
+        background: transparent;
         color: #9ea7af;
-        font: 400 16px/1 dashicons;
+        /* line-height tweak to vertically center the icon cross browsers */
+        font: 400 16px/1.28 dashicons;
         text-align: center;
-        speak: none;
         -webkit-font-smoothing: antialiased;
 }
 
-.tagchecklist .ntdelbutton:focus:before {
-        color: #00a0d2;
+.tagchecklist .ntdelbutton:focus {
+        outline: 0;
 }
 
+.tagchecklist .ntdelbutton:hover .remove-tag-icon:before,
+.tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
+        color: #c00;
+}
 
+.tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
+        -webkit-box-shadow:
+                0 0 0 1px #5b9dd9,
+                0 0 2px 1px rgba(30, 140, 190, .8);
+        box-shadow:
+                0 0 0 1px #5b9dd9,
+                0 0 2px 1px rgba(30, 140, 190, .8);
+}
+
 /* THE TAG CLOUD. */
 .tagsdiv + p {
         margin: 0;
@@ -2194 +2175 @@
         -webkit-box-shadow: 0 1px 2px rgba( 30, 140, 190, 0.8 );
         box-shadow: 0 1px 2px rgba( 30, 140, 190, 0.8 );
         background-color: #fff;
+        font-size: 14px;
 }
 
 .ui-autocomplete li {
@@ -2201 +2183 @@
         padding: 4px 10px;
         white-space: nowrap;
         text-align: left;
+        cursor: pointer;
 }
 
-.ui-autocomplete li.ui-state-focus {
+/* Colors for the wplink toolbar autocomplete. */
+.ui-autocomplete .ui-state-focus {
         background-color: #ddd;
-        cursor: pointer;
 }
+
+/* Colors for the tags autocomplete. */
+.wp-tags-autocomplete .ui-state-focus {
+        background-color: #0073aa;
+        color: #fff;
+}

src/wp-admin/includes/class-wp-press-this.php

@@ -940 +940 @@
 
                 if ( $user_can_assign_terms ) {
                         ?>
-                        <button type="button" class="button-link tagcloud-link" id="link-post_tag"><?php echo $taxonomy->labels->choose_from_most_used; ?></button>
+                        <button type="button" class="button-link tagcloud-link" id="link-post_tag" aria-expanded="false"><?php echo $taxonomy->labels->choose_from_most_used; ?></button>
                         <?php
                 }
         }

src/wp-admin/includes/meta-boxes.php

@@ -442 +442 @@
         <div class="tagchecklist"></div>
 </div>
 <?php if ( $user_can_assign_terms ) : ?>
-<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>
+<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>
 <?php endif; ?>
 <?php
 }

src/wp-admin/js/tags-box.js

@@ -86 +86 @@
 
                                 // If tags editing isn't disabled, create the X button.
                                 if ( ! disabled ) {
-                                        xbutton = $( '<a id="' + id + '-check-num-' + key + '" class="ntdelbutton" tabindex="0">X</a>' );
+                                        /*
+                                         * Build the X buttons, hide the X icon with aria-hidden and
+                                         * use visually hidden text for screen readers.
+                                         */
+                                        xbutton = $( '<button type="button" id="' + id + '-check-num-' + key + '" class="ntdelbutton">' +
+                                                '<span class="remove-tag-icon" aria-hidden="true"></span>' +
+                                                '<span class="screen-reader-text">' + window.tagsSuggestL10n.removeTerm + ' ' + val + '</span>' +
+                                                '</button>' );
 
                                         xbutton.on( 'click keypress', function( e ) {
-                                                // Trigger function if pressed Enter - keyboard navigation
-                                                if ( e.type === 'click' || e.keyCode === 13 ) {
-                                                        // When using keyboard, move focus back to the new tag field.
-                                                        if ( e.keyCode === 13 ) {
-                                                                $( this ).closest( '.tagsdiv' ).find( 'input.newtag' ).focus();
-                                                        }
+                                                // On click or when using the Enter/Spacebar keys.
+                                                if ( 'click' === e.type || 13 === e.keyCode || 32 === e.keyCode ) {
+                                                        /*
+                                                         * When using the keyboard, move focus back to the
+                                                         * add new tag field. Note: when releasing the pressed
+                                                         * key this will fire the `keyup` event on the input.
+                                                         */
+                                                        if ( 13 === e.keyCode || 32 === e.keyCode ) {
+                                                                $( this ).closest( '.tagsdiv' ).find( 'input.newtag' ).focus();
+                                                        }
 
+                                                        tagBox.userAction = 'remove';
                                                         tagBox.parseTags( this );
                                                 }
                                         });
@@ -106 +118 @@
                                 // Append the span to the tag list.
                                 tagchecklist.append( span );
                         });
+                        // The buttons list is built now, give feedback to screen reader users.
+                        tagBox.screenReadersMessage();
                 },
 
                 flushTags : function( el, a, f ) {
@@ -117 +131 @@
 
                         text = a ? $(a).text() : newtag.val();
 
-                        if ( 'undefined' == typeof( text ) ) {
+                        /*
+                         * Return if there's no new tag or if the input field is empty.
+                         * Note: when using the keyboard to add tags, focus is moved back to
+                         * the input field and the `keyup` event attached on this field will
+                         * fire when releasing the pressed key. Checking also for the field
+                         * emptiness avoids to set the tags and call quickClicks() again.
+                         */
+                        if ( 'undefined' == typeof( text ) || '' === text ) {
                                 return false;
                         }
 
@@ -148 +169 @@
                                 r = $( '<p id="tagcloud-' + tax + '" class="the-tagcloud">' + r + '</p>' );
 
                                 $( 'a', r ).click( function() {
+                                        tagBox.userAction = 'add';
                                         tagBox.flushTags( $( '#' + tax ), this );
                                         return false;
                                 });
@@ -156 +178 @@
                         });
                 },
 
+                /**
+                 * Track the user's last action.
+                 *
+                 * @since 4.7.0
+                 */
+                userAction: '',
+
+                /**
+                 * Dispatch an audible message to screen readers.
+                 *
+                 * @since 4.7.0
+                 */
+                screenReadersMessage: function() {
+                        var message;
+
+                        switch ( this.userAction ) {
+                                case 'remove':
+                                        message = window.tagsSuggestL10n.termRemoved;
+                                        break;
+
+                                case 'add':
+                                        message = window.tagsSuggestL10n.termAdded;
+                                        break;
+
+                                default:
+                                        return;
+                        }
+
+                        window.wp.a11y.speak( message, 'assertive' );
+                },
+
                 init : function() {
                         var ajaxtag = $('div.ajaxtag');
 
@@ -164 +217 @@
                         });
 
                         $( '.tagadd', ajaxtag ).click( function() {
+                                tagBox.userAction = 'add';
                                 tagBox.flushTags( $( this ).closest( '.tagsdiv' ) );
                         });
 
                         $( 'input.newtag', ajaxtag ).keyup( function( event ) {
                                 if ( 13 == event.which ) {
+                                        tagBox.userAction = 'add';
                                         tagBox.flushTags( $( this ).closest( '.tagsdiv' ) );
                                         event.preventDefault();
                                         event.stopPropagation();
@@ -189 +244 @@
                                 });
                         });
 
-                        // tag cloud
+                        // Fetch and toggle the Tag cloud.
                         $('.tagcloud-link').click(function(){
-                                tagBox.get( $(this).attr('id') );
-                                $(this).unbind().click(function(){
-                                        $(this).siblings('.the-tagcloud').toggle();
-                                        return false;
-                                });
-                                return false;
+                                // On the first click, fetch the tag cloud and insert it in the DOM.
+                                tagBox.get( $( this ).attr( 'id' ) );
+                                // Update button state, remove previous click and attach new one to toggle the cloud.
+                                $( this )
+                                        .attr( 'aria-expanded', 'true' )
+                                        .unbind()
+                                        .click( function() {
+                                                $( this )
+                                                        .attr( 'aria-expanded', 'false' === $( this ).attr( 'aria-expanded' ) ? 'true' : 'false' )
+                                                        .siblings( '.the-tagcloud' ).toggle();
+                                        });
                         });
                 }
         };

src/wp-admin/js/tags-suggest.js

@@ -16 +16 @@
                 var $element = $( this );
 
                 options = options || {};
-                
+
                 var taxonomy = options.taxonomy || $element.attr( 'data-wp-taxonomy' ) || 'post_tag';
-                
+
                 delete( options.taxonomy );
 
                 options = $.extend( {
-                        source: function( request, response ) {                         
+                        source: function( request, response ) {
                                 var term;
 
                                 if ( last === request.term ) {
@@ -82 +82 @@
                                 if ( $.ui.keyCode.TAB === event.keyCode ) {
                                         if ( typeof window.uiAutocompleteL10n !== 'undefined' ) {
                                                 // Audible confirmation message when a tag has been selected.
-                                                window.wp.a11y.speak( window.uiAutocompleteL10n.itemSelected );
+                                                window.wp.a11y.speak( window.tagsSuggestL10n.termSelected, 'assertive' );
                                         }
 
                                         event.preventDefault();
@@ -160 +160 @@
                                 // so we need to find the active item with other means.
                                 $( this ).find( '[aria-selected="true"]' ).removeAttr( 'aria-selected' );
                         });
-                        
+
                 return this;
         };
 

src/wp-includes/script-loader.php

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