Ticket #26527: 26527.diff

src/wp-admin/css/wp-admin.css

@@ -6483 +6483 @@
         padding: 15px 12px;
         text-align: center;
         border-radius: 3px;
+    text-decoration:none;
         -webkit-transition: opacity 0.1s ease-in-out;
         transition:         opacity 0.1s ease-in-out;
 }
 
-.theme-browser.rendered .theme:hover .more-details {
+.theme-browser.rendered .theme:hover .more-details,
+.theme-browser.rendered .theme .more-details:focus {
         opacity: 1;
 }
 
+
 /**
  * Displays a theme update notice
  * when an update is available.

src/wp-admin/js/theme.js

@@ -188 +188 @@
 
         events: {
                 'click': 'expand',
+        'click': 'preventDefault',
                 'touchend': 'expand',
                 'touchmove': 'preventExpand'
         },
@@ -235 +236 @@
                 this.trigger( 'theme:expand', self.model.cid );
         },
 
+    preventDefault: function( event ) {
+        event.preventDefault();
+        this.expand();
+
+    },
+
         preventExpand: function() {
                 this.touchDrag = true;
         }
@@ -487 +494 @@
                         // Binds to theme:expand to show the modal box
                         // with the theme details
                         self.listenTo( self.theme, 'theme:expand', self.expand, self );
+                        self.listenTo( self.theme, 'theme:expand', self.expand, self );
                 });
 
                 // 'Add new theme' element shown at the end of the grid
@@ -735 +743 @@
         };
 
         $(window).resize(function(){ tb_position(); });
+
+
+    // Hacky Hack to make theme actions available via keyboard navigation 
+    $('.theme-browser .theme .theme-actions a').on('focus', function(){
+        if ( $(this).parent().parent().hasClass('active') === false ) {
+            $(this).parent().css('opacity', '1')
+        }
+    });
+    $('.theme-browser .theme .theme-actions a').on('blur', function(){
+        console.log( $(this).parent().parent().hasClass('active') )
+        if ( $(this).parent().parent().hasClass('active') === false ) {
+            $(this).parent().css('opacity', '0')
+        }
+    });
+    
 });

src/wp-admin/themes.php

@@ -200 +200 @@
         <?php } else { ?>
                 <div class="theme-screenshot blank"></div>
         <?php } ?>
-        <span class="more-details"><?php _e( 'Theme Details' ); ?></span>
+        <a class="more-details" href="#"><?php _e( 'Theme Details' ); ?></a>
         <div class="theme-author"><?php printf( __( 'By %s' ), $theme['author'] ); ?></div>
 
         <?php if ( $theme['active'] ) { ?>
@@ -277 +277 @@
         <# } else { #>
                 <div class="theme-screenshot blank"></div>
         <# } #>
-        <span class="more-details"><?php _e( 'Theme Details' ); ?></span>
+        <a class="more-details" href="#"><?php _e( 'Theme Details' ); ?></a>
         <div class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.author }}}' ); ?></div>
         
         <# if ( data.active ) { #>