mirror of
https://github.com/gosticks/wordpress-develop.git
synced 2026-08-11 20:30:23 +00:00
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. git-svn-id: https://develop.svn.wordpress.org/trunk@36964 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
@@ -139,7 +139,7 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
|
||||
'height' => 550
|
||||
);
|
||||
|
||||
$plugin_link = '<a href="' . esc_url( add_query_arg( $url_args, network_admin_url( 'plugin-install.php' ) ) ) . '" class="thickbox">WordPress REST API</a>';
|
||||
$plugin_link = '<a href="' . esc_url( add_query_arg( $url_args, network_admin_url( 'plugin-install.php' ) ) ) . '" class="thickbox open-plugin-details-modal">WordPress REST API</a>';
|
||||
} else {
|
||||
$plugin_link = '<a href="https://wordpress.org/plugins/rest-api">WordPress REST API</a>';
|
||||
}
|
||||
|
||||
+40
-40
@@ -2814,67 +2814,67 @@ body.index-php #TB_ajaxWindowTitle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.about-php .tb-close-icon,
|
||||
body.plugin-install-php .tb-close-icon,
|
||||
body.import-php .tb-close-icon,
|
||||
body.plugins-php .tb-close-icon,
|
||||
body.update-core-php .tb-close-icon,
|
||||
body.index-php .tb-close-icon {
|
||||
/* only on these screens */
|
||||
.about-php #TB_closeWindowButton,
|
||||
.plugin-install-php #TB_closeWindowButton,
|
||||
.import-php #TB_closeWindowButton,
|
||||
.plugins-php #TB_closeWindowButton,
|
||||
.update-core-php #TB_closeWindowButton,
|
||||
.index-php #TB_closeWindowButton {
|
||||
left: auto;
|
||||
right: -30px;
|
||||
color: #eee;
|
||||
-webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
|
||||
transition: color .1s ease-in-out, background .1s ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
body.about-php #TB_closeWindowButton:hover,
|
||||
body.about-php #TB_closeWindowButton:focus,
|
||||
body.about-php #TB_closeWindowButton:focus .tb-close-icon,
|
||||
body.about-php .tb-close-icon:focus,
|
||||
body.about-php .tb-close-icon:hover,
|
||||
body.plugin-install-php #TB_closeWindowButton:hover,
|
||||
body.plugin-install-php #TB_closeWindowButton:focus,
|
||||
body.plugin-install-php #TB_closeWindowButton:focus .tb-close-icon,
|
||||
body.plugin-install-php .tb-close-icon:focus,
|
||||
body.plugin-install-php .tb-close-icon:hover,
|
||||
body.import-php #TB_closeWindowButton:hover,
|
||||
body.import-php #TB_closeWindowButton:focus,
|
||||
body.import-php #TB_closeWindowButton:focus .tb-close-icon,
|
||||
body.import-php .tb-close-icon:focus,
|
||||
body.import-php .tb-close-icon:hover,
|
||||
body.plugins-php #TB_closeWindowButton:hover,
|
||||
body.plugins-php #TB_closeWindowButton:focus,
|
||||
body.plugins-php #TB_closeWindowButton:focus .tb-close-icon,
|
||||
body.plugins-php .tb-close-icon:focus,
|
||||
body.plugins-php .tb-close-icon:hover,
|
||||
body.update-core-php #TB_closeWindowButton:hover,
|
||||
body.update-core-php #TB_closeWindowButton:focus,
|
||||
body.update-core-php #TB_closeWindowButton:focus .tb-close-icon,
|
||||
body.update-core-php .tb-close-icon:focus,
|
||||
body.update-core-php .tb-close-icon:hover,
|
||||
body.index-php #TB_closeWindowButton:focus,
|
||||
body.index-php #TB_closeWindowButton:focus .tb-close-icon,
|
||||
body.index-php .tb-close-icon:focus,
|
||||
body.index-php .tb-close-icon:hover {
|
||||
body.index-php #TB_closeWindowButton:hover,
|
||||
body.index-php #TB_closeWindowButton:focus {
|
||||
color: #00a0d2;
|
||||
outline: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
body.about-php .tb-close-icon:before,
|
||||
body.plugin-install-php .tb-close-icon:before,
|
||||
body.import-php .tb-close-icon:before,
|
||||
body.plugins-php .tb-close-icon:before,
|
||||
body.update-core-php .tb-close-icon:before,
|
||||
body.index-php .tb-close-icon:before {
|
||||
body.about-php .tb-close-icon,
|
||||
body.plugin-install-php .tb-close-icon,
|
||||
body.import-php .tb-close-icon,
|
||||
body.plugins-php .tb-close-icon,
|
||||
body.update-core-php .tb-close-icon,
|
||||
body.index-php .tb-close-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.about-php #TB_closeWindowButton:after,
|
||||
body.plugin-install-php #TB_closeWindowButton:after,
|
||||
body.import-php #TB_closeWindowButton:after,
|
||||
body.plugins-php #TB_closeWindowButton:after,
|
||||
body.update-core-php #TB_closeWindowButton:after,
|
||||
body.index-php #TB_closeWindowButton:after {
|
||||
content: "\f335";
|
||||
font-size: 32px;
|
||||
font: normal 32px/29px 'dashicons';
|
||||
speak: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* move plugin install close icon to top on narrow screens */
|
||||
@media screen and ( max-width: 830px ) {
|
||||
body.about-php .tb-close-icon,
|
||||
body.plugin-install-php .tb-close-icon,
|
||||
body.import-php .tb-close-icon,
|
||||
body.plugins-php .tb-close-icon,
|
||||
body.update-core-php .tb-close-icon,
|
||||
body.index-php .tb-close-icon {
|
||||
body.about-php #TB_closeWindowButton,
|
||||
body.plugin-install-php #TB_closeWindowButton,
|
||||
body.import-php #TB_closeWindowButton,
|
||||
body.plugins-php #TB_closeWindowButton,
|
||||
body.update-core-php #TB_closeWindowButton,
|
||||
body.index-php #TB_closeWindowButton {
|
||||
right: 0;
|
||||
top: -30px;
|
||||
}
|
||||
|
||||
@@ -101,7 +101,7 @@ if ( empty( $importers ) ) {
|
||||
if ( empty($action) ) {
|
||||
if ( is_main_site() ) {
|
||||
$action = '<a href="' . esc_url( network_admin_url( 'plugin-install.php?tab=plugin-information&plugin=' . $plugin_slug .
|
||||
'&from=import&TB_iframe=true&width=600&height=550' ) ) . '" class="thickbox" title="' .
|
||||
'&from=import&TB_iframe=true&width=600&height=550' ) ) . '" class="thickbox open-plugin-details-modal" title="' .
|
||||
esc_attr__('Install importer') . '">' . $data[0] . '</a>';
|
||||
} else {
|
||||
$action = $data[0];
|
||||
|
||||
@@ -476,7 +476,7 @@ class WP_Plugin_Install_List_Table extends WP_List_Table {
|
||||
'&TB_iframe=true&width=600&height=550' );
|
||||
|
||||
/* translators: 1: Plugin name and version. */
|
||||
$action_links[] = '<a href="' . esc_url( $details_link ) . '" class="thickbox" aria-label="' . esc_attr( sprintf( __( 'More information about %s' ), $name ) ) . '" data-title="' . esc_attr( $name ) . '">' . __( 'More Details' ) . '</a>';
|
||||
$action_links[] = '<a href="' . esc_url( $details_link ) . '" class="thickbox open-plugin-details-modal" aria-label="' . esc_attr( sprintf( __( 'More information about %s' ), $name ) ) . '" data-title="' . esc_attr( $name ) . '">' . __( 'More Details' ) . '</a>';
|
||||
|
||||
if ( !empty( $plugin['icons']['svg'] ) ) {
|
||||
$plugin_icon_url = $plugin['icons']['svg'];
|
||||
@@ -504,7 +504,7 @@ class WP_Plugin_Install_List_Table extends WP_List_Table {
|
||||
<div class="plugin-card-top">
|
||||
<div class="name column-name">
|
||||
<h3>
|
||||
<a href="<?php echo esc_url( $details_link ); ?>" class="thickbox">
|
||||
<a href="<?php echo esc_url( $details_link ); ?>" class="thickbox open-plugin-details-modal">
|
||||
<?php echo $title; ?>
|
||||
<img src="<?php echo esc_attr( $plugin_icon_url ) ?>" class="plugin-icon" alt="">
|
||||
</a>
|
||||
|
||||
@@ -742,7 +742,7 @@ class WP_Plugins_List_Table extends WP_List_Table {
|
||||
|
||||
// Details link using API info, if available
|
||||
if ( isset( $plugin_data['slug'] ) && current_user_can( 'install_plugins' ) ) {
|
||||
$plugin_meta[] = sprintf( '<a href="%s" class="thickbox" aria-label="%s" data-title="%s">%s</a>',
|
||||
$plugin_meta[] = sprintf( '<a href="%s" class="thickbox open-plugin-details-modal" aria-label="%s" data-title="%s">%s</a>',
|
||||
esc_url( network_admin_url( 'plugin-install.php?tab=plugin-information&plugin=' . $plugin_data['slug'] .
|
||||
'&TB_iframe=true&width=600&height=550' ) ),
|
||||
esc_attr( sprintf( __( 'More information about %s' ), $plugin_name ) ),
|
||||
|
||||
@@ -1245,7 +1245,7 @@ function wp_dashboard_plugins_output( $rss, $args = array() ) {
|
||||
|
||||
$ilink = wp_nonce_url('plugin-install.php?tab=plugin-information&plugin=' . $slug, 'install-plugin_' . $slug) . '&TB_iframe=true&width=600&height=800';
|
||||
echo '<li class="dashboard-news-plugin"><span>' . __( 'Popular Plugin' ) . ':</span> ' . esc_html( $raw_title ) .
|
||||
' <a href="' . $ilink . '" class="thickbox" aria-label="' .
|
||||
' <a href="' . $ilink . '" class="thickbox open-plugin-details-modal" aria-label="' .
|
||||
/* translators: %s: plugin name */
|
||||
esc_attr( sprintf( __( 'Install %s' ), $raw_title ) ) . '">(' . __( 'Install' ) . ')</a></li>';
|
||||
|
||||
|
||||
@@ -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 */
|
||||
|
||||
@@ -1,14 +1,23 @@
|
||||
/* global plugininstallL10n, tb_click */
|
||||
/* global plugininstallL10n, tb_click, tb_remove */
|
||||
|
||||
/* Plugin Browser Thickbox related JS*/
|
||||
var tb_position;
|
||||
jQuery( document ).ready( function( $ ) {
|
||||
|
||||
var tbWindow,
|
||||
$focusedBefore,
|
||||
$iframeBody,
|
||||
$tabbables,
|
||||
$firstTabbable,
|
||||
$lastTabbable;
|
||||
|
||||
tb_position = function() {
|
||||
var tbWindow = $( '#TB_window' ),
|
||||
width = $( window ).width(),
|
||||
var width = $( window ).width(),
|
||||
H = $( window ).height() - ( ( 792 < width ) ? 60 : 20 ),
|
||||
W = ( 792 < width ) ? 772 : width - 20;
|
||||
|
||||
tbWindow = $( '#TB_window' );
|
||||
|
||||
if ( tbWindow.length ) {
|
||||
tbWindow.width( W ).height( H );
|
||||
$( '#TB_iframeContent' ).width( W ).height( H );
|
||||
@@ -38,16 +47,111 @@ jQuery( document ).ready( function( $ ) {
|
||||
tb_position();
|
||||
});
|
||||
|
||||
$( '.plugin-card, .plugins .plugin-version-author-uri' ).on( 'click', 'a.thickbox', function( e ) {
|
||||
/*
|
||||
* Custom events: when a Thickbox iframe has loaded and when the Thickbox
|
||||
* modal gets removed from the DOM.
|
||||
*/
|
||||
$( 'body' )
|
||||
.on( 'thickbox:iframe:loaded', tbWindow, function() {
|
||||
iframeLoaded();
|
||||
})
|
||||
.on( 'thickbox:removed', function() {
|
||||
// Set focus back to the element that opened the modal dialog.
|
||||
// Note: IE 8 would need this wrapped in a fake setTimeout `0`.
|
||||
$focusedBefore.focus();
|
||||
});
|
||||
|
||||
function iframeLoaded() {
|
||||
var $iframe = tbWindow.find( '#TB_iframeContent' );
|
||||
|
||||
// Get the iframe body.
|
||||
$iframeBody = $iframe.contents().find( 'body' );
|
||||
|
||||
// Get the tabbable elements and handle the keydown event on first load.
|
||||
handleTabbables();
|
||||
|
||||
// Set initial focus on the "Close" button.
|
||||
$firstTabbable.focus();
|
||||
|
||||
/*
|
||||
* When the "Install" button is disabled (e.g. the Plugin is already installed)
|
||||
* then we can't predict where the last focusable element is. We need to get
|
||||
* the tabbable elements and handle the keydown event again and again,
|
||||
* each time the active tab panel changes.
|
||||
*/
|
||||
$( '#plugin-information-tabs a', $iframeBody ).on( 'click', function() {
|
||||
handleTabbables();
|
||||
});
|
||||
|
||||
// Close the modal when pressing Escape.
|
||||
$iframeBody.on( 'keydown', function( event ) {
|
||||
if ( 27 !== event.which ) {
|
||||
return;
|
||||
}
|
||||
tb_remove();
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Get the tabbable elements and detach/attach the keydown event.
|
||||
* Called after the iframe has fully loaded so we have all the elements we need.
|
||||
* Called again each time a Tab gets clicked.
|
||||
* @todo Consider to implement a WordPress general utility for this and don't use jQuery UI.
|
||||
*/
|
||||
function handleTabbables() {
|
||||
var $firstAndLast;
|
||||
// Get all the tabbable elements.
|
||||
$tabbables = $( ':tabbable', $iframeBody );
|
||||
// Our first tabbable element is always the "Close" button.
|
||||
$firstTabbable = tbWindow.find( '#TB_closeWindowButton' );
|
||||
// Get the last tabbable element.
|
||||
$lastTabbable = $tabbables.last();
|
||||
// Make a jQuery collection.
|
||||
$firstAndLast = $firstTabbable.add( $lastTabbable );
|
||||
// Detach any previously attached keydown event.
|
||||
$firstAndLast.off( 'keydown.wp-plugin-details' );
|
||||
// Attach again the keydown event on the first and last focusable elements.
|
||||
$firstAndLast.on( 'keydown.wp-plugin-details', function( event ) {
|
||||
constrainTabbing( event );
|
||||
});
|
||||
}
|
||||
|
||||
// Constrain tabbing within the plugin modal dialog.
|
||||
function constrainTabbing( event ) {
|
||||
if ( 9 !== event.which ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if ( $lastTabbable[0] === event.target && ! event.shiftKey ) {
|
||||
event.preventDefault();
|
||||
$firstTabbable.focus();
|
||||
} else if ( $firstTabbable[0] === event.target && event.shiftKey ) {
|
||||
event.preventDefault();
|
||||
$lastTabbable.focus();
|
||||
}
|
||||
}
|
||||
|
||||
// Open the Plugin details modal.
|
||||
$( '.thickbox.open-plugin-details-modal' ).on( 'click', function( e ) {
|
||||
// The `data-title` attribute is used only in the Plugin screens.
|
||||
var title = $( this ).data( 'title' ) ? plugininstallL10n.plugin_information + ' ' + $( this ).data( 'title' ) : plugininstallL10n.plugin_modal_label;
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
// Store the element that has focus before opening the modal dialog, i.e. the control which opens it.
|
||||
$focusedBefore = $( this );
|
||||
|
||||
tb_click.call(this);
|
||||
|
||||
$('#TB_title').css({'background-color':'#23282d','color':'#cfcfcf'});
|
||||
$('#TB_ajaxWindowTitle').html( '<strong>' + plugininstallL10n.plugin_information + '</strong> ' + $(this).data( 'title' ) );
|
||||
$('#TB_iframeContent').attr( 'title', plugininstallL10n.plugin_information + ' ' + $(this).data( 'title' ) );
|
||||
$('#TB_closeWindowButton').focus();
|
||||
// Set ARIA role and ARIA label.
|
||||
tbWindow.attr({
|
||||
'role': 'dialog',
|
||||
'aria-label': plugininstallL10n.plugin_modal_label
|
||||
});
|
||||
|
||||
// Set title attribute on the iframe.
|
||||
tbWindow.find( '#TB_iframeContent' ).attr( 'title', title );
|
||||
});
|
||||
|
||||
/* Plugin install related JS */
|
||||
|
||||
@@ -284,7 +284,7 @@ function list_plugin_updates() {
|
||||
$details_name = sprintf( '<span class="screen-reader-text">%1$s</span>', esc_attr( $plugin_data->Name ) );
|
||||
/* translators: 1: Plugin name 2: Plugin version */
|
||||
$details_text = sprintf( __( 'View %1$s version %2$s details.' ), $details_name, $plugin_data->update->new_version );
|
||||
$details = sprintf( '<a href="%1$s" class="thickbox">%2$s</a>', esc_url( $details_url ), $details_text );
|
||||
$details = sprintf( '<a href="%1$s" class="thickbox open-plugin-details-modal">%2$s</a>', esc_url( $details_url ), $details_text );
|
||||
$checkbox_id = "checkbox_" . md5( $plugin_data->Name );
|
||||
?>
|
||||
<tr>
|
||||
|
||||
Reference in New Issue
Block a user