Changeset 36964 for trunk/src/wp-admin/includes/update.php

Timestamp:

03/10/2016 10:36:25 PM (11 years ago)

Author:

afercia

Message:

Accessibility: Improve accessibility for the Plugin details modal.

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.

File:

• trunk/src/wp-admin/includes/update.php (modified) (6 diffs)

trunk/src/wp-admin/includes/update.php

@@ -340 +340 @@
                 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 ),
@@ -349 +349 @@
                 } 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 ),
@@ -358 +358 @@
                 } 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 ),
@@ -470 +470 @@
         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 ),
@@ -479 +479 @@
         } 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 ),
@@ -488 +488 @@
         } 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 ),