Changeset 27804

Timestamp:

03/28/2014 03:15:30 AM (10 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">