WordPress-C
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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.
Built from https://develop.svn.wordpress.org/trunk@40789


git-svn-id: http://core.svn.wordpress.org/trunk@40647 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz 2017-05-19 04:01:41 +00:00
parent bd990d7c4e
commit daab579a88
8 changed files with 134 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
wp-admin/css/dashboard-rtl.css
View File

@ -323,10 +323,10 @@
} }
.community-events-errors[aria-hidden="true"], .community-events-errors[aria-hidden="true"],
.community-events-errors *[aria-hidden="true"], .community-events-errors [aria-hidden="true"],
.community-events-loading[aria-hidden="true"], .community-events-loading[aria-hidden="true"],
.community-events[aria-hidden="true"], .community-events[aria-hidden="true"],
.community-events *[aria-hidden="true"] { .community-events [aria-hidden="true"] {
display: none; display: none;
} }
@ -342,16 +342,20 @@
.community-events-form .regular-text { .community-events-form .regular-text {
width: 40%; width: 40%;
height: 28px; height: 29px;
margin: 0;
vertical-align: top;
} }
.community-events li.event-none { .community-events li.event-none {
border-right: 4px solid #0070AE; border-right: 4px solid #00a0d2;
} }
.community-events-form label { .community-events-form label {
display: inline-block; display: inline-block;
padding-bottom: 3px; vertical-align: top;
line-height: 28px;
height: 28px;
} }
.community-events .activity-block > p { .community-events .activity-block > p {
@ -359,19 +363,22 @@
display: inline; display: inline;
} }
.community-events-toggle-location {
vertical-align: middle;
}
#community-events-submit { #community-events-submit {
margin-right: 2px; margin-right: 3px;
margin-left: 3px;
} }
.community-events .button-link:hover, /* Needs higher specificity than #dashboard-widgets .button-link */
.community-events .button-link:active { #dashboard-widgets .community-events-cancel.button-link {
color: #00a0d2; vertical-align: top;
} /* Same properties as the submit button for cross-browsers alignment. */
line-height: 26px;
.community-events-cancel.button.button-link { height: 28px;
color: #0073aa;
text-decoration: underline; text-decoration: underline;
margin-right: 2px;
} }
.community-events ul { .community-events ul {
@ -1235,10 +1242,25 @@ a.rsswidget {
.community-events-toggle-location { .community-events-toggle-location {
height: 38px; height: 38px;
vertical-align: baseline;
} }
.community-events-form .regular-text { .community-events-form .regular-text {
height: 31px; height: 32px;
}
#community-events-submit {
margin-bottom: 0;
}
.community-events-form label,
#dashboard-widgets .community-events-cancel.button-link {
/* Same properties as the submit button for cross-browsers alignment. */
font-size: 14px;
line-height: normal;
height: auto;
padding: 6px 0;
border: 1px solid transparent;
} }
} }

2
wp-admin/css/dashboard-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

52
wp-admin/css/dashboard.css
View File

@ -323,10 +323,10 @@
} }
.community-events-errors[aria-hidden="true"], .community-events-errors[aria-hidden="true"],
.community-events-errors *[aria-hidden="true"], .community-events-errors [aria-hidden="true"],
.community-events-loading[aria-hidden="true"], .community-events-loading[aria-hidden="true"],
.community-events[aria-hidden="true"], .community-events[aria-hidden="true"],
.community-events *[aria-hidden="true"] { .community-events [aria-hidden="true"] {
display: none; display: none;
} }
@ -342,16 +342,20 @@
.community-events-form .regular-text { .community-events-form .regular-text {
width: 40%; width: 40%;
height: 28px; height: 29px;
margin: 0;
vertical-align: top;
} }
.community-events li.event-none { .community-events li.event-none {
border-left: 4px solid #0070AE; border-left: 4px solid #00a0d2;
} }
.community-events-form label { .community-events-form label {
display: inline-block; display: inline-block;
padding-bottom: 3px; vertical-align: top;
line-height: 28px;
height: 28px;
} }
.community-events .activity-block > p { .community-events .activity-block > p {
@ -359,19 +363,22 @@
display: inline; display: inline;
} }
.community-events-toggle-location {
vertical-align: middle;
}
#community-events-submit { #community-events-submit {
margin-left: 2px; margin-left: 3px;
margin-right: 3px;
} }
.community-events .button-link:hover, /* Needs higher specificity than #dashboard-widgets .button-link */
.community-events .button-link:active { #dashboard-widgets .community-events-cancel.button-link {
color: #00a0d2; vertical-align: top;
} /* Same properties as the submit button for cross-browsers alignment. */
line-height: 26px;
.community-events-cancel.button.button-link { height: 28px;
color: #0073aa;
text-decoration: underline; text-decoration: underline;
margin-left: 2px;
} }
.community-events ul { .community-events ul {
@ -1235,10 +1242,25 @@ a.rsswidget {
.community-events-toggle-location { .community-events-toggle-location {
height: 38px; height: 38px;
vertical-align: baseline;
} }
.community-events-form .regular-text { .community-events-form .regular-text {
height: 31px; height: 32px;
}
#community-events-submit {
margin-bottom: 0;
}
.community-events-form label,
#dashboard-widgets .community-events-cancel.button-link {
/* Same properties as the submit button for cross-browsers alignment. */
font-size: 14px;
line-height: normal;
height: auto;
padding: 6px 0;
border: 1px solid transparent;
} }
} }

2
wp-admin/css/dashboard.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
wp-admin/includes/dashboard.php
View File

@ -1173,7 +1173,7 @@ function wp_print_community_events_markup() {
<?php submit_button( __( 'Submit' ), 'secondary', 'community-events-submit', false ); ?> <?php submit_button( __( 'Submit' ), 'secondary', 'community-events-submit', false ); ?>
<button class="community-events-cancel button button-link" type="button" aria-expanded="false"> <button class="community-events-cancel button-link" type="button" aria-expanded="false">
<?php _e( 'Cancel' ); ?> <?php _e( 'Cancel' ); ?>
</button> </button>

76
wp-admin/js/dashboard.js
View File

@ -192,9 +192,10 @@ jQuery(document).ready( function($) {
jQuery( function( $ ) { jQuery( function( $ ) {
'use strict'; 'use strict';
var communityEventsData = window.communityEventsData || {}; var communityEventsData = window.communityEventsData || {},
app;
var app = window.wp.communityEvents = { app = window.wp.communityEvents = {
initialized: false, initialized: false,
model: null, model: null,
@ -212,7 +213,7 @@ jQuery( function( $ ) {
/* /*
* When JavaScript is disabled, the errors container is shown, so * When JavaScript is disabled, the errors container is shown, so
* that "This widget requires Javascript" message can be seen. * that "This widget requires JavaScript" message can be seen.
* *
* When JS is enabled, the container is hidden at first, and then * When JS is enabled, the container is hidden at first, and then
* revealed during the template rendering, if there actually are * revealed during the template rendering, if there actually are
@ -227,7 +228,7 @@ jQuery( function( $ ) {
* message. * message.
*/ */
$( '.community-events-errors' ) $( '.community-events-errors' )
.attr( 'aria-hidden', true ) .attr( 'aria-hidden', 'true' )
.removeClass( 'hide-if-js' ); .removeClass( 'hide-if-js' );
$container.on( 'click', '.community-events-toggle-location, .community-events-cancel', app.toggleLocationForm ); $container.on( 'click', '.community-events-toggle-location, .community-events-cancel', app.toggleLocationForm );
@ -235,7 +236,7 @@ jQuery( function( $ ) {
$container.on( 'submit', '.community-events-form', function( event ) { $container.on( 'submit', '.community-events-form', function( event ) {
event.preventDefault(); event.preventDefault();
app.getEvents( { app.getEvents({
location: $( '#community-events-location' ).val() location: $( '#community-events-location' ).val()
}); });
}); });
@ -255,26 +256,41 @@ jQuery( function( $ ) {
* @since 4.8.0 * @since 4.8.0
* *
* @param {event|string} action 'show' or 'hide' to specify a state; * @param {event|string} action 'show' or 'hide' to specify a state;
* Or an event object to flip between states * or an event object to flip between states.
*/ */
toggleLocationForm: function( action ) { toggleLocationForm: function( action ) {
var $toggleButton = $( '.community-events-toggle-location' ), var $toggleButton = $( '.community-events-toggle-location' ),
$cancelButton = $( '.community-events-cancel' ), $cancelButton = $( '.community-events-cancel' ),
$form = $( '.community-events-form' ); $form = $( '.community-events-form' ),
$target = $();
if ( 'object' === typeof action ) { if ( 'object' === typeof action ) {
// Strict comparison doesn't work in this case. // The action is the event object: get the clicked element.
$target = $( action.target );
/*
* Strict comparison doesn't work in this case because sometimes
* we explicitly pass a string as value of aria-expanded and
* sometimes a boolean as the result of an evaluation.
*/
action = 'true' == $toggleButton.attr( 'aria-expanded' ) ? 'hide' : 'show'; action = 'true' == $toggleButton.attr( 'aria-expanded' ) ? 'hide' : 'show';
} }
if ( 'hide' === action ) { if ( 'hide' === action ) {
$toggleButton.attr( 'aria-expanded', false ); $toggleButton.attr( 'aria-expanded', 'false' );
$cancelButton.attr( 'aria-expanded', false ); $cancelButton.attr( 'aria-expanded', 'false' );
$form.attr( 'aria-hidden', true ); $form.attr( 'aria-hidden', 'true' );
/*
* If the Cancel button has been clicked, bring the focus back
* to the toggle button so users relying on screen readers don't
* lose their place.
*/
if ( $target.hasClass( 'community-events-cancel' ) ) {
$toggleButton.focus();
}
} else { } else {
$toggleButton.attr( 'aria-expanded', true ); $toggleButton.attr( 'aria-expanded', 'true' );
$cancelButton.attr( 'aria-expanded', true ); $cancelButton.attr( 'aria-expanded', 'true' );
$form.attr( 'aria-hidden', false ); $form.attr( 'aria-hidden', 'false' );
} }
}, },
@ -314,7 +330,6 @@ jQuery( function( $ ) {
* it should fail silently. Otherwise, the error could confuse and/or * it should fail silently. Otherwise, the error could confuse and/or
* annoy them. * annoy them.
*/ */
delete response.error; delete response.error;
} }
} }
@ -322,7 +337,7 @@ jQuery( function( $ ) {
}) })
.fail( function() { .fail( function() {
app.renderEventsTemplate( { app.renderEventsTemplate({
'location' : false, 'location' : false,
'error' : true 'error' : true
}, initiatedBy ); }, initiatedBy );
@ -334,7 +349,7 @@ jQuery( function( $ ) {
* *
* @since 4.8.0 * @since 4.8.0
* *
* @param {Object} templateParams The various parameters that will get passed to wp.template * @param {Object} templateParams The various parameters that will get passed to wp.template.
* @param {string} initiatedBy 'user' to indicate that this was triggered manually by the user; * @param {string} initiatedBy 'user' to indicate that this was triggered manually by the user;
* 'app' to indicate it was triggered automatically by the app itself. * 'app' to indicate it was triggered automatically by the app itself.
*/ */
@ -342,6 +357,7 @@ jQuery( function( $ ) {
var template, var template,
elementVisibility, elementVisibility,
l10nPlaceholder = /%(?:\d\$)?s/g, // Match `%s`, `%1$s`, `%2$s`, etc. l10nPlaceholder = /%(?:\d\$)?s/g, // Match `%s`, `%1$s`, `%2$s`, etc.
$toggleButton = $( '.community-events-toggle-location' ),
$locationMessage = $( '#community-events-location-message' ), $locationMessage = $( '#community-events-location-message' ),
$results = $( '.community-events-results' ); $results = $( '.community-events-results' );
@ -350,7 +366,7 @@ jQuery( function( $ ) {
* Otherwise, each block below would have to turn hide everything that * Otherwise, each block below would have to turn hide everything that
* could have been shown at an earlier point. * could have been shown at an earlier point.
* *
* The exception to that is that the .community-events container. It's hidden * The exception to that is that the .community-events container is hidden
* when the page is first loaded, because the content isn't ready yet, * when the page is first loaded, because the content isn't ready yet,
* but once we've reached this point, it should always be shown. * but once we've reached this point, it should always be shown.
*/ */
@ -380,7 +396,7 @@ jQuery( function( $ ) {
template = wp.template( 'community-events-no-upcoming-events' ); template = wp.template( 'community-events-no-upcoming-events' );
$results.html( template( templateParams ) ); $results.html( template( templateParams ) );
} }
wp.a11y.speak( communityEventsData.l10n.city_updated.replace( l10nPlaceholder, templateParams.location ) ); wp.a11y.speak( communityEventsData.l10n.city_updated.replace( l10nPlaceholder, templateParams.location.description ), 'assertive' );
elementVisibility['#community-events-location-message'] = true; elementVisibility['#community-events-location-message'] = true;
elementVisibility['.community-events-toggle-location'] = true; elementVisibility['.community-events-toggle-location'] = true;
@ -405,7 +421,6 @@ jQuery( function( $ ) {
elementVisibility['.community-events-errors'] = true; elementVisibility['.community-events-errors'] = true;
elementVisibility['.community-events-error-occurred'] = true; elementVisibility['.community-events-error-occurred'] = true;
} else { } else {
$locationMessage.text( communityEventsData.l10n.enter_closest_city ); $locationMessage.text( communityEventsData.l10n.enter_closest_city );
@ -418,17 +433,20 @@ jQuery( function( $ ) {
$( element ).attr( 'aria-hidden', ! isVisible ); $( element ).attr( 'aria-hidden', ! isVisible );
}); });
$( '.community-events-toggle-location' ).attr( 'aria-expanded', elementVisibility['.community-events-toggle-location'] ); $toggleButton.attr( 'aria-expanded', elementVisibility['.community-events-toggle-location'] );
/* if ( templateParams.location ) {
* During the initial page load, the location form should be hidden // Hide the form when there's a valid location.
* by default if the user has saved a valid location during a previous
* session. It's safe to assume that they want to continue using that
* location, and displaying the form would unnecessarily clutter the
* widget.
*/
if ( 'app' === initiatedBy && templateParams.location ) {
app.toggleLocationForm( 'hide' ); app.toggleLocationForm( 'hide' );
if ( 'user' === initiatedBy ) {
/*
* When the form is programmatically hidden after a user search,
* bring the focus back to the toggle button so users relying
* on screen readers don't lose their place.
*/
$toggleButton.focus();
}
} else { } else {
app.toggleLocationForm( 'show' ); app.toggleLocationForm( 'show' );
} }

2
wp-admin/js/dashboard.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
wp-includes/version.php
View File

@ -4,7 +4,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '4.8-beta1-40788'; $wp_version = '4.8-beta1-40789';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.