Bring keyboard accessibility to the theme install screen and theme action buttons. props jorbin. see #27521.

Built from https://develop.svn.wordpress.org/trunk@27804


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

wp-admin/css/colors/_admin.scss

@@ -439,10 +439,19 @@ ul#adminmenu > li.current > a.current:after {
 
 body.more-filters-opened .more-filters,
 body.more-filters-opened .more-filters:before {
-	color: $menu-highlight-text;
+	color: $menu-text;
-	background-color: $menu-highlight-background;
+	background-color: $menu-background;
 }
 
+body.more-filters-opened .more-filters:hover,
+body.more-filters-opened .more-filters:focus,
+body.more-filters-opened .more-filters:hover:before,
+body.more-filters-opened .more-filters:focus:before {
+	background-color: $menu-highlight-background;
+	color: $menu-highlight-text;
+}
+
+
 /* jQuery UI Slider */
 
 .wp-slider .ui-slider-handle,

wp-admin/css/colors/blue/colors-rtl.css

@@ -280,7 +280,11 @@ ul#adminmenu a.wp-has-current-submenu:after, ul#adminmenu > li.current > a.curre
 
 body.more-filters-opened .more-filters, body.more-filters-opened .more-filters:before {
   color: #fff;
-  background-color: #096484; }
+  background-color: #52accc; }
+
+body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-filters:focus, body.more-filters-opened .more-filters:hover:before, body.more-filters-opened .more-filters:focus:before {
+  background-color: #096484;
+  color: #fff; }
 
 /* jQuery UI Slider */
 .wp-slider .ui-slider-handle, .wp-slider .ui-slider-handle.ui-state-hover, .wp-slider .ui-slider-handle.focus {

wp-admin/css/colors/blue/colors.css

@@ -280,7 +280,11 @@ ul#adminmenu a.wp-has-current-submenu:after, ul#adminmenu > li.current > a.curre
 
 body.more-filters-opened .more-filters, body.more-filters-opened .more-filters:before {
   color: #fff;
-  background-color: #096484; }
+  background-color: #52accc; }
+
+body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-filters:focus, body.more-filters-opened .more-filters:hover:before, body.more-filters-opened .more-filters:focus:before {
+  background-color: #096484;
+  color: #fff; }
 
 /* jQuery UI Slider */
 .wp-slider .ui-slider-handle, .wp-slider .ui-slider-handle.ui-state-hover, .wp-slider .ui-slider-handle.focus {

wp-admin/css/colors/coffee/colors-rtl.css

@@ -280,7 +280,11 @@ ul#adminmenu a.wp-has-current-submenu:after, ul#adminmenu > li.current > a.curre
 
 body.more-filters-opened .more-filters, body.more-filters-opened .more-filters:before {
   color: #fff;
-  background-color: #c7a589; }
+  background-color: #59524c; }
+
+body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-filters:focus, body.more-filters-opened .more-filters:hover:before, body.more-filters-opened .more-filters:focus:before {
+  background-color: #c7a589;
+  color: #fff; }
 
 /* jQuery UI Slider */
 .wp-slider .ui-slider-handle, .wp-slider .ui-slider-handle.ui-state-hover, .wp-slider .ui-slider-handle.focus {

wp-admin/css/colors/coffee/colors.css

@@ -280,7 +280,11 @@ ul#adminmenu a.wp-has-current-submenu:after, ul#adminmenu > li.current > a.curre
 
 body.more-filters-opened .more-filters, body.more-filters-opened .more-filters:before {
   color: #fff;
-  background-color: #c7a589; }
+  background-color: #59524c; }
+
+body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-filters:focus, body.more-filters-opened .more-filters:hover:before, body.more-filters-opened .more-filters:focus:before {
+  background-color: #c7a589;
+  color: #fff; }
 
 /* jQuery UI Slider */
 .wp-slider .ui-slider-handle, .wp-slider .ui-slider-handle.ui-state-hover, .wp-slider .ui-slider-handle.focus {

wp-admin/css/colors/ectoplasm/colors-rtl.css

@@ -280,7 +280,11 @@ ul#adminmenu a.wp-has-current-submenu:after, ul#adminmenu > li.current > a.curre
 
 body.more-filters-opened .more-filters, body.more-filters-opened .more-filters:before {
   color: #fff;
-  background-color: #a3b745; }
+  background-color: #523f6d; }
+
+body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-filters:focus, body.more-filters-opened .more-filters:hover:before, body.more-filters-opened .more-filters:focus:before {
+  background-color: #a3b745;
+  color: #fff; }
 
 /* jQuery UI Slider */
 .wp-slider .ui-slider-handle, .wp-slider .ui-slider-handle.ui-state-hover, .wp-slider .ui-slider-handle.focus {

wp-admin/css/colors/ectoplasm/colors.css

@@ -280,7 +280,11 @@ ul#adminmenu a.wp-has-current-submenu:after, ul#adminmenu > li.current > a.curre
 
 body.more-filters-opened .more-filters, body.more-filters-opened .more-filters:before {
   color: #fff;
-  background-color: #a3b745; }
+  background-color: #523f6d; }
+
+body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-filters:focus, body.more-filters-opened .more-filters:hover:before, body.more-filters-opened .more-filters:focus:before {
+  background-color: #a3b745;
+  color: #fff; }
 
 /* jQuery UI Slider */
 .wp-slider .ui-slider-handle, .wp-slider .ui-slider-handle.ui-state-hover, .wp-slider .ui-slider-handle.focus {

wp-admin/css/colors/light/colors-rtl.css

@@ -279,8 +279,12 @@ ul#adminmenu a.wp-has-current-submenu:after, ul#adminmenu > li.current > a.curre
   border-bottom-color: #e5e5e5; }
 
 body.more-filters-opened .more-filters, body.more-filters-opened .more-filters:before {
-  color: #fff;
+  color: #333;
-  background-color: #888; }
+  background-color: #e5e5e5; }
+
+body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-filters:focus, body.more-filters-opened .more-filters:hover:before, body.more-filters-opened .more-filters:focus:before {
+  background-color: #888;
+  color: #fff; }
 
 /* jQuery UI Slider */
 .wp-slider .ui-slider-handle, .wp-slider .ui-slider-handle.ui-state-hover, .wp-slider .ui-slider-handle.focus {

wp-admin/css/colors/light/colors.css

@@ -279,8 +279,12 @@ ul#adminmenu a.wp-has-current-submenu:after, ul#adminmenu > li.current > a.curre
   border-bottom-color: #e5e5e5; }
 
 body.more-filters-opened .more-filters, body.more-filters-opened .more-filters:before {
-  color: #fff;
+  color: #333;
-  background-color: #888; }
+  background-color: #e5e5e5; }
+
+body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-filters:focus, body.more-filters-opened .more-filters:hover:before, body.more-filters-opened .more-filters:focus:before {
+  background-color: #888;
+  color: #fff; }
 
 /* jQuery UI Slider */
 .wp-slider .ui-slider-handle, .wp-slider .ui-slider-handle.ui-state-hover, .wp-slider .ui-slider-handle.focus {

wp-admin/css/colors/midnight/colors-rtl.css

@@ -280,7 +280,11 @@ ul#adminmenu a.wp-has-current-submenu:after, ul#adminmenu > li.current > a.curre
 
 body.more-filters-opened .more-filters, body.more-filters-opened .more-filters:before {
   color: #fff;
-  background-color: #e14d43; }
+  background-color: #363b3f; }
+
+body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-filters:focus, body.more-filters-opened .more-filters:hover:before, body.more-filters-opened .more-filters:focus:before {
+  background-color: #e14d43;
+  color: #fff; }
 
 /* jQuery UI Slider */
 .wp-slider .ui-slider-handle, .wp-slider .ui-slider-handle.ui-state-hover, .wp-slider .ui-slider-handle.focus {

wp-admin/css/colors/midnight/colors.css

@@ -280,7 +280,11 @@ ul#adminmenu a.wp-has-current-submenu:after, ul#adminmenu > li.current > a.curre
 
 body.more-filters-opened .more-filters, body.more-filters-opened .more-filters:before {
   color: #fff;
-  background-color: #e14d43; }
+  background-color: #363b3f; }
+
+body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-filters:focus, body.more-filters-opened .more-filters:hover:before, body.more-filters-opened .more-filters:focus:before {
+  background-color: #e14d43;
+  color: #fff; }
 
 /* jQuery UI Slider */
 .wp-slider .ui-slider-handle, .wp-slider .ui-slider-handle.ui-state-hover, .wp-slider .ui-slider-handle.focus {

wp-admin/css/colors/ocean/colors-rtl.css

@@ -280,7 +280,11 @@ ul#adminmenu a.wp-has-current-submenu:after, ul#adminmenu > li.current > a.curre
 
 body.more-filters-opened .more-filters, body.more-filters-opened .more-filters:before {
   color: #fff;
-  background-color: #9ebaa0; }
+  background-color: #738e96; }
+
+body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-filters:focus, body.more-filters-opened .more-filters:hover:before, body.more-filters-opened .more-filters:focus:before {
+  background-color: #9ebaa0;
+  color: #fff; }
 
 /* jQuery UI Slider */
 .wp-slider .ui-slider-handle, .wp-slider .ui-slider-handle.ui-state-hover, .wp-slider .ui-slider-handle.focus {

wp-admin/css/colors/ocean/colors.css

@@ -280,7 +280,11 @@ ul#adminmenu a.wp-has-current-submenu:after, ul#adminmenu > li.current > a.curre
 
 body.more-filters-opened .more-filters, body.more-filters-opened .more-filters:before {
   color: #fff;
-  background-color: #9ebaa0; }
+  background-color: #738e96; }
+
+body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-filters:focus, body.more-filters-opened .more-filters:hover:before, body.more-filters-opened .more-filters:focus:before {
+  background-color: #9ebaa0;
+  color: #fff; }
 
 /* jQuery UI Slider */
 .wp-slider .ui-slider-handle, .wp-slider .ui-slider-handle.ui-state-hover, .wp-slider .ui-slider-handle.focus {

wp-admin/css/colors/sunrise/colors-rtl.css

@@ -280,7 +280,11 @@ ul#adminmenu a.wp-has-current-submenu:after, ul#adminmenu > li.current > a.curre
 
 body.more-filters-opened .more-filters, body.more-filters-opened .more-filters:before {
   color: #fff;
-  background-color: #dd823b; }
+  background-color: #cf4944; }
+
+body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-filters:focus, body.more-filters-opened .more-filters:hover:before, body.more-filters-opened .more-filters:focus:before {
+  background-color: #dd823b;
+  color: #fff; }
 
 /* jQuery UI Slider */
 .wp-slider .ui-slider-handle, .wp-slider .ui-slider-handle.ui-state-hover, .wp-slider .ui-slider-handle.focus {

wp-admin/css/colors/sunrise/colors.css

@@ -280,7 +280,11 @@ ul#adminmenu a.wp-has-current-submenu:after, ul#adminmenu > li.current > a.curre
 
 body.more-filters-opened .more-filters, body.more-filters-opened .more-filters:before {
   color: #fff;
-  background-color: #dd823b; }
+  background-color: #cf4944; }
+
+body.more-filters-opened .more-filters:hover, body.more-filters-opened .more-filters:focus, body.more-filters-opened .more-filters:hover:before, body.more-filters-opened .more-filters:focus:before {
+  background-color: #dd823b;
+  color: #fff; }
 
 /* jQuery UI Slider */
 .wp-slider .ui-slider-handle, .wp-slider .ui-slider-handle.ui-state-hover, .wp-slider .ui-slider-handle.focus {

wp-admin/css/themes-rtl.css

@@ -40,6 +40,10 @@
 	top: -3px;
 }
 
+.theme-navigation a {
+	text-decoration:none;
+}
+
 /* Position admin messages */
 .themes-php div.updated,
 .themes-php div.error {
@@ -97,7 +101,7 @@
 	background: rgba(255,255,255,0.65);
 }
 
-/* Activate and Customize buttons, shown on hover */
+/* Activate and Customize buttons, shown on hover and focus */
 .theme-browser .theme .theme-actions {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 	opacity: 0;
@@ -112,7 +116,9 @@
 	border-right: 1px solid rgba(0,0,0,0.05);
 }
 
-.theme-browser .theme:hover .theme-actions {
+.theme-browser .theme:hover .theme-actions,
+.theme-browser .theme.focus .theme-actions,
+.theme-browser .theme:focus .theme-actions {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 	opacity: 1;
 }
@@ -157,11 +163,13 @@
 	transition: opacity 0.2s ease-in-out;
 }
 
-.theme-browser .theme:hover .theme-screenshot {
+.theme-browser .theme:hover .theme-screenshot,
+.theme-browser .theme:focus .theme-screenshot {
 	background: #fff;
 }
 
-.theme-browser.rendered .theme:hover .theme-screenshot img {
+.theme-browser.rendered .theme:hover .theme-screenshot img,
+.theme-browser.rendered .theme:focus .theme-screenshot img {
 	opacity: 0.4;
 }
 
@@ -189,14 +197,7 @@
 .theme-browser .theme:focus {
 	outline: 1px dotted #222;
 }
-/* Hide shortcut actions and hover feedback when using tab navigation */
+
-.theme-browser .theme:focus .theme-actions {
-	display: none;
-}
-/* Restore display of theme controls if you hover a focused theme */
-.theme-browser .theme:focus:hover .theme-actions {
-	display: block;
-}
 .theme-browser .theme:focus .more-details {
 	opacity: 1;
 }
@@ -205,7 +206,8 @@
 	display: block;
 }
 
-.theme-browser.rendered .theme:hover .more-details {
+.theme-browser.rendered .theme:hover .more-details,
+.theme-browser.rendered .theme:focus .more-details {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 	opacity: 1;
 }
@@ -359,16 +361,19 @@
 	text-indent: 4px;
 }
 
-.theme-browser .theme.add-new-theme:hover .theme-screenshot {
+.theme-browser .theme.add-new-theme:hover .theme-screenshot,
+.theme-browser .theme.add-new-theme:focus .theme-screenshot {
 	background: none;
 }
 
-.theme-browser .theme.add-new-theme:hover span:after {
+.theme-browser .theme.add-new-theme:hover span:after,
+.theme-browser .theme.add-new-theme:focus span:after {
 	background: #fff;
 	color: #0074a2;
 }
 
-.theme-browser .theme.add-new-theme:hover:after {
+.theme-browser .theme.add-new-theme:hover:after,
+.theme-browser .theme.add-new-theme:focus:after {
 	border-color: transparent;
 	color: #fff;
 	background: #0074a2;
@@ -387,7 +392,8 @@
 	margin-bottom: 10%;
 }
 
-.theme-browser .theme.add-new-theme:hover .theme-name {
+.theme-browser .theme.add-new-theme:hover .theme-name,
+.theme-browser .theme.add-new-theme:focus .theme-name {
 	color: #fff;
 	z-index: 2;
 }
@@ -954,11 +960,14 @@ body.folded .theme-overlay .theme-wrap {
 	}
 
 	.theme:not(.active):hover .theme-actions,
-	.theme:hover .more-details {
+	.theme:not(.active):focus .theme-actions,
+	.theme:hover .more-details,
+	.theme:focus .more-details {
 		display: none;
 	}
 
-	.theme-browser.rendered .theme:hover .theme-screenshot img {
+	.theme-browser.rendered .theme:hover .theme-screenshot img,
+	.theme-browser.rendered .theme:focus .theme-screenshot img {
 		opacity: 1.0;
 	}
 }
@@ -1163,12 +1172,22 @@ body.show-upload-theme .upload-theme + .theme-navigation + .theme-browser {
 }
 body.more-filters-opened .more-filters,
 body.more-filters-opened .more-filters:before {
-	background: rgb(46, 162, 204);
+	background: #777;
 	-webkit-border-radius: 2px;
 	border-radius: 2px;
 	border: none;
 	color: #fff;
+	-webkit-transition: color .1s ease-in, background .1s ease-in;
+	transition: color .1s ease-in, background .1s ease-in;
 }
+
+body.more-filters-opened .more-filters:hover,
+body.more-filters-opened .more-filters:focus,
+body.more-filters-opened .more-filters:hover:before,
+body.more-filters-opened .more-filters:focus:before {
+	background: rgb(46, 162, 204);
+}
+
 .theme-install-php .theme-search {
 	position: absolute;
 	left: 10px;

wp-admin/css/themes.css

@@ -40,6 +40,10 @@
 	top: -3px;
 }
 
+.theme-navigation a {
+	text-decoration:none;
+}
+
 /* Position admin messages */
 .themes-php div.updated,
 .themes-php div.error {
@@ -97,7 +101,7 @@
 	background: rgba(255,255,255,0.65);
 }
 
-/* Activate and Customize buttons, shown on hover */
+/* Activate and Customize buttons, shown on hover and focus */
 .theme-browser .theme .theme-actions {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 	opacity: 0;
@@ -112,7 +116,9 @@
 	border-left: 1px solid rgba(0,0,0,0.05);
 }
 
-.theme-browser .theme:hover .theme-actions {
+.theme-browser .theme:hover .theme-actions,
+.theme-browser .theme.focus .theme-actions,
+.theme-browser .theme:focus .theme-actions {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 	opacity: 1;
 }
@@ -157,11 +163,13 @@
 	transition: opacity 0.2s ease-in-out;
 }
 
-.theme-browser .theme:hover .theme-screenshot {
+.theme-browser .theme:hover .theme-screenshot,
+.theme-browser .theme:focus .theme-screenshot {
 	background: #fff;
 }
 
-.theme-browser.rendered .theme:hover .theme-screenshot img {
+.theme-browser.rendered .theme:hover .theme-screenshot img,
+.theme-browser.rendered .theme:focus .theme-screenshot img {
 	opacity: 0.4;
 }
 
@@ -189,14 +197,7 @@
 .theme-browser .theme:focus {
 	outline: 1px dotted #222;
 }
-/* Hide shortcut actions and hover feedback when using tab navigation */
+
-.theme-browser .theme:focus .theme-actions {
-	display: none;
-}
-/* Restore display of theme controls if you hover a focused theme */
-.theme-browser .theme:focus:hover .theme-actions {
-	display: block;
-}
 .theme-browser .theme:focus .more-details {
 	opacity: 1;
 }
@@ -205,7 +206,8 @@
 	display: block;
 }
 
-.theme-browser.rendered .theme:hover .more-details {
+.theme-browser.rendered .theme:hover .more-details,
+.theme-browser.rendered .theme:focus .more-details {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 	opacity: 1;
 }
@@ -359,16 +361,19 @@
 	text-indent: 4px;
 }
 
-.theme-browser .theme.add-new-theme:hover .theme-screenshot {
+.theme-browser .theme.add-new-theme:hover .theme-screenshot,
+.theme-browser .theme.add-new-theme:focus .theme-screenshot {
 	background: none;
 }
 
-.theme-browser .theme.add-new-theme:hover span:after {
+.theme-browser .theme.add-new-theme:hover span:after,
+.theme-browser .theme.add-new-theme:focus span:after {
 	background: #fff;
 	color: #0074a2;
 }
 
-.theme-browser .theme.add-new-theme:hover:after {
+.theme-browser .theme.add-new-theme:hover:after,
+.theme-browser .theme.add-new-theme:focus:after {
 	border-color: transparent;
 	color: #fff;
 	background: #0074a2;
@@ -387,7 +392,8 @@
 	margin-bottom: 10%;
 }
 
-.theme-browser .theme.add-new-theme:hover .theme-name {
+.theme-browser .theme.add-new-theme:hover .theme-name,
+.theme-browser .theme.add-new-theme:focus .theme-name {
 	color: #fff;
 	z-index: 2;
 }
@@ -954,11 +960,14 @@ body.folded .theme-overlay .theme-wrap {
 	}
 
 	.theme:not(.active):hover .theme-actions,
-	.theme:hover .more-details {
+	.theme:not(.active):focus .theme-actions,
+	.theme:hover .more-details,
+	.theme:focus .more-details {
 		display: none;
 	}
 
-	.theme-browser.rendered .theme:hover .theme-screenshot img {
+	.theme-browser.rendered .theme:hover .theme-screenshot img,
+	.theme-browser.rendered .theme:focus .theme-screenshot img {
 		opacity: 1.0;
 	}
 }
@@ -1163,12 +1172,22 @@ body.show-upload-theme .upload-theme + .theme-navigation + .theme-browser {
 }
 body.more-filters-opened .more-filters,
 body.more-filters-opened .more-filters:before {
-	background: rgb(46, 162, 204);
+	background: #777;
 	-webkit-border-radius: 2px;
 	border-radius: 2px;
 	border: none;
 	color: #fff;
+	-webkit-transition: color .1s ease-in, background .1s ease-in;
+	transition: color .1s ease-in, background .1s ease-in;
 }
+
+body.more-filters-opened .more-filters:hover,
+body.more-filters-opened .more-filters:focus,
+body.more-filters-opened .more-filters:hover:before,
+body.more-filters-opened .more-filters:focus:before {
+	background: rgb(46, 162, 204);
+}
+
 .theme-install-php .theme-search {
 	position: absolute;
 	right: 10px;

wp-admin/js/theme.js

@@ -235,6 +235,7 @@ themes.view.Theme = wp.Backbone.View.extend({
 		'click .preview': 'preview',
 		'keydown': themes.isInstall ? 'preview': 'expand',
 		'touchend': themes.isInstall ? 'preview': 'expand',
+		'keyup': 'addFocus',
 		'touchmove': 'preventExpand'
 	},
 
@@ -264,6 +265,14 @@ themes.view.Theme = wp.Backbone.View.extend({
 		}
 	},
 
+	// Add class of focus to the theme we are focused on.
+	addFocus: function() {
+		var $themeToFocus = ( $( ':focus' ).hasClass( 'theme' ) ) ? $( ':focus' ) : $(':focus').parents('.theme');
+
+		$('.theme.focus').removeClass('focus');
+		$themeToFocus.addClass('focus');
+	},
+
 	// Single theme overlay screen
 	// It's shown when clicking a theme
 	expand: function( event ) {
@@ -303,6 +312,16 @@ themes.view.Theme = wp.Backbone.View.extend({
 			return this.touchDrag = false;
 		}
 
+		// 'enter' and 'space' keys expand the details view when a theme is :focused
+		if ( event.type === 'keydown' && ( event.which !== 13 && event.which !== 32 ) ) {
+			return;
+		}
+
+		// pressing enter while focused on the buttons shouldn't open the preview
+		if ( event.type === 'keydown' && event.which !== 13 && $( ':focus' ).hasClass( 'button' ) ) {
+			return;
+		}
+
 		event.preventDefault();
 
 		event = event || window.event;
@@ -932,6 +951,12 @@ themes.view.InstallerSearch =  themes.view.Search.extend({
 
 	// Handles Ajax request for searching through themes in public repo
 	search: function( event ) {
+
+		// Tabbing or reverse tabbing into the search input shouldn't trigger a search
+		if ( event.type === 'keyup' && ( event.which === 9 || event.which === 16 ) ) {
+			return;
+		}
+
 		this.collection = this.options.parent.view.collection;
 
 		// Clear on escape.
@@ -1085,6 +1110,8 @@ themes.view.Installer = themes.view.Appearance.extend({
 		var $el = $( event.target ),
 			sort = $el.data( 'sort' );
 
+		event.preventDefault();
+
 		// Bail if this is already active
 		if ( $el.hasClass( this.activeClass ) ) {
 			return;

wp-admin/theme-install.php

@@ -104,8 +104,8 @@ include(ABSPATH . 'wp-admin/admin-header.php');
 <div class="wrap">
 	<h2>
 		<?php echo esc_html( $title ); ?>
-		<a class="upload add-new-h2"><?php _e( 'Upload Theme' ); ?></a>
+		<a href="#" class="upload add-new-h2"><?php _e( 'Upload Theme' ); ?></a>
-		<a class="browse-themes add-new-h2"><?php _ex( 'Browse', 'themes' ); ?></a>
+		<a href="#" class="browse-themes add-new-h2"><?php _ex( 'Browse', 'themes' ); ?></a>
 	</h2>
 
 	<div class="upload-theme">
@@ -114,13 +114,13 @@ include(ABSPATH . 'wp-admin/admin-header.php');
 
 	<div class="theme-navigation">
 		<span class="theme-count"></span>
-		<span class="theme-section current" data-sort="featured"><?php _ex( 'Featured', 'themes' ); ?></span>
+		<a class="theme-section current" href="#" data-sort="featured"><?php _ex( 'Featured', 'themes' ); ?></a>
-		<span class="theme-section" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></span>
+		<a class="theme-section" href="#" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></a>
-		<span class="theme-section" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></span>
+		<a class="theme-section" href="#" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></a>
 		<div class="theme-top-filters">
 			<!--<span class="theme-filter" data-filter="photoblogging">Photography</span>
 			<span class="theme-filter" data-filter="responsive-layout">Responsive</span>-->
-			<span class="more-filters"><?php _e( 'Feature Filter' ); ?></span>
+			<a class="more-filters" href="#"><?php _e( 'Feature Filter' ); ?></a>
 		</div>
 		<div class="more-filters-container">
 		<?php