Ticket #34816: 34816.3.diff

src/wp-admin/css/themes.css

@@ -828 +828 @@
 }
 
 /**
+ * Theme deletion dialog
+ */
+#delete-theme-dialog #delete-theme-dialog-message {
+        padding: 15px 25px;
+}
+
+/**
  * Basic Responsive structure...
  *
  * Shuffles theme columns around based on screen width

src/wp-admin/js/theme.js

@@ -714 +714 @@
                 this.trigger( 'theme:collapse' );
         },
 
-        // Confirmation dialog for deleting a theme
-        deleteTheme: function() {
-                return confirm( themes.data.settings.confirmDelete );
+        // Called by Themes view
+        keyEvent: function(e) {
+                // Pressing the right arrow key fires a theme:next event
+                if ( e.keyCode === 39 ) {
+                        self.overlay.nextTheme();
+                }
+
+                // Pressing the left arrow key fires a theme:previous event
+                if ( e.keyCode === 37 ) {
+                        self.overlay.previousTheme();
+                }
+
+                if ( e.keyCode === 27 ) {
+                        if ( $( '#delete-theme-dialog' ).hasClass( 'hidden' ) ) {
+                                // Pressing the escape key fires a theme:collapse event
+                                self.overlay.collapse( event );
+                        } else {
+                                // Close theme deletion dialog
+                                $( '#delete-theme-dialog' ).addClass( 'hidden' );
+                        }
+                }
+
+                if ( e.keyCode === 9 && !$( '#delete-theme-dialog' ).hasClass( 'hidden' ) ) {
+                        // Constrain tabbing within the theme deletion dialog
+                        var $target = $( e.target );
+                }
+        },
+
+        // Confirmation dialog for deleting a theme.
+        deleteTheme: function(e) {
+                e.preventDefault();
+
+                var originalTarget = $( e.target );
+
+                $( '#delete-theme-dialog' ).removeClass( 'hidden' ).focus();
+
+                $( '#delete-theme-dialog-cancel' ).on( 'click', function () {
+                        $( '#delete-theme-dialog' ).addClass( 'hidden' );
+                } );
+
+                $( '#delete-theme-dialog-confirm' ).attr( 'href', $( '.delete-theme' ).attr( 'href' ) );
         },
 
         nextTheme: function() {
@@ -901 +939 @@
                                 return;
                         }
 
-                        // Pressing the right arrow key fires a theme:next event
-                        if ( event.keyCode === 39 ) {
-                                self.overlay.nextTheme();
-                        }
-
-                        // Pressing the left arrow key fires a theme:previous event
-                        if ( event.keyCode === 37 ) {
-                                self.overlay.previousTheme();
-                        }
-
-                        // Pressing the escape key fires a theme:collapse event
-                        if ( event.keyCode === 27 ) {
-                                self.overlay.collapse( event );
-                        }
+                        self.overlay.keyEvent( event );
                 });
         },
 

src/wp-admin/themes.php

@@ -129 +129 @@
 wp_localize_script( 'theme', '_wpThemeSettings', array(
         'themes'   => $themes,
         'settings' => array(
-                'canInstall'    => ( ! is_multisite() && current_user_can( 'install_themes' ) ),
-                'installURI'    => ( ! is_multisite() && current_user_can( 'install_themes' ) ) ? admin_url( 'theme-install.php' ) : null,
-                'confirmDelete' => __( "Are you sure you want to delete this theme?\n\nClick 'Cancel' to go back, 'OK' to confirm the delete." ),
-                'adminUrl'      => parse_url( admin_url(), PHP_URL_PATH ),
+                'canInstall' => ( ! is_multisite() && current_user_can( 'install_themes' ) ),
+                'installURI' => ( ! is_multisite() && current_user_can( 'install_themes' ) ) ? admin_url( 'theme-install.php' ) : null,
+                'adminUrl'   => parse_url( admin_url(), PHP_URL_PATH ),
         ),
         'l10n' => array(
                 'addNew'            => __( 'Add New Theme' ),
@@ -456 +455 @@
                         </div>
 
                         <# if ( ! data.active && data.actions['delete'] ) { #>
-                                <a href="{{{ data.actions['delete'] }}}" class="button button-secondary delete-theme"><?php _e( 'Delete' ); ?></a>
+                                <a href="{{{ data.actions['delete'] }}}" class="button button-secondary delete-theme" aria-label="<?php esc_attr_e( 'Confirm deletion' ); ?>"><?php _e( 'Delete' ); ?></a>
                         <# } #>
                 </div>
         </div>
 </script>
-
+<div id="delete-theme-dialog" class="notification-dialog-wrap hidden" role="dialog" aria-label="<?php esc_attr_e( 'Confirm deletion' ); ?>" tabindex="0">
+        <div class="notification-dialog-background"></div>
+        <div class="notification-dialog">
+                <div id="delete-theme-dialog-message">
+                        <p><?php _e( 'Are you sure you want to delete this theme?' ); ?></p>
+                        <p>
+                                <button id="delete-theme-dialog-confirm" class="button button-primary"><?php _e( 'Delete' ); ?></button>
+                                <button id="delete-theme-dialog-cancel" class="button button-secondary"><?php _e( 'Cancel' ); ?></button>
+                        </p>
+                </div>
+        </div>
+</div>
 <?php require( ABSPATH . 'wp-admin/admin-footer.php' );