Ticket #40735: 40735.2.diff
File 40735.2.diff, 8.2 KB (added by , 3 years ago) |
---|
-
src/wp-admin/includes/dashboard.php
1215 1215 1216 1216 <?php submit_button( __( 'Submit' ), 'secondary', 'community-events-submit', false ); ?> 1217 1217 1218 <button class="community-events-cancel button button-link" type="button" aria-expanded="false">1218 <button class="community-events-cancel button-link" type="button" aria-expanded="false"> 1219 1219 <?php _e( 'Cancel' ); ?> 1220 1220 </button> 1221 1221 -
src/wp-admin/js/dashboard.js
191 191 192 192 jQuery( function( $ ) { 193 193 'use strict'; 194 195 var communityEventsData = window.communityEventsData || {};196 194 197 var app = window.wp.communityEvents = { 195 var communityEventsData = window.communityEventsData || {}, 196 app; 197 198 app = window.wp.communityEvents = { 198 199 initialized: false, 199 200 model: null, 200 201 … … 212 213 213 214 /* 214 215 * When JavaScript is disabled, the errors container is shown, so 215 * that "This widget requires Java script" message can be seen.216 * that "This widget requires JavaScript" message can be seen. 216 217 * 217 218 * When JS is enabled, the container is hidden at first, and then 218 219 * revealed during the template rendering, if there actually are … … 227 228 * message. 228 229 */ 229 230 $( '.community-events-errors' ) 230 .attr( 'aria-hidden', true)231 .attr( 'aria-hidden', 'true' ) 231 232 .removeClass( 'hide-if-js' ); 232 233 233 234 $container.on( 'click', '.community-events-toggle-location, .community-events-cancel', app.toggleLocationForm ); … … 235 236 $container.on( 'submit', '.community-events-form', function( event ) { 236 237 event.preventDefault(); 237 238 238 app.getEvents( 239 app.getEvents({ 239 240 location: $( '#community-events-location' ).val() 240 241 }); 241 242 }); … … 255 256 * @since 4.8.0 256 257 * 257 258 * @param {event|string} action 'show' or 'hide' to specify a state; 258 * Or an event object to flip between states259 * or an event object to flip between states. 259 260 */ 260 261 toggleLocationForm: function( action ) { 261 262 var $toggleButton = $( '.community-events-toggle-location' ), 262 $cancelButton = $( '.community-events-cancel' ), 263 $form = $( '.community-events-form' ); 263 $cancelButton = $( '.community-events-cancel' ), 264 $form = $( '.community-events-form' ), 265 $target = $(); 264 266 265 267 if ( 'object' === typeof action ) { 266 // Strict comparison doesn't work in this case. 268 // The action is the event object: get the clicked element. 269 $target = $( action.target ); 270 /* 271 * Strict comparison doesn't work in this case because sometimes 272 * we explicitly pass a string as value of aria-expanded and 273 * sometimes a boolean as the result of an evaluation. 274 */ 267 275 action = 'true' == $toggleButton.attr( 'aria-expanded' ) ? 'hide' : 'show'; 268 276 } 269 277 270 278 if ( 'hide' === action ) { 271 $toggleButton.attr( 'aria-expanded', false ); 272 $cancelButton.attr( 'aria-expanded', false ); 273 $form.attr( 'aria-hidden', true ); 279 $toggleButton.attr( 'aria-expanded', 'false' ); 280 $cancelButton.attr( 'aria-expanded', 'false' ); 281 $form.attr( 'aria-hidden', 'true' ); 282 /* 283 * If the Cancel button has been clicked, bring the focus back 284 * to the toggle button so users relying on screen readers don't 285 * lose their place. 286 */ 287 if ( $target.hasClass( 'community-events-cancel' ) ) { 288 $toggleButton.focus(); 289 } 274 290 } else { 275 $toggleButton.attr( 'aria-expanded', true);276 $cancelButton.attr( 'aria-expanded', true);277 $form.attr( 'aria-hidden', false);291 $toggleButton.attr( 'aria-expanded', 'true' ); 292 $cancelButton.attr( 'aria-expanded', 'true' ); 293 $form.attr( 'aria-hidden', 'false' ); 278 294 } 279 295 }, 280 296 … … 287 303 */ 288 304 getEvents: function( requestParams ) { 289 305 var initiatedBy, 290 291 306 app = this, 307 $spinner = $( '.community-events-form' ).children( '.spinner' ); 292 308 293 309 requestParams = requestParams || {}; 294 310 requestParams._wpnonce = communityEventsData.nonce; … … 314 330 * it should fail silently. Otherwise, the error could confuse and/or 315 331 * annoy them. 316 332 */ 317 318 333 delete response.error; 319 334 } 320 335 } … … 322 337 }) 323 338 324 339 .fail( function() { 325 app.renderEventsTemplate( 340 app.renderEventsTemplate({ 326 341 'location' : false, 327 342 'error' : true 328 343 }, initiatedBy ); … … 334 349 * 335 350 * @since 4.8.0 336 351 * 337 * @param {Object} templateParams The various parameters that will get passed to wp.template 352 * @param {Object} templateParams The various parameters that will get passed to wp.template. 338 353 * @param {string} initiatedBy 'user' to indicate that this was triggered manually by the user; 339 354 * 'app' to indicate it was triggered automatically by the app itself. 340 355 */ 341 356 renderEventsTemplate: function( templateParams, initiatedBy ) { 342 357 var template, 343 elementVisibility, 344 l10nPlaceholder = /%(?:\d\$)?s/g, // Match `%s`, `%1$s`, `%2$s`, etc. 345 $locationMessage = $( '#community-events-location-message' ), 346 $results = $( '.community-events-results' ); 358 elementVisibility, 359 l10nPlaceholder = /%(?:\d\$)?s/g, // Match `%s`, `%1$s`, `%2$s`, etc. 360 $toggleButton = $( '.community-events-toggle-location' ), 361 $locationMessage = $( '#community-events-location-message' ), 362 $results = $( '.community-events-results' ); 347 363 348 364 /* 349 365 * Hide all toggleable elements by default, to keep the logic simple. … … 350 366 * Otherwise, each block below would have to turn hide everything that 351 367 * could have been shown at an earlier point. 352 368 * 353 * The exception to that is that the .community-events container . It's hidden369 * The exception to that is that the .community-events container is hidden 354 370 * when the page is first loaded, because the content isn't ready yet, 355 371 * but once we've reached this point, it should always be shown. 356 372 */ … … 380 396 template = wp.template( 'community-events-no-upcoming-events' ); 381 397 $results.html( template( templateParams ) ); 382 398 } 383 wp.a11y.speak( communityEventsData.l10n.city_updated.replace( l10nPlaceholder, templateParams.location ));399 wp.a11y.speak( communityEventsData.l10n.city_updated.replace( l10nPlaceholder, templateParams.location.description ), 'assertive' ); 384 400 385 401 elementVisibility['#community-events-location-message'] = true; 386 402 elementVisibility['.community-events-toggle-location'] = true; … … 405 421 406 422 elementVisibility['.community-events-errors'] = true; 407 423 elementVisibility['.community-events-error-occurred'] = true; 408 409 424 } else { 410 425 $locationMessage.text( communityEventsData.l10n.enter_closest_city ); 411 426 … … 418 433 $( element ).attr( 'aria-hidden', ! isVisible ); 419 434 }); 420 435 421 $ ( '.community-events-toggle-location' ).attr( 'aria-expanded', elementVisibility['.community-events-toggle-location'] );436 $toggleButton.attr( 'aria-expanded', elementVisibility['.community-events-toggle-location'] ); 422 437 423 /* 424 * During the initial page load, the location form should be hidden 425 * by default if the user has saved a valid location during a previous 426 * session. It's safe to assume that they want to continue using that 427 * location, and displaying the form would unnecessarily clutter the 428 * widget. 429 */ 430 if ( 'app' === initiatedBy && templateParams.location ) { 438 if ( templateParams.location ) { 439 // Hide the form when there's a valid location. 431 440 app.toggleLocationForm( 'hide' ); 441 442 if ( 'user' === initiatedBy ) { 443 /* 444 * When the form is programmatically hidden after a user search, 445 * bring the focus back to the toggle button so users relying 446 * on screen readers don't lose their place. 447 */ 448 $toggleButton.focus(); 449 } 432 450 } else { 433 451 app.toggleLocationForm( 'show' ); 434 452 }