Ticket #27555: 27555.2.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 */
@@ -1438 +1437 @@
                 margin: 25px 10px;
         }
 
-        .tagchecklist span {
+        .tagchecklist > span {
                 font-size: 16px;
                 line-height: 1.4;
         }

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: #5b9dd9 solid 1px;
+}
+
 .tablenav .button,
 .nav .button {
         padding-top: 2px;

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

@@ -817 +817 @@
         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 +827 @@
 }
 
 @media (max-width: 600px) {
-        .tagchecklist span {
+        .tagchecklist > span {
                 margin-bottom: 15px;
                 font-size: 16px;
                 line-height: 1.3;
@@ -836 +835 @@
 }
 
 .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;

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

@@ -3 +3 @@
 
 var tagBox, array_unique_noempty;
 
-( function( $ ) {
+// Make sure the wp object exists.
+window.wp = window.wp || {};
+
+( function( $, wp ) {
         // Return an array with any duplicate, whitespace or empty values removed
         array_unique_noempty = function( array ) {
                 var out = [];
@@ -81 +84 @@
 
                                 // 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.tagsBoxL10n.removeItem + ' ' + 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 ) {
+                                                // 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 = 'delete';
                                                         tagBox.parseTags( this );
                                                 }
                                         });
@@ -101 +116 @@
                                 // 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 ) {
@@ -113 +130 @@
 
                         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;
                         }
 
@@ -144 +168 @@
                                 r = $( '<p id="tagcloud-' + tax + '" class="the-tagcloud">' + r + '</p>' );
 
                                 $( 'a', r ).click( function() {
+                                        tagBox.userAction = 'add';
                                         tagBox.flushTags( $( '#' + tax ), this );
                                         return false;
                                 });
@@ -152 +177 @@
                         });
                 },
 
+                /**
+                 * 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 'delete':
+                                        message = window.tagsBoxL10n.itemRemoved;
+                                        break;
+
+                                case 'add':
+                                        message = window.tagsBoxL10n.itemAdded;
+                                        break;
+
+                                default:
+                                        return;
+                        }
+
+                        wp.a11y.speak( message, 'assertive' );
+                },
+
                 init : function() {
                         var t = this, ajaxtag = $('div.ajaxtag');
 
@@ -160 +216 @@
                         });
 
                         $('.tagadd', ajaxtag).click(function(){
+                                tagBox.userAction = 'add';
                                 t.flushTags( $(this).closest('.tagsdiv') );
                         });
 
                         $('input.newtag', ajaxtag).keyup(function(e){
                                 if ( 13 == e.which ) {
+                                        tagBox.userAction = 'add';
                                         tagBox.flushTags( $(this).closest('.tagsdiv') );
                                         return false;
                                 }
@@ -199 +257 @@
                         });
                 }
         };
-}( jQuery ));
+}( jQuery, window.wp ));

src/wp-includes/script-loader.php

@@ -523 +523 @@
                         'postBoxEmptyString' => __( 'Drag boxes here' ),
                 ) );
 
-                $scripts->add( 'tags-box', "/wp-admin/js/tags-box$suffix.js", array( 'jquery', 'suggest' ), false, 1 );
+                $scripts->add( 'tags-box', "/wp-admin/js/tags-box$suffix.js", array( 'jquery', 'suggest', 'wp-a11y' ), false, 1 );
                 did_action( 'init' ) && $scripts->localize( 'tags-box', 'tagsBoxL10n', array(
                         'tagDelimiter' => _x( ',', 'tag delimiter' ),
+                        'removeItem'   => __( 'Remove item:' ),
+                        'itemAdded'    => __( 'Item added.' ),
+                        'itemRemoved'  => __( 'Item deleted.' ),
                 ) );
 
                 $scripts->add( 'post', "/wp-admin/js/post$suffix.js", array( 'suggest', 'wp-lists', 'postbox', 'tags-box', 'underscore', 'word-count', 'wp-a11y' ), false, 1 );