Ticket #40747: 40747.patch

wp-admin/css/common.css

@@ -1030 +1030 @@
         margin: 0;
 }
 
-.filter-links li > a {
+.filter-links li > a,
+.filter-links li > button {
         display: inline-block;
         margin: 0 10px;
         padding: 15px 0;
@@ -1039 +1040 @@
         cursor: pointer;
 }
 
+.filter-links li > button {
+        background: none;
+        border-left: none;
+        border-right: none;
+        border-top: none;
+        padding-bottom: 16px;
+}
+
 .filter-links .current {
         -webkit-box-shadow: none;
         box-shadow: none;
@@ -1049 +1058 @@
 .filter-links li > a:hover,
 .filter-links li > a:focus,
 .show-filters .filter-links a.current:hover,
-.show-filters .filter-links a.current:focus {
+.show-filters .filter-links a.current:focus,
+.filter-links li > button:hover,
+.filter-links li > button:focus,
+.show-filters .filter-links button.current:hover,
+.show-filters .filter-links button.current:focus {
         color: #00a0d2;
+        outline: none;
 }
 
 .wp-filter .search-form {

wp-admin/js/theme.js

@@ -1534 +1534 @@
                         request.tag = [ value.slice( 4 ) ];
                 }
 
-                $( '.filter-links li > a.current' ).removeClass( 'current' );
+                $( '.filter-links li > a.current, .filter-links li > button.current' ).removeClass( 'current' );
                 $( 'body' ).removeClass( 'show-filters filters-applied show-favorites-form' );
                 $( '.drawer-toggle' ).attr( 'aria-expanded', 'false' );
 
@@ -1554 +1554 @@
         // Register events for sorting and filters in theme-navigation
         events: {
                 'click .filter-links li > a': 'onSort',
+                'click .filter-links li > button': 'onSort',
                 'click .theme-filter': 'onFilter',
                 'click .drawer-toggle': 'moreFilters',
                 'click .filter-drawer .apply-filters': 'applyFilters',
@@ -1651 +1652 @@
         sort: function( sort ) {
                 this.clearSearch();
 
-                $( '.filter-links li > a, .theme-filter' ).removeClass( this.activeClass );
+                $( '.filter-links li > a, .filter-links li > button, .theme-filter' ).removeClass( this.activeClass );
                 $( '[data-sort="' + sort + '"]' ).addClass( this.activeClass );
 
                 if ( 'favorites' === sort ) {
@@ -1674 +1675 @@
                         return;
                 }
 
-                $( '.filter-links li > a, .theme-section' ).removeClass( this.activeClass );
+                $( '.filter-links li > a, .filter-links li > button, .theme-section' ).removeClass( this.activeClass );
                 $el.addClass( this.activeClass );
 
                 if ( ! filter ) {
@@ -1713 +1714 @@
                 }
 
                 $( 'body' ).addClass( 'filters-applied' );
-                $( '.filter-links li > a.current' ).removeClass( 'current' );
+                $( '.filter-links li > a.current, .filter-links li > button.current' ).removeClass( 'current' );
                 filteringBy.empty();
 
                 _.each( tags, function( tag ) {

wp-admin/theme-install.php

@@ -161 +161 @@
                 </div>
 
                 <ul class="filter-links">
-                        <li><a href="#" data-sort="featured"><?php _ex( 'Featured', 'themes' ); ?></a></li>
-                        <li><a href="#" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></a></li>
-                        <li><a href="#" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></a></li>
-                        <li><a href="#" data-sort="favorites"><?php _ex( 'Favorites', 'themes' ); ?></a></li>
+                        <li><button type="button" data-sort="featured"><?php _ex( 'Featured', 'themes' ); ?></button></li>
+                        <li><button type="button" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></button></li>
+                        <li><button type="button" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></button></li>
+                        <li><button type="button" data-sort="favorites"><?php _ex( 'Favorites', 'themes' ); ?></button></li>
                 </ul>
 
                 <button type="button" class="button drawer-toggle" aria-expanded="false"><?php _e( 'Feature Filter' ); ?></button>