diff --git a/src/js/_enqueues/wp/theme.js b/src/js/_enqueues/wp/theme.js index cfcea1fcc58b7..7190e3638f312 100644 --- a/src/js/_enqueues/wp/theme.js +++ b/src/js/_enqueues/wp/theme.js @@ -1653,7 +1653,7 @@ themes.view.InstallerSearch = themes.view.Search.extend({ request.tag = [ value.slice( 4 ) ]; } - $( '.filter-links li > a.current' ) + $( '.filter-links [data-sort].current' ) .removeClass( 'current' ) .removeAttr( 'aria-current' ); @@ -1675,7 +1675,7 @@ themes.view.Installer = themes.view.Appearance.extend({ // Register events for sorting and filters in theme-navigation. events: { - 'click .filter-links li > a': 'onSort', + 'click .filter-links [data-sort]': 'onSort', 'click .theme-filter': 'onFilter', 'click .drawer-toggle': 'moreFilters', 'click .filter-drawer .apply-filters': 'applyFilters', @@ -1786,7 +1786,7 @@ themes.view.Installer = themes.view.Appearance.extend({ // Track sorting so we can restore the correct tab when closing preview. themes.router.selectedTab = sort; - $( '.filter-links li > a, .theme-filter' ) + $( '.filter-links [data-sort], .theme-filter' ) .removeClass( this.activeClass ) .removeAttr( 'aria-current' ); @@ -1814,7 +1814,7 @@ themes.view.Installer = themes.view.Appearance.extend({ return; } - $( '.filter-links li > a, .theme-section' ) + $( '.filter-links [data-sort], .theme-section' ) .removeClass( this.activeClass ) .removeAttr( 'aria-current' ); $el @@ -1857,7 +1857,7 @@ themes.view.Installer = themes.view.Appearance.extend({ } $( 'body' ).addClass( 'filters-applied' ); - $( '.filter-links li > a.current' ) + $( '.filter-links [data-sort].current' ) .removeClass( 'current' ) .removeAttr( 'aria-current' ); diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 980702d31fb80..2f6cf4b6776ea 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -1087,13 +1087,27 @@ th.action-links { margin: 0; } -.filter-links li > a { +.filter-links li > a, +.filter-links li > button { display: inline-block; margin: 0 10px; padding: 15px 0; + border: 0; border-bottom: 4px solid #fff; + background: none; color: #646970; cursor: pointer; + font: inherit; + transition-property: border, background, color; + transition-duration: .05s; + transition-timing-function: ease-in-out; +} + +.filter-links li > button:focus { + border-radius: 2px; + box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color, #3858e9); + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; } .filter-links .current { @@ -1106,8 +1120,10 @@ th.action-links { .filter-links li > a:hover, .filter-links li > a:focus, -.show-filters .filter-links a.current:hover, -.show-filters .filter-links a.current:focus { +.filter-links li > button:hover, +.filter-links li > button:focus, +.show-filters .filter-links .current:hover, +.show-filters .filter-links .current:focus { color: var(--wp-admin-theme-color); } @@ -1237,7 +1253,7 @@ th.action-links { display: block; } -.show-filters .filter-links a.current { +.show-filters .filter-links .current { border-bottom: none; } diff --git a/src/wp-admin/theme-install.php b/src/wp-admin/theme-install.php index 8e6fc5d1eea2c..0a1a443fea29e 100644 --- a/src/wp-admin/theme-install.php +++ b/src/wp-admin/theme-install.php @@ -210,10 +210,10 @@