WordPress.org
Get WordPress

Make WordPress Core

Changeset 40789


Ignore:
Timestamp:
05/19/2017 04:00:32 AM (8 years ago)
Author:
azaozz
Message:

Dashboard:

  • Close the form after obtaining a valid location.
  • Fix focusing the toggle button after closing the form.
  • Fix aria attribute values.
  • Fix positions in IE11.
  • Some JS and CSS cleanup.

Props afercia, coreymckrill.
Fixes #40735.

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/dashboard.css

    r40643 r40789  
    324324
    325325.community-events-errors[aria-hidden="true"],
    326 .community-events-errors *[aria-hidden="true"],
     326.community-events-errors [aria-hidden="true"],
    327327.community-events-loading[aria-hidden="true"],
    328328.community-events[aria-hidden="true"],
    329 .community-events *[aria-hidden="true"] {
     329.community-events [aria-hidden="true"] {
    330330    display: none;
    331331}
    … …  
    343343.community-events-form .regular-text {
    344344    width: 40%;
    345     height: 28px;
     345    height: 29px;
     346    margin: 0;
     347    vertical-align: top;
    346348}
    347349
    348350.community-events li.event-none {
    349     border-left: 4px solid #0070AE;
     351    border-left: 4px solid #00a0d2;
    350352}
    351353
    352354.community-events-form label {
    353355    display: inline-block;
    354     padding-bottom: 3px;
     356    vertical-align: top;
     357    line-height: 28px;
     358    height: 28px;
    355359}
    356360
    … …  
    360364}
    361365
     366.community-events-toggle-location {
     367    vertical-align: middle;
     368}
     369
    362370#community-events-submit {
    363     margin-left: 2px;
    364 }
    365 
    366 .community-events .button-link:hover,
    367 .community-events .button-link:active {
    368     color: #00a0d2;
    369 }
    370 
    371 .community-events-cancel.button.button-link {
    372     color: #0073aa;
     371    margin-left: 3px;
     372    margin-right: 3px;
     373}
     374
     375/* Needs higher specificity than #dashboard-widgets .button-link */
     376#dashboard-widgets .community-events-cancel.button-link {
     377    vertical-align: top;
     378    /* Same properties as the submit button for cross-browsers alignment. */
     379    line-height: 26px;
     380    height: 28px;
    373381    text-decoration: underline;
    374     margin-left: 2px;
    375382}
    376383
    … …  
    12361243    .community-events-toggle-location {
    12371244        height: 38px;
     1245        vertical-align: baseline;
    12381246    }
    12391247
    12401248    .community-events-form .regular-text {
    1241         height: 31px;
     1249        height: 32px;
     1250    }
     1251
     1252    #community-events-submit {
     1253        margin-bottom: 0;
     1254    }
     1255
     1256    .community-events-form label,
     1257    #dashboard-widgets .community-events-cancel.button-link {
     1258        /* Same properties as the submit button for cross-browsers alignment. */
     1259        font-size: 14px;
     1260        line-height: normal;
     1261        height: auto;
     1262        padding: 6px 0;
     1263        border: 1px solid transparent;
    12421264    }
    12431265}

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

    r40776 r40789  
    11741174                <?php submit_button( __( 'Submit' ), 'secondary', 'community-events-submit', false ); ?>
    11751175
    1176                 <button class="community-events-cancel button button-link" type="button" aria-expanded="false">
     1176                <button class="community-events-cancel button-link" type="button" aria-expanded="false">
    11771177                    <?php _e( 'Cancel' ); ?>
    11781178                </button>

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

    r40607 r40789  
    192192jQuery( function( $ ) {
    193193    'use strict';
    194    
    195     var communityEventsData = window.communityEventsData || {};
    196 
    197     var app = window.wp.communityEvents = {
     194
     195    var communityEventsData = window.communityEventsData || {},
     196        app;
     197
     198    app = window.wp.communityEvents = {
    198199        initialized: false,
    199200        model: null,
    … …  
    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
    … …  
    228229             */
    229230            $( '.community-events-errors' )
    230                 .attr( 'aria-hidden', true )
     231                .attr( 'aria-hidden', 'true' )
    231232                .removeClass( 'hide-if-js' );
    232233
    … …  
    236237                event.preventDefault();
    237238
    238                 app.getEvents( {
     239                app.getEvents({
    239240                    location: $( '#community-events-location' ).val()
    240241                });
    … …  
    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        },
    … …  
    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 || {};
    … …  
    315331                             * annoy them.
    316332                             */
    317 
    318333                            delete response.error;
    319334                        }
    … …  
    323338
    324339                .fail( function() {
    325                     app.renderEventsTemplate( {
     340                    app.renderEventsTemplate({
    326341                        'location' : false,
    327342                        'error'    : true
    … …  
    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.
    … …  
    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            /*
    … …  
    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.
    … …  
    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;
    … …  
    406422                elementVisibility['.community-events-errors']         = true;
    407423                elementVisibility['.community-events-error-occurred'] = true;
    408 
    409424            } else {
    410425                $locationMessage.text( communityEventsData.l10n.enter_closest_city );
    … …  
    419434            });
    420435
    421             $( '.community-events-toggle-location' ).attr( 'aria-expanded', elementVisibility['.community-events-toggle-location'] );
    422 
    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            $toggleButton.attr( 'aria-expanded', elementVisibility['.community-events-toggle-location'] );
     437
     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' );
Note: See TracChangeset for help on using the changeset viewer.