sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Upgrade/Install: Use ARIA button class on plugin and theme auto-updates action links

Browse Source 
According to the [accesability guidelines](https://developer.wordpress.org/coding-standards/wordpress-coding-standards/accessibility/#semantics-for-controls), the control should be a link when JavaScript is not available and a button the rest of the time.

In addition, handlers were added for spacebar usage, and some changes to the a11y speak verbiage.

Fixes #50516.
Props ryokuhi, audrasjb, afercia, whyisjake/




git-svn-id: https://develop.svn.wordpress.org/trunk@48418 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Jake Spurlock 2020-07-10 06:16:06 +00:00
parent bf93e9699f
commit 1b251feeec
6 changed files with 70 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/js/_enqueues/wp/updates.js
View File

@ -2677,44 +2677,63 @@
$( window ).on( 'beforeunload', wp.updates.beforeunload );
/**
* Click handler for enabling and disabling plugin and theme auto-updates.
* Prevents the page form scrolling when activating auto-updates with the Spacebar key.
*
* @since 5.5.0
*/
$document.on( 'click', '.column-auto-updates a.toggle-auto-update, .theme-overlay a.toggle-auto-update', function( event ) {
var data, asset, type, $parent;
var $anchor = $( this ),
action = $anchor.attr( 'data-wp-action' ),
$label = $anchor.find( '.label' );
$document.on( 'keydown', '.column-auto-updates .toggle-auto-update, .theme-overlay .toggle-auto-update', function( event ) {
if ( 32 === event.which ) {
event.preventDefault();
}
} );
/**
* Click and keyup handler for enabling and disabling plugin and theme auto-updates.
*
* These controls can be either links or buttons. When JavaScript is enabled,
* we want them to behave like buttons. An ARIA role `button` is added via
* the JavaScript that targets elements with the CSS class `aria-button-if-js`.
*
* @since 5.5.0
*/
$document.on( 'click keyup', '.column-auto-updates .toggle-auto-update, .theme-overlay .toggle-auto-update', function( event ) {
var data, asset, type, $parent,
$toggler = $( this ),
action = $toggler.attr( 'data-wp-action' ),
$label = $toggler.find( '.label' );
if ( 'keyup' === event.type && 32 !== event.which ) {
return;
}
if ( 'themes' !== pagenow ) {
$parent = $anchor.closest( '.column-auto-updates' );
$parent = $toggler.closest( '.column-auto-updates' );
} else {
$parent = $anchor.closest( '.theme-autoupdate' );
$parent = $toggler.closest( '.theme-autoupdate' );
}
event.preventDefault();
// Prevent multiple simultaneous requests.
if ( $anchor.attr( 'data-doing-ajax' ) === 'yes' ) {
if ( $toggler.attr( 'data-doing-ajax' ) === 'yes' ) {
return;
}
$anchor.attr( 'data-doing-ajax', 'yes' );
$toggler.attr( 'data-doing-ajax', 'yes' );
switch ( pagenow ) {
case 'plugins':
case 'plugins-network':
type = 'plugin';
asset = $anchor.closest( 'tr' ).attr( 'data-plugin' );
asset = $toggler.closest( 'tr' ).attr( 'data-plugin' );
break;
case 'themes-network':
type = 'theme';
asset = $anchor.closest( 'tr' ).attr( 'data-slug' );
asset = $toggler.closest( 'tr' ).attr( 'data-slug' );
break;
case 'themes':
type = 'theme';
asset = $anchor.attr( 'data-slug' );
asset = $toggler.attr( 'data-slug' );
break;
}
@ -2728,7 +2747,7 @@
$label.text( __( 'Disabling...' ) );
}
$anchor.find( '.dashicons-update' ).removeClass( 'hidden' );
$toggler.find( '.dashicons-update' ).removeClass( 'hidden' );
data = {
action: 'toggle-auto-updates',
@ -2740,8 +2759,8 @@
$.post( window.ajaxurl, data )
.done( function( response ) {
var $enabled, $disabled, enabledNumber, disabledNumber, errorMessage;
var href = $anchor.attr( 'href' );
var $enabled, $disabled, enabledNumber, disabledNumber, errorMessage,
href = $toggler.attr( 'href' );
if ( ! response.success ) {
// if WP returns 0 for response (which can happen in a few cases),
@ -2784,25 +2803,27 @@
}
if ( 'enable' === action ) {
href = href.replace( 'action=enable-auto-update', 'action=disable-auto-update' );
$anchor.attr( {
'data-wp-action': 'disable',
href: href
} );
// The toggler control can be either a link or a button.
if ( $toggler[ 0 ].hasAttribute( 'href' ) ) {
href = href.replace( 'action=enable-auto-update', 'action=disable-auto-update' );
$toggler.attr( 'href', href );
}
$toggler.attr( 'data-wp-action', 'disable' );
$label.text( __( 'Disable auto-updates' ) );
$parent.find( '.auto-update-time' ).removeClass( 'hidden' );
wp.a11y.speak( __( 'Enable auto-updates' ), 'polite' );
wp.a11y.speak( __( 'Auto-updates enabled' ) );
} else {
href = href.replace( 'action=disable-auto-update', 'action=enable-auto-update' );
$anchor.attr( {
'data-wp-action': 'enable',
href: href
} );
// The toggler control can be either a link or a button.
if ( $toggler[ 0 ].hasAttribute( 'href' ) ) {
href = href.replace( 'action=disable-auto-update', 'action=enable-auto-update' );
$toggler.attr( 'href', href );
}
$toggler.attr( 'data-wp-action', 'enable' );
$label.text( __( 'Enable auto-updates' ) );
$parent.find( '.auto-update-time' ).addClass( 'hidden' );
wp.a11y.speak( __( 'Auto-updates disabled' ), 'polite' );
wp.a11y.speak( __( 'Auto-updates disabled' ) );
}
$document.trigger( 'wp-auto-update-setting-changed', { state: action, type: type, asset: asset } );
@ -2816,7 +2837,7 @@
wp.a11y.speak( __( 'The request could not be completed.' ), 'polite' );
} )
.always( function() {
$anchor.removeAttr( 'data-doing-ajax' ).find( '.dashicons-update' ).addClass( 'hidden' );
$toggler.removeAttr( 'data-doing-ajax' ).find( '.dashicons-update' ).addClass( 'hidden' );
} );
}
);

4
src/wp-admin/css/common.css
View File

@ -1499,6 +1499,10 @@ div.error {
animation: rotation 2s infinite linear;
}
.theme-overlay .theme-autoupdate .dashicons-update.spin {
margin-right: 3px;
}
/* Updated icon (check mark). */
.updated-message p:before,
.installed p:before,

9
src/wp-admin/css/themes.css
View File

@ -684,6 +684,15 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
text-decoration: none;
}
.theme-overlay .toggle-auto-update {
/* Better align spin icon and text. */
display: inline-flex;
align-items: center;
/* Prevents content after the auto-update toggler from jumping down and up. */
min-height: 20px; /* Same height as the spinning dashicon. */
vertical-align: top;
}
.theme-overlay .theme-description {
color: #555;
font-size: 15px;

2
src/wp-admin/includes/class-wp-ms-themes-list-table.php
View File

@ -744,7 +744,7 @@ class WP_MS_Themes_List_Table extends WP_List_Table {
$url = add_query_arg( $query_args, 'themes.php' );
$html[] = sprintf(
'<a href="%s" class="toggle-auto-update" data-wp-action="%s">',
'<a href="%s" class="toggle-auto-update aria-button-if-js" data-wp-action="%s">',
wp_nonce_url( $url, 'updates' ),
$action
);

2
src/wp-admin/includes/class-wp-plugins-list-table.php
View File

@ -1076,7 +1076,7 @@ class WP_Plugins_List_Table extends WP_List_Table {
$url = add_query_arg( $query_args, 'plugins.php' );
$html[] = sprintf(
'<a href="%s" class="toggle-auto-update" data-wp-action="%s">',
'<a href="%s" class="toggle-auto-update aria-button-if-js" data-wp-action="%s">',
wp_nonce_url( $url, 'updates' ),
$action
);

12
src/wp-admin/themes.php
View File

@ -562,14 +562,12 @@ function wp_theme_auto_update_setting_template() {
$template = '
<div class="theme-autoupdate">
<# if ( data.autoupdate ) { #>
<a href="{{{ data.actions.autoupdate }}}" class="toggle-auto-update" data-slug="{{ data.id }}" data-wp-action="disable">
<span class="dashicons dashicons-update spin hidden" aria-hidden="true"></span>
<span class="label">' . __( 'Disable auto-updates' ) . '</span>
</a>
<button type="button" class="toggle-auto-update button-link" data-slug="{{ data.id }}" data-wp-action="disable">
<span class="dashicons dashicons-update spin hidden" aria-hidden="true"></span><span class="label">' . __( 'Disable auto-updates' ) . '</span>
</button>
<# } else { #>
<a href="{{{ data.actions.autoupdate }}}" class="toggle-auto-update" data-slug="{{ data.id }}" data-wp-action="enable">
<span class="dashicons dashicons-update spin hidden" aria-hidden="true"></span>
<span class="label">' . __( 'Enable auto-updates' ) . '</span>
<button type="button" class="toggle-auto-update button-link" data-slug="{{ data.id }}" data-wp-action="enable">
<span class="dashicons dashicons-update spin hidden" aria-hidden="true"></span><span class="label">' . __( 'Enable auto-updates' ) . '</span>
</a>
<# } #>
<# if ( data.hasUpdate ) { #>