From 7a414342dfc58b9396ebffe35038b9024efdb931 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Sun, 1 Oct 2017 13:47:29 +0000
Subject: [PATCH] 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@41658 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/includes/theme.php |  2 +-
 src/wp-admin/js/theme.js        | 10 +++++-----
 src/wp-admin/themes.php         |  4 ++--
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/wp-admin/includes/theme.php b/src/wp-admin/includes/theme.php
index 17d0b7bde0..6670d026f6 100644
--- a/src/wp-admin/includes/theme.php
+++ b/src/wp-admin/includes/theme.php
@@ -632,7 +632,7 @@ function customize_themes_print_templates() {
 	?>
 	<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>
 				<button type="button" class="right dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show next theme' ); ?></span></button>
diff --git a/src/wp-admin/js/theme.js b/src/wp-admin/js/theme.js
index cd0af3b593..5f048d1478 100644
--- a/src/wp-admin/js/theme.js
+++ b/src/wp-admin/js/theme.js
@@ -683,7 +683,7 @@ themes.view.Details = wp.Backbone.View.extend({
 
 		// Set initial focus on the primary action control.
 		_.delay( function() {
-			$( '.theme-wrap a.button-primary:visible' ).focus();
+			$( '.theme-overlay' ).focus();
 		}, 100 );
 
 		// Constrain tabbing within the modal.
@@ -1603,10 +1603,10 @@ themes.view.Installer = themes.view.Appearance.extend({
 		this.listenTo( this.collection, 'query:fail', function() {
 			$( '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' );
 			} );
 		});
 
diff --git a/src/wp-admin/themes.php b/src/wp-admin/themes.php
index 7834e701ff..8295a04fcb 100644
--- a/src/wp-admin/themes.php
+++ b/src/wp-admin/themes.php
@@ -301,7 +301,7 @@ foreach ( $themes as $theme ) :
 <?php endforeach; ?>
 	</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>
 
@@ -431,7 +431,7 @@ $can_install = current_user_can( 'install_themes' );
 
 <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>
 			<button class="right dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show next theme' ); ?></span></button>