vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-09-17 06:20:25 +00:00
Code Issues Actions Packages Projects 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
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-admin/css/common.css
+4
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,
src/wp-admin/css/themes.css
+9
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;
src/wp-admin/includes/class-wp-ms-themes-list-table.php
+1 -1
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
);
src/wp-admin/includes/class-wp-plugins-list-table.php
+1 -1
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
);
src/wp-admin/themes.php
+5 -7
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 ) { #>