Index: /trunk/src/wp-admin/css/colors/_admin.scss =================================================================== --- /trunk/src/wp-admin/css/colors/_admin.scss (revision 27803) +++ /trunk/src/wp-admin/css/colors/_admin.scss (revision 27804) @@ -440,7 +440,16 @@ body.more-filters-opened .more-filters, body.more-filters-opened .more-filters:before { + 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; - background-color: $menu-highlight-background; -} +} + /* jQuery UI Slider */ Index: /trunk/src/wp-admin/css/themes.css =================================================================== --- /trunk/src/wp-admin/css/themes.css (revision 27803) +++ /trunk/src/wp-admin/css/themes.css (revision 27804) @@ -39,4 +39,8 @@ position: relative; top: -3px; +} + +.theme-navigation a { + text-decoration:none; } @@ -98,5 +102,5 @@ } -/* 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)"; @@ -113,5 +117,7 @@ } -.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; @@ -158,9 +164,11 @@ } -.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; } @@ -190,12 +198,5 @@ 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; @@ -206,5 +207,6 @@ } -.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; @@ -360,14 +362,17 @@ } -.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; @@ -388,5 +393,6 @@ } -.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; @@ -955,9 +961,12 @@ .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; } @@ -1164,10 +1173,20 @@ 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; Index: /trunk/src/wp-admin/js/theme.js =================================================================== --- /trunk/src/wp-admin/js/theme.js (revision 27803) +++ /trunk/src/wp-admin/js/theme.js (revision 27804) @@ -236,4 +236,5 @@ 'keydown': themes.isInstall ? 'preview': 'expand', 'touchend': themes.isInstall ? 'preview': 'expand', + 'keyup': 'addFocus', 'touchmove': 'preventExpand' }, @@ -265,4 +266,12 @@ }, + // 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 @@ -302,4 +311,14 @@ if ( this.touchDrag === true ) { 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; } @@ -933,4 +952,10 @@ // 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; @@ -1086,4 +1111,6 @@ sort = $el.data( 'sort' ); + event.preventDefault(); + // Bail if this is already active if ( $el.hasClass( this.activeClass ) ) { Index: /trunk/src/wp-admin/theme-install.php =================================================================== --- /trunk/src/wp-admin/theme-install.php (revision 27803) +++ /trunk/src/wp-admin/theme-install.php (revision 27804) @@ -105,6 +105,6 @@