WordPress.org

Make WordPress Core

Ticket #40735: 40735.2.diff

File 40735.2.diff, 8.2 KB (added by coreymckrill, 3 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        
    195         var communityEventsData = window.communityEventsData || {};
    196194
    197         var app = window.wp.communityEvents = {
     195        var communityEventsData = window.communityEventsData || {},
     196                app;
     197
     198        app = window.wp.communityEvents = {
    198199                initialized: false,
    199200                model: null,
    200201
     
    212213
    213214                        /*
    214215                         * When JavaScript is disabled, the errors container is shown, so
    215                          * that "This widget requires Javascript" message can be seen.
     216                         * that "This widget requires JavaScript" message can be seen.
    216217                         *
    217218                         * When JS is enabled, the container is hidden at first, and then
    218219                         * revealed during the template rendering, if there actually are
     
    227228                         * message.
    228229                         */
    229230                        $( '.community-events-errors' )
    230                                 .attr( 'aria-hidden', true )
     231                                .attr( 'aria-hidden', 'true' )
    231232                                .removeClass( 'hide-if-js' );
    232233
    233234                        $container.on( 'click', '.community-events-toggle-location, .community-events-cancel', app.toggleLocationForm );
     
    235236                        $container.on( 'submit', '.community-events-form', function( event ) {
    236237                                event.preventDefault();
    237238
    238                                 app.getEvents( {
     239                                app.getEvents({
    239240                                        location: $( '#community-events-location' ).val()
    240241                                });
    241242                        });
     
    255256                 * @since 4.8.0
    256257                 *
    257258                 * @param {event|string} action 'show' or 'hide' to specify a state;
    258                  *                              Or an event object to flip between states
     259                 *                              or an event object to flip between states.
    259260                 */
    260261                toggleLocationForm: function( action ) {
    261262                        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       = $();
    264266
    265267                        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                                 */
    267275                                action = 'true' == $toggleButton.attr( 'aria-expanded' ) ? 'hide' : 'show';
    268276                        }
    269277
    270278                        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                                }
    274290                        } 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' );
    278294                        }
    279295                },
    280296
     
    287303                 */
    288304                getEvents: function( requestParams ) {
    289305                        var initiatedBy,
    290                             app = this,
    291                             $spinner = $( '.community-events-form' ).children( '.spinner' );
     306                                app = this,
     307                                $spinner = $( '.community-events-form' ).children( '.spinner' );
    292308
    293309                        requestParams          = requestParams || {};
    294310                        requestParams._wpnonce = communityEventsData.nonce;
     
    314330                                                         * it should fail silently. Otherwise, the error could confuse and/or
    315331                                                         * annoy them.
    316332                                                         */
    317 
    318333                                                        delete response.error;
    319334                                                }
    320335                                        }
     
    322337                                })
    323338
    324339                                .fail( function() {
    325                                         app.renderEventsTemplate( {
     340                                        app.renderEventsTemplate({
    326341                                                'location' : false,
    327342                                                'error'    : true
    328343                                        }, initiatedBy );
     
    334349                 *
    335350                 * @since 4.8.0
    336351                 *
    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.
    338353                 * @param {string} initiatedBy    'user' to indicate that this was triggered manually by the user;
    339354                 *                                'app' to indicate it was triggered automatically by the app itself.
    340355                 */
    341356                renderEventsTemplate: function( templateParams, initiatedBy ) {
    342357                        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' );
    347363
    348364                        /*
    349365                         * Hide all toggleable elements by default, to keep the logic simple.
     
    350366                         * Otherwise, each block below would have to turn hide everything that
    351367                         * could have been shown at an earlier point.
    352368                         *
    353                          * The exception to that is that the .community-events container. It's hidden
     369                         * The exception to that is that the .community-events container is hidden
    354370                         * when the page is first loaded, because the content isn't ready yet,
    355371                         * but once we've reached this point, it should always be shown.
    356372                         */
     
    380396                                        template = wp.template( 'community-events-no-upcoming-events' );
    381397                                        $results.html( template( templateParams ) );
    382398                                }
    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' );
    384400
    385401                                elementVisibility['#community-events-location-message'] = true;
    386402                                elementVisibility['.community-events-toggle-location']  = true;
     
    405421
    406422                                elementVisibility['.community-events-errors']         = true;
    407423                                elementVisibility['.community-events-error-occurred'] = true;
    408 
    409424                        } else {
    410425                                $locationMessage.text( communityEventsData.l10n.enter_closest_city );
    411426
     
    418433                                $( element ).attr( 'aria-hidden', ! isVisible );
    419434                        });
    420435
    421                         $( '.community-events-toggle-location' ).attr( 'aria-expanded', elementVisibility['.community-events-toggle-location'] );
     436                        $toggleButton.attr( 'aria-expanded', elementVisibility['.community-events-toggle-location'] );
    422437
    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.
    431440                                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                                }
    432450                        } else {
    433451                                app.toggleLocationForm( 'show' );
    434452                        }