WordPress.org

Make WordPress Core


Ignore:
Timestamp:
03/10/2016 10:36:25 PM (3 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/dashboard.php

    r36878 r36964  
    12461246        $ilink = wp_nonce_url('plugin-install.php?tab=plugin-information&plugin=' . $slug, 'install-plugin_' . $slug) . '&TB_iframe=true&width=600&height=800';
    12471247        echo '<li class="dashboard-news-plugin"><span>' . __( 'Popular Plugin' ) . ':</span> ' . esc_html( $raw_title ) .
    1248             '&nbsp;<a href="' . $ilink . '" class="thickbox" aria-label="' .
     1248            '&nbsp;<a href="' . $ilink . '" class="thickbox open-plugin-details-modal" aria-label="' .
    12491249            /* translators: %s: plugin name */
    12501250            esc_attr( sprintf( __( 'Install %s' ), $raw_title ) ) . '">(' . __( 'Install' ) . ')</a></li>';
Note: See TracChangeset for help on using the changeset viewer.