vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-06-28 22:30:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Accessibility: Improve accessibility for the Plugin details modal.

Browse Source 
The plugin details modal can be invoked from several screens. There's now a new
`.open-plugin-details-modal` CSS class to be used in combination with the
`.thickbox` CSS class that adds everything needed for accessibility.

- Adds an ARIA role `dialog` and an `aria-label` attribute to the modal
- Adds a `title` attribute to the iframe inside the modal
- Constrains tabbing within the modal
- Restores focus back in a proper place when closing the modal

Also, improves a bit the native Thickbox implementation: it should probably be
replaced with some more modern tool but at least keyboard focus should be moved
inside the modal.

Fixes #33305.

git-svn-id: https://develop.svn.wordpress.org/trunk@36964 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2016-03-10 22:36:25 +00:00
parent fd7c2fef96
commit 2a2539402f
12 changed files with 203 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/wp-admin/includes/update.php
View File

@@ -339,7 +339,7 @@ function wp_plugin_update_row( $file, $plugin_data ) {
if ( ! current_user_can( 'update_plugins' ) ) {
/* translators: 1: plugin name, 2: details URL, 3: accessibility text, 4: version number */
printf( __( 'There is a new version of %1$s available. <a href="%2$s" class="thickbox" aria-label="%3$s">View version %4$s details</a>.' ),
printf( __( 'There is a new version of %1$s available. <a href="%2$s" class="thickbox open-plugin-details-modal" aria-label="%3$s">View version %4$s details</a>.' ),
$plugin_name,
esc_url( $details_url ),
/* translators: 1: plugin name, 2: version number */
@@ -348,7 +348,7 @@ function wp_plugin_update_row( $file, $plugin_data ) {
);
} elseif ( empty( $r->package ) ) {
/* translators: 1: plugin name, 2: details URL, 3: accessibility text, 4: version number */
printf( __( 'There is a new version of %1$s available. <a href="%2$s" class="thickbox" aria-label="%3$s">View version %4$s details</a>. <em>Automatic update is unavailable for this plugin.</em>' ),
printf( __( 'There is a new version of %1$s available. <a href="%2$s" class="thickbox open-plugin-details-modal" aria-label="%3$s">View version %4$s details</a>. <em>Automatic update is unavailable for this plugin.</em>' ),
$plugin_name,
esc_url( $details_url ),
/* translators: 1: plugin name, 2: version number */
@@ -357,7 +357,7 @@ function wp_plugin_update_row( $file, $plugin_data ) {
);
} else {
/* translators: 1: plugin name, 2: details URL, 3: accessibility text, 4: version number, 5: update URL, 6: accessibility text */
printf( __( 'There is a new version of %1$s available. <a href="%2$s" class="thickbox" aria-label="%3$s">View version %4$s details</a> or <a href="%5$s" class="update-link" aria-label="%6$s">update now</a>.' ),
printf( __( 'There is a new version of %1$s available. <a href="%2$s" class="thickbox open-plugin-details-modal" aria-label="%3$s">View version %4$s details</a> or <a href="%5$s" class="update-link" aria-label="%6$s">update now</a>.' ),
$plugin_name,
esc_url( $details_url ),
/* translators: 1: plugin name, 2: version number */
@@ -469,7 +469,7 @@ function wp_theme_update_row( $theme_key, $theme ) {
echo '<tr class="plugin-update-tr' . $active . '" id="' . esc_attr( $theme->get_stylesheet() . '-update' ) . '" data-slug="' . esc_attr( $theme->get_stylesheet() ) . '"><td colspan="' . $wp_list_table->get_column_count() . '" class="plugin-update colspanchange"><div class="update-message">';
if ( ! current_user_can('update_themes') ) {
/* translators: 1: theme name, 2: details URL, 3: accessibility text, 4: version number */
printf( __( 'There is a new version of %1$s available. <a href="%2$s" class="thickbox" aria-label="%3$s">View version %4$s details</a>.'),
printf( __( 'There is a new version of %1$s available. <a href="%2$s" class="thickbox open-plugin-details-modal" aria-label="%3$s">View version %4$s details</a>.'),
$theme_name,
esc_url( $details_url ),
/* translators: 1: theme name, 2: version number */
@@ -478,7 +478,7 @@ function wp_theme_update_row( $theme_key, $theme ) {
);
} elseif ( empty( $r['package'] ) ) {
/* translators: 1: theme name, 2: details URL, 3: accessibility text, 4: version number */
printf( __( 'There is a new version of %1$s available. <a href="%2$s" class="thickbox" aria-label="%3$s">View version %4$s details</a>. <em>Automatic update is unavailable for this theme.</em>' ),
printf( __( 'There is a new version of %1$s available. <a href="%2$s" class="thickbox open-plugin-details-modal" aria-label="%3$s">View version %4$s details</a>. <em>Automatic update is unavailable for this theme.</em>' ),
$theme_name,
esc_url( $details_url ),
/* translators: 1: theme name, 2: version number */
@@ -487,7 +487,7 @@ function wp_theme_update_row( $theme_key, $theme ) {
);
} else {
/* translators: 1: theme name, 2: details URL, 3: accessibility text, 4: version number, 5: update URL, 6: accessibility text */
printf( __( 'There is a new version of %1$s available. <a href="%2$s" class="thickbox" aria-label="%3$s">View version %4$s details</a> or <a href="%5$s" class="update-link" aria-label="%6$s">update now</a>.' ),
printf( __( 'There is a new version of %1$s available. <a href="%2$s" class="thickbox open-plugin-details-modal" aria-label="%3$s">View version %4$s details</a> or <a href="%5$s" class="update-link" aria-label="%6$s">update now</a>.' ),
$theme_name,
esc_url( $details_url ),
/* translators: 1: theme name, 2: version number */