WordPress.org

Make WordPress Core

Changeset 40789


Ignore:
Timestamp:
05/19/17 04:00:32 (8 days 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.