Ticket #28655: 28655.diff

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

@@ -472 +472 @@
         color: $menu-highlight-text;
 }
 
+.customize-controls-close:focus,
+.customize-controls-close:hover,
 .control-panel-back:focus,
 .control-panel-back:hover {
         background-color: $menu-highlight-background;

src/wp-admin/css/customize-controls.css

@@ -170 +170 @@
         width: 100%;
 }
 
+
+.customize-controls-close {
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 45px;
+        height: 45px;
+        padding-right: 2px;
+        background: #eee;
+        border-right: 1px solid #ddd;
+        color: #444;
+        cursor: pointer;
+        -webkit-transition: color ease-in .1s;
+        transition: color ease-in .1s;
+}
+
 .control-panel-back {
         display: block;
         position: fixed;
@@ -190 +207 @@
         display: none;
 }
 
+.customize-controls-close:focus,
+.customize-controls-close:hover,
 .control-panel-back:focus,
 .control-panel-back:hover {
         background-color: #0074a2;
@@ -197 +216 @@
         outline: none;
 }
 
+.customize-controls-close:before {
+        font: normal 32px/1 dashicons;
+        content: "\f335";
+        position: relative;
+        top: 8px;
+        left: 7px;
+}
+
 .control-panel-back:before {
         font: normal 29px/1 dashicons;
         content: "\f340";
@@ -217 +244 @@
         height: 22px;
 }
 
-#customize-header-actions a.back {
-        position: relative;
-        left: 0;
-        -webkit-transition: left ease-in-out .18s;
-        transition: left ease-in-out .18s;
-}
-
-.in-sub-panel #customize-header-actions a.back {
-        left: -120px;
-}
-
 .wp-full-overlay-sidebar .wp-full-overlay-header {
         -webkit-transition: padding ease-in-out .18s;
         transition: padding ease-in-out .18s;

src/wp-admin/customize.php

@@ -108 +108 @@
                                 submit_button( $save_text, 'primary save', 'save', false );
                         ?>
                         <span class="spinner"></span>
-                        <a class="back button" href="<?php echo esc_url( $return ? $return : admin_url( 'themes.php' ) ); ?>">
-                                <?php _e( 'Cancel' ); ?>
+                        <a class="customize-controls-close" href="<?php echo esc_url( $return ? $return : admin_url( 'themes.php' ) ); ?>">
+                                <span class="screen-reader-text"><?php _e( 'Cancel' ); ?></span>
                         </a>
                 </div>
 

src/wp-admin/js/customize-controls.js

@@ -1041 +1041 @@
 
                         state.bind( 'change', function() {
                                 var save = $('#save'),
-                                        back = $('.back');
+                                        close = $('.customize-controls-close .screen-reader-text');
 
                                 if ( ! activated() ) {
                                         save.val( api.l10n.activate ).prop( 'disabled', false );
-                                        back.text( api.l10n.cancel );
+                                        close.text( api.l10n.cancel );
 
                                 } else if ( saved() ) {
                                         save.val( api.l10n.saved ).prop( 'disabled', true );
-                                        back.text( api.l10n.close );
+                                        close.text( api.l10n.close );
 
                                 } else {
                                         save.val( api.l10n.save ).prop( 'disabled', false );
-                                        back.text( api.l10n.cancel );
+                                        close.text( api.l10n.cancel );
                                 }
                         });