WordPress.org
Get WordPress

Make WordPress Core

Ticket #40735: 40735.diff

File 40735.diff, 7.9 KB (added by afercia, 8 years ago)

  • src/wp-admin/includes/dashboard.php

     
    12151215
    12161216                                <?php submit_button( __( 'Submit' ), 'secondary', 'community-events-submit', false ); ?>
    12171217
    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">
    12191219                                        <?php _e( 'Cancel' ); ?>
    12201220                                </button>
    12211221

  • src/wp-admin/js/dashboard.js

     
    191191
    192192jQuery( function( $ ) {
    193193        'use strict';
    194        
     194
    195195        var communityEventsData = window.communityEventsData || {};
    196196
    197197        var app = window.wp.communityEvents = {
    … …  
    212212
    213213                        /*
    214214                         * When JavaScript is disabled, the errors container is shown, so
    215                          * that "This widget requires Javascript" message can be seen.
     215                         * that "This widget requires JavaScript" message can be seen.
    216216                         *
    217217                         * When JS is enabled, the container is hidden at first, and then
    218218                         * revealed during the template rendering, if there actually are
    … …  
    227227                         * message.
    228228                         */
    229229                        $( '.community-events-errors' )
    230                                 .attr( 'aria-hidden', true )
     230                                .attr( 'aria-hidden', 'true' )
    231231                                .removeClass( 'hide-if-js' );
    232232
    233233                        $container.on( 'click', '.community-events-toggle-location, .community-events-cancel', app.toggleLocationForm );
    … …  
    235235                        $container.on( 'submit', '.community-events-form', function( event ) {
    236236                                event.preventDefault();
    237237
    238                                 app.getEvents( {
     238                                app.getEvents({
    239239                                        location: $( '#community-events-location' ).val()
    240240                                });
    241241                        });
    … …  
    255255                 * @since 4.8.0
    256256                 *
    257257                 * @param {event|string} action 'show' or 'hide' to specify a state;
    258                  *                              Or an event object to flip between states
     258                 *                              or an event object to flip between states.
    259259                 */
    260260                toggleLocationForm: function( action ) {
    261261                        var $toggleButton = $( '.community-events-toggle-location' ),
    262                             $cancelButton = $( '.community-events-cancel' ),
    263                             $form         = $( '.community-events-form' );
     262                                $cancelButton = $( '.community-events-cancel' ),
     263                                $form         = $( '.community-events-form' ),
     264                                $target       = $();
    264265
    265266                        if ( 'object' === typeof action ) {
    266                                 // Strict comparison doesn't work in this case.
     267                                // The action is the event object: get the clicked element.
     268                                $target = $( action.target );
     269                                /*
     270                                 * Strict comparison doesn't work in this case because sometimes
     271                                 * we explicitly pass a string as value of aria-expanded and
     272                                 * sometimes a boolean as the result of an evaluation.
     273                                 */
    267274                                action = 'true' == $toggleButton.attr( 'aria-expanded' ) ? 'hide' : 'show';
    268275                        }
    269276
    270277                        if ( 'hide' === action ) {
    271                                 $toggleButton.attr( 'aria-expanded', false );
    272                                 $cancelButton.attr( 'aria-expanded', false );
    273                                 $form.attr( 'aria-hidden', true );
     278                                $toggleButton.attr( 'aria-expanded', 'false' );
     279                                $cancelButton.attr( 'aria-expanded', 'false' );
     280                                $form.attr( 'aria-hidden', 'true' );
     281                                /*
     282                                 * If the Cancel button has been clicked, bring the focus back
     283                                 * to the toggle button so users relying on screen readers don't
     284                                 * lose their place.
     285                                 */
     286                                if ( $target.hasClass( 'community-events-cancel' ) ) {
     287                                        $toggleButton.focus();
     288                                }
    274289                        } else {
    275                                 $toggleButton.attr( 'aria-expanded', true );
    276                                 $cancelButton.attr( 'aria-expanded', true );
    277                                 $form.attr( 'aria-hidden', false );
     290                                $toggleButton.attr( 'aria-expanded', 'true' );
     291                                $cancelButton.attr( 'aria-expanded', 'true' );
     292                                $form.attr( 'aria-hidden', 'false' );
    278293                        }
    279294                },
    280295
    … …  
    287302                 */
    288303                getEvents: function( requestParams ) {
    289304                        var initiatedBy,
    290                             app = this,
    291                             $spinner = $( '.community-events-form' ).children( '.spinner' );
     305                                app = this,
     306                                $spinner = $( '.community-events-form' ).children( '.spinner' );
    292307
    293308                        requestParams          = requestParams || {};
    294309                        requestParams._wpnonce = communityEventsData.nonce;
    … …  
    314329                                                         * it should fail silently. Otherwise, the error could confuse and/or
    315330                                                         * annoy them.
    316331                                                         */
    317 
    318332                                                        delete response.error;
    319333                                                }
    320334                                        }
    … …  
    322336                                })
    323337
    324338                                .fail( function() {
    325                                         app.renderEventsTemplate( {
     339                                        app.renderEventsTemplate({
    326340                                                'location' : false,
    327341                                                'error'    : true
    328342                                        }, initiatedBy );
    … …  
    334348                 *
    335349                 * @since 4.8.0
    336350                 *
    337                  * @param {Object} templateParams The various parameters that will get passed to wp.template
     351                 * @param {Object} templateParams The various parameters that will get passed to wp.template.
    338352                 * @param {string} initiatedBy    'user' to indicate that this was triggered manually by the user;
    339353                 *                                'app' to indicate it was triggered automatically by the app itself.
    340354                 */
    341355                renderEventsTemplate: function( templateParams, initiatedBy ) {
    342356                        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' );
     357                                elementVisibility,
     358                                l10nPlaceholder  = /%(?:\d\$)?s/g, // Match `%s`, `%1$s`, `%2$s`, etc.
     359                                $locationMessage = $( '#community-events-location-message' ),
     360                                $results         = $( '.community-events-results' );
    347361
    348362                        /*
    349363                         * Hide all toggleable elements by default, to keep the logic simple.
    … …  
    350364                         * Otherwise, each block below would have to turn hide everything that
    351365                         * could have been shown at an earlier point.
    352366                         *
    353                          * The exception to that is that the .community-events container. It's hidden
     367                         * The exception to that is that the .community-events container is hidden
    354368                         * when the page is first loaded, because the content isn't ready yet,
    355369                         * but once we've reached this point, it should always be shown.
    356370                         */
    … …  
    380394                                        template = wp.template( 'community-events-no-upcoming-events' );
    381395                                        $results.html( template( templateParams ) );
    382396                                }
    383                                 wp.a11y.speak( communityEventsData.l10n.city_updated.replace( l10nPlaceholder, templateParams.location ) );
     397                                wp.a11y.speak( communityEventsData.l10n.city_updated.replace( l10nPlaceholder, templateParams.location.description ), 'assertive' );
    384398
    385399                                elementVisibility['#community-events-location-message'] = true;
    386400                                elementVisibility['.community-events-toggle-location']  = true;
    … …  
    405419
    406420                                elementVisibility['.community-events-errors']         = true;
    407421                                elementVisibility['.community-events-error-occurred'] = true;
    408 
    409422                        } else {
    410423                                $locationMessage.text( communityEventsData.l10n.enter_closest_city );
    411424
    … …  
    420433
    421434                        $( '.community-events-toggle-location' ).attr( 'aria-expanded', elementVisibility['.community-events-toggle-location'] );
    422435
    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 ) {
     436                        if ( templateParams.location ) {
     437                                // Hide the form when there's a valid location.
    431438                                app.toggleLocationForm( 'hide' );
     439
     440                                if ( 'user' === initiatedBy ) {
     441                                        /*
     442                                         * When the form is programmatically hidden after a user search,
     443                                         * bring the focus back to the toggle button so users relying
     444                                         * on screen readers don't lose their place.
     445                                         */
     446                                        $( '.community-events-toggle-location' ).focus();
     447                                }
    432448                        } else {
    433449                                app.toggleLocationForm( 'show' );
    434450                        }