Changeset 27804

Timestamp:

03/28/2014 03:15:30 AM (13 years ago)

Author:

helen

Message:

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

Location:

trunk/src/wp-admin

Files:

• css/colors/_admin.scss (modified) (1 diff)
• css/themes.css (modified) (10 diffs)
• js/theme.js (modified) (5 diffs)
• theme-install.php (modified) (2 diffs)

trunk/src/wp-admin/css/colors/_admin.scss

@@ -440 +440 @@
 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 */

trunk/src/wp-admin/css/themes.css

@@ -39 +39 @@
         position: relative;
         top: -3px;
+}
+
+.theme-navigation a {
+        text-decoration:none;
 }
 
@@ -98 +102 @@
 }
 
-/* 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 +117 @@
 }
 
-.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 +164 @@
 }
 
-.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 +198 @@
         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 +207 @@
 }
 
-.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 +362 @@
 }
 
-.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 +393 @@
 }
 
-.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 +961 @@
 
         .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 +1173 @@
 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;

trunk/src/wp-admin/js/theme.js

@@ -236 +236 @@
                 'keydown': themes.isInstall ? 'preview': 'expand',
                 'touchend': themes.isInstall ? 'preview': 'expand',
+                'keyup': 'addFocus',
                 'touchmove': 'preventExpand'
         },
@@ -265 +266 @@
         },
 
+        // 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 +311 @@
                 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 +952 @@
         // 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 +1111 @@
                         sort = $el.data( 'sort' );
 
+                event.preventDefault();
+
                 // Bail if this is already active
                 if ( $el.hasClass( this.activeClass ) ) {

trunk/src/wp-admin/theme-install.php

@@ -105 +105 @@
         <h2>
                 <?php echo esc_html( $title ); ?>
-                <a 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="upload add-new-h2"><?php _e( 'Upload Theme' ); ?></a>
+                <a href="#" class="browse-themes add-new-h2"><?php _ex( 'Browse', 'themes' ); ?></a>
         </h2>
 
@@ -115 +115 @@
         <div class="theme-navigation">
                 <span class="theme-count"></span>
-                <span class="theme-section current" data-sort="featured"><?php _ex( 'Featured', 'themes' ); ?></span>
-                <span class="theme-section" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></span>
-                <span class="theme-section" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></span>
+                <a class="theme-section current" href="#" data-sort="featured"><?php _ex( 'Featured', 'themes' ); ?></a>
+                <a class="theme-section" href="#" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></a>
+                <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">