diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss index b4f298aa87..8fca300c9b 100644 --- a/src/wp-admin/css/colors/_admin.scss +++ b/src/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; - background-color: $menu-highlight-background; + color: $menu-text; + 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, diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css index cf240a1615..3dea4b7394 100644 --- a/src/wp-admin/css/themes.css +++ b/src/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; diff --git a/src/wp-admin/js/theme.js b/src/wp-admin/js/theme.js index f5e9d09a57..c80e3c0f10 100644 --- a/src/wp-admin/js/theme.js +++ b/src/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; diff --git a/src/wp-admin/theme-install.php b/src/wp-admin/theme-install.php index 4bd767a31c..9653317c6d 100644 --- a/src/wp-admin/theme-install.php +++ b/src/wp-admin/theme-install.php @@ -104,8 +104,8 @@ include(ABSPATH . 'wp-admin/admin-header.php');

- - + +

@@ -114,13 +114,13 @@ include(ABSPATH . 'wp-admin/admin-header.php');
- - - + + +
- +