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.
Built from https://develop.svn.wordpress.org/trunk@36964


git-svn-id: http://core.svn.wordpress.org/trunk@36932 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrea Fercia
2016-03-10 22:37:26 +00:00
parent b533878fa2
commit fd1f45a7cf
17 changed files with 247 additions and 118 deletions

View File

@@ -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];