Changeset 38880 for trunk/src/wp-admin/js/tags-box.js
- Timestamp:
- 10/23/2016 06:15:07 PM (7 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-admin/js/tags-box.js
r38797 r38880 87 87 // If tags editing isn't disabled, create the X button. 88 88 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>' ); 90 97 91 98 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 } 98 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 } 109 110 tagBox.userAction = 'remove'; 99 111 tagBox.parseTags( this ); 100 112 } … … 107 119 tagchecklist.append( span ); 108 120 }); 121 // The buttons list is built now, give feedback to screen reader users. 122 tagBox.screenReadersMessage(); 109 123 }, 110 124 … … 118 132 text = a ? $(a).text() : newtag.val(); 119 133 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 ) { 121 142 return false; 122 143 } … … 149 170 150 171 $( 'a', r ).click( function() { 172 tagBox.userAction = 'add'; 151 173 tagBox.flushTags( $( '#' + tax ), this ); 152 174 return false; … … 157 179 }, 158 180 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 159 212 init : function() { 160 213 var ajaxtag = $('div.ajaxtag'); … … 165 218 166 219 $( '.tagadd', ajaxtag ).click( function() { 220 tagBox.userAction = 'add'; 167 221 tagBox.flushTags( $( this ).closest( '.tagsdiv' ) ); 168 222 }); … … 170 224 $( 'input.newtag', ajaxtag ).keyup( function( event ) { 171 225 if ( 13 == event.which ) { 226 tagBox.userAction = 'add'; 172 227 tagBox.flushTags( $( this ).closest( '.tagsdiv' ) ); 173 228 event.preventDefault(); … … 190 245 }); 191 246 192 // tag cloud247 // Fetch and toggle the Tag cloud. 193 248 $('.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 event and attach a 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 }); 200 260 }); 201 261 }
Note: See TracChangeset
for help on using the changeset viewer.