Changeset 41802

Timestamp:

10/09/2017 11:00:39 PM (9 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>