Make WordPress Core

Changeset 41658


Ignore:
Timestamp:
10/01/2017 01:47:29 PM (6 years ago)
Author:
afercia
Message:

Accessibility: Improve the Theme Details modal accessibility.

  • sets the modal content to role="document" to make screen readers switch back to browse mode
  • standardizes the Themes screen and Customizer modals interaction
  • Themes screen modal: sets initial focus on the modal overlay instead of the primary button, avoiding to "skip" content for keyboard and screen reader users

Fixes #42055.

Location:
trunk/src/wp-admin
Files:
3 edited

Legend:

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

    r41648 r41658  
    633633    <script type="text/html" id="tmpl-customize-themes-details-view">
    634634        <div class="theme-backdrop"></div>
    635         <div class="theme-wrap wp-clearfix">
     635        <div class="theme-wrap wp-clearfix" role="document">
    636636            <div class="theme-header">
    637637                <button type="button" class="left dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show previous theme' ); ?></span></button>
  • trunk/src/wp-admin/js/theme.js

    r41608 r41658  
    684684        // Set initial focus on the primary action control.
    685685        _.delay( function() {
    686             $( '.theme-wrap a.button-primary:visible' ).focus();
     686            $( '.theme-overlay' ).focus();
    687687        }, 100 );
    688688
     
    16041604            $( 'body' ).removeClass( 'loading-content' );
    16051605            $( '.theme-browser' ).find( 'div.error' ).remove();
    1606             $( '.theme-browser' ).find( 'div.themes' ).before( '<div class="error"><p>' + l10n.error + '</p><p><button class="button try-again">' + l10n.tryAgain + '</button></p></div>' ); 
    1607             $( '.theme-browser .error .try-again' ).on( 'click', function( e ) { 
    1608                 e.preventDefault(); 
    1609                 $( 'input.wp-filter-search' ).trigger( 'input' ); 
     1606            $( '.theme-browser' ).find( 'div.themes' ).before( '<div class="error"><p>' + l10n.error + '</p><p><button class="button try-again">' + l10n.tryAgain + '</button></p></div>' );
     1607            $( '.theme-browser .error .try-again' ).on( 'click', function( e ) {
     1608                e.preventDefault();
     1609                $( 'input.wp-filter-search' ).trigger( 'input' );
    16101610            } );
    16111611        });
  • trunk/src/wp-admin/themes.php

    r41608 r41658  
    302302    </div>
    303303</div>
    304 <div class="theme-overlay"></div>
     304<div class="theme-overlay" tabindex="0" role="dialog" aria-label="<?php esc_attr_e( 'Theme Details' ); ?>"></div>
    305305
    306306<p class="no-themes"><?php _e( 'No themes found. Try a different search query.' ); ?></p>
     
    432432<script id="tmpl-theme-single" type="text/template">
    433433    <div class="theme-backdrop"></div>
    434     <div class="theme-wrap wp-clearfix">
     434    <div class="theme-wrap wp-clearfix" role="document">
    435435        <div class="theme-header">
    436436            <button class="left dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show previous theme' ); ?></span></button>
Note: See TracChangeset for help on using the changeset viewer.