Accessibility: Theme Installer, make the "Upload Theme" button... a button.

UI controls that "do something" on a page shouldn't be links. This link behaves
like a toggle to expand the uploader panel and should be a `button` element with
an aria-expanded attribute. Also:

- improves consistency with the Plugin uploader
- keeps the themes list visible when the uploader is open
- displays a notice when JavaScript is off
- adds some `hide-if-no-js` CSS classes
- removes the `themes.router.navigate()` "upload" route: seems unnecessary and breaks history

Fixes #35457.
Built from https://develop.svn.wordpress.org/trunk@37742


git-svn-id: http://core.svn.wordpress.org/trunk@37707 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/common-rtl.css

@@ -601,6 +601,9 @@ code {
 	text-shadow: none;
 	font-weight: 600;
 	font-size: 13px;
+	line-height: normal; /* IE8-IE11 need this for buttons */
+	cursor: pointer;
+	outline: 0;
 }
 
 .wrap .add-new-h2:hover, /* deprecated */

wp-admin/css/common.css

@@ -601,6 +601,9 @@ code {
 	text-shadow: none;
 	font-weight: 600;
 	font-size: 13px;
+	line-height: normal; /* IE8-IE11 need this for buttons */
+	cursor: pointer;
+	outline: 0;
 }
 
 .wrap .add-new-h2:hover, /* deprecated */

wp-admin/css/themes-rtl.css

@@ -1039,7 +1039,7 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
 	box-sizing: border-box;
 	display: none;
 	margin: 0;
-	padding: 0;
+	padding: 50px 0;
 	width: 100%;
 	overflow: hidden;
 	position: relative;
@@ -1066,13 +1066,9 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
 	font-size: 18px;
 	font-style: normal;
 	margin: 0;
-	padding: 40px 0 0;
+	padding: 0;
 	text-align: center;
 }
-body.show-upload-theme .upload-theme + .wp-filter,
-body.show-upload-theme .upload-theme + .wp-filter + .theme-browser {
-	display: none;
-}
 
 p.no-themes {
 	clear: both;
@@ -1085,14 +1081,10 @@ p.no-themes {
 	display: none;
 }
 
-body.no-results p.no-themes {
+.no-results p.no-themes {
 	display: block;
 }
 
-body.show-upload-theme p.no-themes {
-	display: none !important;
-}
-
 .theme-install-php .add-new-theme {
 	display: none !important;
 }

wp-admin/css/themes.css

@@ -1039,7 +1039,7 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
 	box-sizing: border-box;
 	display: none;
 	margin: 0;
-	padding: 0;
+	padding: 50px 0;
 	width: 100%;
 	overflow: hidden;
 	position: relative;
@@ -1066,13 +1066,9 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
 	font-size: 18px;
 	font-style: normal;
 	margin: 0;
-	padding: 40px 0 0;
+	padding: 0;
 	text-align: center;
 }
-body.show-upload-theme .upload-theme + .wp-filter,
-body.show-upload-theme .upload-theme + .wp-filter + .theme-browser {
-	display: none;
-}
 
 p.no-themes {
 	clear: both;
@@ -1085,14 +1081,10 @@ p.no-themes {
 	display: none;
 }
 
-body.no-results p.no-themes {
+.no-results p.no-themes {
 	display: block;
 }
 
-body.show-upload-theme p.no-themes {
-	display: none !important;
-}
-
 .theme-install-php .add-new-theme {
 	display: none !important;
 }

wp-admin/js/theme.js

@@ -1745,23 +1745,18 @@ themes.view.Installer = themes.view.Appearance.extend({
 	searchContainer: $( '.wp-filter .search-form' ),
 
 	/*
-	 * When a user presses the "Upload Theme" button, show the upload form in place.
-	 * @todo consider to abstract this in a generic, reusable, utility, see plugin-install.js
+	 * When users press the "Upload Theme" button, show the upload form in place.
 	 */
 	uploader: function() {
 		var uploadViewToggle = $( '.upload-view-toggle' ),
 			$body = $( document.body );
 
-		uploadViewToggle
-			.attr({
-				role: 'button',
-				'aria-expanded': 'false'
-			})
-			.on( 'click', function( event ) {
-				event.preventDefault();
-				$body.toggleClass( 'show-upload-view' );
-				uploadViewToggle.attr( 'aria-expanded', $body.hasClass( 'show-upload-view' ) );
-			});
+		uploadViewToggle.on( 'click', function() {
+			// Toggle the upload view.
+			$body.toggleClass( 'show-upload-view' );
+			// Toggle the `aria-expanded` button attribute.
+			uploadViewToggle.attr( 'aria-expanded', $body.hasClass( 'show-upload-view' ) );
+		});
 	},
 
 	// Toggle the full filters navigation
@@ -1815,7 +1810,6 @@ themes.InstallerRouter = Backbone.Router.extend({
 	routes: {
 		'theme-install.php?theme=:slug': 'preview',
 		'theme-install.php?browse=:sort': 'sort',
-		'theme-install.php?upload': 'upload',
 		'theme-install.php?search=:query': 'search',
 		'theme-install.php': 'sort'
 	},
@@ -1897,11 +1891,6 @@ themes.RunInstaller = {
 			self.view.trigger( 'theme:close' );
 		});
 
-		// Support the `upload` route by going straight to upload section
-		themes.router.on( 'route:upload', function() {
-			$( 'a.upload' ).trigger( 'click' );
-		});
-
 		// The `search` route event. The router populates the input field.
 		themes.router.on( 'route:search', function() {
 			$( '.wp-filter-search' ).focus().trigger( 'keyup' );

wp-admin/theme-install.php

@@ -127,17 +127,20 @@ include(ABSPATH . 'wp-admin/admin-header.php');
 	 */
 	$tabs = apply_filters( 'install_themes_tabs', array( 'upload' => __( 'Upload Theme' ) ) );
 	if ( ! empty( $tabs['upload'] ) && current_user_can( 'upload_themes' ) ) {
-		echo ' <a href="#" class="upload-view-toggle page-title-action">' . __( 'Upload Theme' ) . '</a>';
+		echo ' <button type="button" class="upload-view-toggle page-title-action hide-if-no-js" aria-expanded="false">' . __( 'Upload Theme' ) . '</button>';
 	}
 	?></h1>
+	<div class="error hide-if-js">
+		<p><?php _e( 'The Theme Installer screen requires JavaScript.' ); ?></p>
+	</div>
 
 	<div class="upload-theme">
 	<?php install_themes_upload(); ?>
 	</div>
 
-	<h2 class="screen-reader-text"><?php _e( 'Filter themes list' ); ?></h2>
+	<h2 class="screen-reader-text hide-if-no-js"><?php _e( 'Filter themes list' ); ?></h2>
 
-	<div class="wp-filter">
+	<div class="wp-filter hide-if-no-js">
 		<div class="filter-count">
 			<span class="count theme-count"></span>
 		</div>
@@ -201,7 +204,7 @@ include(ABSPATH . 'wp-admin/admin-header.php');
 			</div>
 		</div>
 	</div>
-	<h2 class="screen-reader-text"><?php _e( 'Themes list' ); ?></h2>
+	<h2 class="screen-reader-text hide-if-no-js"><?php _e( 'Themes list' ); ?></h2>
 	<div class="theme-browser content-filterable"></div>
 	<div class="theme-install-overlay wp-full-overlay expanded"></div>
 

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.6-alpha-37741';
+$wp_version = '4.6-alpha-37742';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.