Ticket #36627: 36627.02.patch

src/wp-admin/css/themes.css

@@ -1329 +1329 @@
 .theme-install-overlay .close-full-overlay,
 .theme-install-overlay .previous-theme,
 .theme-install-overlay .next-theme {
-        display: block;
+        padding: 0;
         position: relative;
         float: left;
-        width: 45px;
+        width: 48px;
         height: 45px;
-        padding-right: 2px;
-        background: #eee;
+        background: transparent;
+        border: 0;
         border-right: 1px solid #ddd;
         color: #444;
         cursor: pointer;
-        text-decoration: none;
+        line-height: 1;
         -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
         transition: color .1s ease-in-out, background .1s ease-in-out;
 }
@@ -1361 +1361 @@
 .theme-install-overlay .close-full-overlay:before {
         font: normal 22px/1 dashicons;
         content: "\f335";
-        position: relative;
-        top: 7px;
-        left: 13px;
 }
 
 .theme-install-overlay .previous-theme:before {
         font: normal 20px/1 dashicons;
         content: "\f341";
-        position: relative;
-        top: 6px;
-        left: 14px;
 }
 
 .theme-install-overlay .next-theme:before {
         font: normal 20px/1 dashicons;
         content: "\f345";
-        position: relative;
-        top: 6px;
-        left: 13px;
 }
 
 .theme-install-overlay .previous-theme.disabled,

src/wp-admin/js/theme.js

@@ -572 +572 @@
 
                 // Disable previous at the zero position
                 if ( 0 === this.model.collection.indexOf( current ) ) {
-                        $themeInstaller.find( '.previous-theme' ).addClass( 'disabled' );
+                        $themeInstaller.find( '.previous-theme' ).addClass( 'disabled' ).attr({ 'tabindex': '-1', 'aria-hidden': 'true' });
                 }
 
                 // Disable next if the next model is undefined
                 if ( _.isUndefined( this.model.collection.at( this.model.collection.indexOf( current ) + 1 ) ) ) {
-                        $themeInstaller.find( '.next-theme' ).addClass( 'disabled' );
+                        $themeInstaller.find( '.next-theme' ).addClass( 'disabled' ).attr({ 'tabindex': '-1', 'aria-hidden': 'true' });
                 }
         }
 });
@@ -697 +697 @@
 
                 // Disable Left/Right when at the start or end of the collection
                 if ( this.model.cid === this.model.collection.at(0).cid ) {
-                        this.$el.find( '.left' ).addClass( 'disabled' );
+                        this.$el.find( '.left' ).addClass( 'disabled' ).attr({ 'tabindex': '-1', 'aria-hidden': 'true' });
                 }
                 if ( this.model.cid === this.model.collection.at( this.model.collection.length - 1 ).cid ) {
-                        this.$el.find( '.right' ).addClass( 'disabled' );
+                        this.$el.find( '.right' ).addClass( 'disabled' ).attr({ 'tabindex': '-1', 'aria-hidden': 'true' });
                 }
         },
 

src/wp-admin/theme-install.php

@@ -251 +251 @@
 <script id="tmpl-theme-preview" type="text/template">
         <div class="wp-full-overlay-sidebar">
                 <div class="wp-full-overlay-header">
-                        <a href="#" class="close-full-overlay"><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></a>
-                        <a href="#" class="previous-theme"><span class="screen-reader-text"><?php _ex( 'Previous', 'Button label for a theme' ); ?></span></a>
-                        <a href="#" class="next-theme"><span class="screen-reader-text"><?php _ex( 'Next', 'Button label for a theme' ); ?></span></a>
+                        <button type="button" class="close-full-overlay"><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></button>
+                        <button type="button" class="previous-theme"><span class="screen-reader-text"><?php _ex( 'Previous', 'Button label for a theme' ); ?></span></button>
+                        <button type="button" class="next-theme"><span class="screen-reader-text"><?php _ex( 'Next', 'Button label for a theme' ); ?></span></button>
                 <# if ( data.installed ) { #>
-                        <a href="#" class="button button-primary theme-install disabled"><?php _ex( 'Installed', 'theme' ); ?></a>
+                        <span class="button button-primary theme-install disabled"><?php _ex( 'Installed', 'theme' ); ?></span>
                 <# } else { #>
                         <a href="{{ data.install_url }}" class="button button-primary theme-install"><?php _e( 'Install' ); ?></a>
                 <# } #>

src/wp-admin/themes.php

@@ -404 +404 @@
         <div class="theme-backdrop"></div>
         <div class="theme-wrap wp-clearfix">
                 <div class="theme-header">
-                        <button class="left dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show previous theme' ); ?></span></button>
-                        <button class="right dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show next theme' ); ?></span></button>
-                        <button class="close dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Close details dialog' ); ?></span></button>
+                        <button type="button" class="left dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show previous theme' ); ?></span></button>
+                        <button type="button" class="right dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Show next theme' ); ?></span></button>
+                        <button type="button" class="close dashicons dashicons-no"><span class="screen-reader-text"><?php _e( 'Close details dialog' ); ?></span></button>
                 </div>
                 <div class="theme-about wp-clearfix">
                         <div class="theme-screenshots">