Changeset 41802

Timestamp:

10/09/2017 11:00:39 PM (7 years ago)

Author:

westonruter

Message:

Customize: Improve keyboard accessibility for publish settings section.

Props sayedwp.
See #39896.
Fixes #42027.

Location:

trunk/src

Files:

• wp-admin/css/customize-controls.css (modified) (5 diffs)
• wp-admin/customize.php (modified) (2 diffs)
• wp-includes/class-wp-customize-manager.php (modified) (1 diff)

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

@@ -39 +39 @@
     margin-top: 0;
 }
+
+#customize-save-button-wrapper .save:focus, #publish-settings:focus {
+    box-shadow: 0 1px 0 #0073aa, 0 0 2px 1px #33b3db; /* This is default box shadow for focus */
+}
+
 #customize-save-button-wrapper .save.has-next-sibling {
     border-radius: 3px 0 0 3px;
@@ -47 +52 @@
     top: 0;
     bottom: 0;
-    left: -301px;
+    left: 0;
     visibility: hidden;
     overflow-x: hidden;
     overflow-y: auto;
-    width: 300px;
+    width: 100%;
     margin: 0;
-    z-index: 4;
+    z-index: -1;
     background: #eee;
     transition: left .18s;
     border-right: 1px solid #ddd;
+    border-left: 1px solid #ddd;
     height: 100%;
 }
@@ -74 +80 @@
 .outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content {
     visibility: visible;
-    left: 0;
+    left: 100%;
     transition: left .18s;
 }
@@ -131 +137 @@
     overflow-y: auto;
     overflow-x: hidden;
+}
+
+.outer-section-open #customize-controls .wp-full-overlay-sidebar-content {
+    background: #eee;
 }
 
@@ -2829 +2839 @@
     }
 
+    body.wp-customizer .wp-full-overlay.expanded #customize-sidebar-outer-content {
+        left: -100%;
+    }
+
+    body.wp-customizer.outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content {
+        left: 0;
+    }
+
     #available-widgets .customize-section-title,
     #available-menu-items .customize-section-title {

trunk/src/wp-admin/customize.php

@@ -163 +163 @@
                 <span class="screen-reader-text"><?php _e( 'Close the Customizer and go back to the previous page' ); ?></span>
             </a>
+        </div>
+
+        <div id="customize-sidebar-outer-content">
+            <div id="customize-outer-theme-controls">
+                <ul class="customize-outer-pane-parent"><?php // Outer panel and sections are not implemented, but its here as a placeholder to avoid any side-effect in api.Section. ?></ul>
+            </div>
         </div>
 
@@ -218 +224 @@
     </form>
     <div id="customize-preview" class="wp-full-overlay-main"></div>
-    <div id="customize-sidebar-outer-content">
-        <div id="customize-outer-theme-controls">
-            <ul class="customize-outer-pane-parent"><?php // Outer panel and sections are not implemented, but its here as a placeholder to avoid any side-effect in api.Section. ?></ul>
-        </div>
-    </div>
     <?php
 

trunk/src/wp-includes/class-wp-customize-manager.php

@@ -3771 +3771 @@
                     <span class="screen-reader-text"><?php _e( '(opens in a new window)' ); ?></span>
                 </a>
-                <input id="{{ elementPrefix }}customize-preview-link-input" readonly class="preview-control-element" data-component="input">
+                <input id="{{ elementPrefix }}customize-preview-link-input" readonly tabindex="-1" class="preview-control-element" data-component="input">
                 <button class="customize-copy-preview-link preview-control-element button button-secondary" data-component="button" data-copy-text="<?php esc_attr_e( 'Copy' ); ?>" data-copied-text="<?php esc_attr_e( 'Copied' ); ?>" ><?php esc_html_e( 'Copy' ); ?></button>
             </div>