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

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

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 ) { #>