WordPress.org

Make WordPress Core


Ignore:
Timestamp:
03/10/2016 10:36:25 PM (4 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:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/includes/update.php

    r36850 r36964  
    340340        if ( ! current_user_can( 'update_plugins' ) ) {
    341341            /* translators: 1: plugin name, 2: details URL, 3: accessibility text, 4: version number */
    342             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>.' ),
     342            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>.' ),
    343343                $plugin_name,
    344344                esc_url( $details_url ),
     
    349349        } elseif ( empty( $r->package ) ) {
    350350            /* translators: 1: plugin name, 2: details URL, 3: accessibility text, 4: version number */
    351             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>' ),
     351            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>' ),
    352352                $plugin_name,
    353353                esc_url( $details_url ),
     
    358358        } else {
    359359            /* translators: 1: plugin name, 2: details URL, 3: accessibility text, 4: version number, 5: update URL, 6: accessibility text */
    360             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>.' ),
     360            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>.' ),
    361361                $plugin_name,
    362362                esc_url( $details_url ),
     
    470470    if ( ! current_user_can('update_themes') ) {
    471471        /* translators: 1: theme name, 2: details URL, 3: accessibility text, 4: version number */
    472         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>.'),
     472        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>.'),
    473473            $theme_name,
    474474            esc_url( $details_url ),
     
    479479    } elseif ( empty( $r['package'] ) ) {
    480480        /* translators: 1: theme name, 2: details URL, 3: accessibility text, 4: version number */
    481         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>' ),
     481        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>' ),
    482482            $theme_name,
    483483            esc_url( $details_url ),
     
    488488    } else {
    489489        /* translators: 1: theme name, 2: details URL, 3: accessibility text, 4: version number, 5: update URL, 6: accessibility text */
    490         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>.' ),
     490        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>.' ),
    491491            $theme_name,
    492492            esc_url( $details_url ),
Note: See TracChangeset for help on using the changeset viewer.