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/class-wp-plugin-install-list-table.php

    r36581 r36964  
    477477
    478478            /* translators: 1: Plugin name and version. */
    479             $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>';
     479            $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>';
    480480
    481481            if ( !empty( $plugin['icons']['svg'] ) ) {
     
    505505                <div class="name column-name">
    506506                    <h3>
    507                         <a href="<?php echo esc_url( $details_link ); ?>" class="thickbox">
     507                        <a href="<?php echo esc_url( $details_link ); ?>" class="thickbox open-plugin-details-modal">
    508508                        <?php echo $title; ?>
    509509                        <img src="<?php echo esc_attr( $plugin_icon_url ) ?>" class="plugin-icon" alt="">
Note: See TracChangeset for help on using the changeset viewer.