From 52e28b4085ed0e90c196054c965d691304aaabad Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Sun, 29 Apr 2018 17:03:56 +0000
Subject: [PATCH] Accessibility: Improve the Themes Installer navigation
 buttons accessibility.

- really disables buttons when they look disabled (when navigation is at the first or last theme)
- when navigation is at the first or last theme, moves focus to the other navigation button, to avoid a focus loss
- improves the buttons visually hidden accessibility text

Props walbo, afercia.
Fixes #36627.


git-svn-id: https://develop.svn.wordpress.org/trunk@43020 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/js/theme.js       | 16 +++++++++++++---
 src/wp-admin/theme-install.php |  4 ++--
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/wp-admin/js/theme.js b/src/wp-admin/js/theme.js
index 632c39986b..e797544f42 100644
--- a/src/wp-admin/js/theme.js
+++ b/src/wp-admin/js/theme.js
@@ -573,16 +573,26 @@ themes.view.Theme = wp.Backbone.View.extend({
 	// Handles .disabled classes for previous/next buttons in theme installer preview
 	setNavButtonsState: function() {
 		var $themeInstaller = $( '.theme-install-overlay' ),
-			current = _.isUndefined( this.current ) ? this.model : this.current;
+			current = _.isUndefined( this.current ) ? this.model : this.current,
+			previousThemeButton = $themeInstaller.find( '.previous-theme' ),
+			nextThemeButton = $themeInstaller.find( '.next-theme' );
 
 		// Disable previous at the zero position
 		if ( 0 === this.model.collection.indexOf( current ) ) {
-			$themeInstaller.find( '.previous-theme' ).addClass( 'disabled' );
+			previousThemeButton
+				.addClass( 'disabled' )
+				.prop( 'disabled', true );
+
+			nextThemeButton.focus();
 		}
 
 		// Disable next if the next model is undefined
 		if ( _.isUndefined( this.model.collection.at( this.model.collection.indexOf( current ) + 1 ) ) ) {
-			$themeInstaller.find( '.next-theme' ).addClass( 'disabled' );
+			nextThemeButton
+				.addClass( 'disabled' )
+				.prop( 'disabled', true );
+
+			previousThemeButton.focus();
 		}
 	},
 
diff --git a/src/wp-admin/theme-install.php b/src/wp-admin/theme-install.php
index b4b18c92d5..1a250a8263 100644
--- a/src/wp-admin/theme-install.php
+++ b/src/wp-admin/theme-install.php
@@ -309,8 +309,8 @@ if ( $tab ) {
 	<div class="wp-full-overlay-sidebar">
 		<div class="wp-full-overlay-header">
 			<button class="close-full-overlay"><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></button>
-			<button class="previous-theme"><span class="screen-reader-text"><?php _ex( 'Previous', 'Button label for a theme' ); ?></span></button>
-			<button class="next-theme"><span class="screen-reader-text"><?php _ex( 'Next', 'Button label for a theme' ); ?></span></button>
+			<button class="previous-theme"><span class="screen-reader-text"><?php _e( 'Previous theme' ); ?></span></button>
+			<button class="next-theme"><span class="screen-reader-text"><?php _e( 'Next theme' ); ?></span></button>
 			<# if ( data.installed ) { #>
 				<a class="button button-primary activate" href="{{ data.activate_url }}"><?php _e( 'Activate' ); ?></a>
 			<# } else { #>