Changeset 41658

Timestamp:

10/01/2017 01:47:29 PM (9 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:

• includes/theme.php (modified) (1 diff)
• js/theme.js (modified) (2 diffs)
• themes.php (modified) (2 diffs)

trunk/src/wp-admin/includes/theme.php

@@ -633 +633 @@
         <script type="text/html" id="tmpl-customize-themes-details-view">
                 <div class="theme-backdrop"></div>
-                <div class="theme-wrap wp-clearfix">
+                <div class="theme-wrap wp-clearfix" role="document">
                         <div class="theme-header">
                                 <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

@@ -684 +684 @@
                 // Set initial focus on the primary action control.
                 _.delay( function() {
-                        $( '.theme-wrap a.button-primary:visible' ).focus();
+                        $( '.theme-overlay' ).focus();
                 }, 100 );
 
@@ -1604 +1604 @@
                         $( 'body' ).removeClass( 'loading-content' );
                         $( '.theme-browser' ).find( 'div.error' ).remove();
-                        $( '.theme-browser' ).find( 'div.themes' ).before( '<div class="error"><p>' + l10n.error + '</p><p><button class="button try-again">' + l10n.tryAgain + '</button></p></div>' ); 
-                        $( '.theme-browser .error .try-again' ).on( 'click', function( e ) { 
-                                e.preventDefault(); 
-                                $( 'input.wp-filter-search' ).trigger( 'input' ); 
+                        $( '.theme-browser' ).find( 'div.themes' ).before( '<div class="error"><p>' + l10n.error + '</p><p><button class="button try-again">' + l10n.tryAgain + '</button></p></div>' );
+                        $( '.theme-browser .error .try-again' ).on( 'click', function( e ) {
+                                e.preventDefault();
+                                $( 'input.wp-filter-search' ).trigger( 'input' );
                         } );
                 });

trunk/src/wp-admin/themes.php

@@ -302 +302 @@
         </div>
 </div>
-<div class="theme-overlay"></div>
+<div class="theme-overlay" tabindex="0" role="dialog" aria-label="<?php esc_attr_e( 'Theme Details' ); ?>"></div>
 
 <p class="no-themes"><?php _e( 'No themes found. Try a different search query.' ); ?></p>
@@ -432 +432 @@
 <script id="tmpl-theme-single" type="text/template">
         <div class="theme-backdrop"></div>
-        <div class="theme-wrap wp-clearfix">
+        <div class="theme-wrap wp-clearfix" role="document">
                 <div class="theme-header">
                         <button class="left dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show previous theme' ); ?></span></button>