Changeset 33153

Timestamp:

07/10/2015 09:21:07 PM (9 years ago)

Author:

ocean90

Message:

Customizer: Use a <button> for the collapse sidebar … button.

props afercia.
fixes #32819.

Location:

trunk/src

Files:

• wp-admin/css/customize-controls.css (modified) (1 diff)
• wp-admin/css/customize-nav-menus.css (modified) (1 diff)
• wp-admin/css/themes.css (modified) (5 diffs)
• wp-admin/customize.php (modified) (1 diff)
• wp-admin/includes/class-wp-theme-install-list-table.php (modified) (1 diff)
• wp-admin/js/customize-controls.js (modified) (1 diff)
• wp-admin/js/theme.js (modified) (1 diff)
• wp-admin/theme-install.php (modified) (2 diffs)
• wp-includes/script-loader.php (modified) (1 diff)

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

@@ -649 +649 @@
 }
 
-.collapse-sidebar {
-    background-color: transparent !important;
-    border: none !important;
-    -webkit-box-shadow: none !important;
-    box-shadow: none !important;
-    -webkit-border-radius: 0 !important;
-    border-radius: 0 !important;
-}
-
-
-.collapse-sidebar:active,
-.collapse-sidebar:active .collapse-sidebar-label,
-.collapse-sidebar:active .collapse-sidebar-arrow:before {
-    text-shadow: none;
-}
-
-.collapsed .collapse-sidebar-arrow:before {
-    color: #82878c;
-}
-
 /* Style for custom settings */
 

trunk/src/wp-admin/css/customize-nav-menus.css

@@ -378 +378 @@
 #accordion-panel-nav_menus.field-description-active .field-description {
     display: block;
-}
-
-
-/* Not exactly sure what broke this, or why it works without these styles in core. */
-.wp-customizer .wp-full-overlay a.collapse-sidebar {
-    position: fixed;
-    left: 0;
 }
 

trunk/src/wp-admin/css/themes.css

@@ -512 +512 @@
     content: "\f345";
 }
-
-
 
 .theme-overlay .theme-wrap {
@@ -1471 +1469 @@
 
 /* Collapse Button */
-.wp-full-overlay a.collapse-sidebar {
-    position: absolute;
-    bottom: 12px;
-    left: 0;
-    z-index: 50;
-    display: block;
-    width: 19px;
-    height: 19px;
-    margin-left: 15px;
+.wp-core-ui .wp-full-overlay .collapse-sidebar {
+    position: fixed;
+    bottom: 8px;
+    left: 10px;
     padding: 0;
+    color: #656a6f;
+    outline: 0;
+    line-height: 1;
+    background-color: transparent !important;
+    border: none !important;
+    -webkit-box-shadow: none !important;
+    box-shadow: none !important;
+    -webkit-border-radius: 0 !important;
+    border-radius: 0 !important;
+}
+
+.wp-core-ui .wp-full-overlay .collapse-sidebar:hover,
+.wp-core-ui .wp-full-overlay .collapse-sidebar:focus {
+    color: #0073aa;
+}
+
+.wp-full-overlay .collapse-sidebar-arrow,
+.wp-full-overlay .collapse-sidebar-label {
+    display: inline-block;
+    vertical-align: middle;
+    line-height: 20px;
+}
+
+.wp-full-overlay .collapse-sidebar-arrow {
+    width: 20px;
+    height: 20px;
+    margin: 0 2px; /* avoid the focus box-shadow to be cut-off */
     -webkit-border-radius: 50%;
     border-radius: 50%;
-    color: #777;
-    text-decoration: none;
-}
-
-.wp-full-overlay a.collapse-sidebar:hover {
-    color: #0073aa;
-}
-
-.wp-full-overlay.collapsed .collapse-sidebar {
-    position: absolute;
-    left: 100%;
-}
-
-.wp-full-overlay .collapse-sidebar-arrow {
-    position: static;
-    margin-top: 0;
-    margin-left: 0;
-    display: block;
-    width: auto;
-    height: auto;
-    background: none;
+    overflow: hidden;
+}
+
+.wp-full-overlay .collapse-sidebar:hover .collapse-sidebar-arrow,
+.wp-full-overlay .collapse-sidebar:focus .collapse-sidebar-arrow {
+    -webkit-box-shadow:
+        0 0 0 1px #5b9dd9,
+        0 0 2px 1px rgba(30, 140, 190, .8);
+    box-shadow:
+        0 0 0 1px #5b9dd9,
+        0 0 2px 1px rgba(30, 140, 190, .8);
+}
+
+.wp-full-overlay .collapse-sidebar-label {
+    margin-left: 3px;
+}
+
+.wp-full-overlay.collapsed .collapse-sidebar-label {
+    display: none;
 }
 
 .wp-full-overlay .collapse-sidebar-arrow:before {
-    -webkit-border-radius: 50%;
-    border-radius: 50%;
-    float: left;
+    display: block;
     content: "\f148";
     background: #eee;
     font: normal 20px/1 'dashicons';
     speak: none;
-    display: block;
     padding: 0;
-    text-indent: 0;
-    text-align: center;
-    position: relative;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    text-decoration: none !important;
 }
 
@@ -1527 +1538 @@
 .wp-full-overlay.collapsed .collapse-sidebar-arrow:before,
 .rtl .wp-full-overlay .collapse-sidebar-arrow:before {
-    -webkit-transform: rotate(180deg);
-    -ms-transform: rotate(180deg);
-    transform: rotate(180deg);
+    -webkit-transform: rotate(180.001deg);
+    -ms-transform: rotate(180.001deg);
+    transform: rotate(180.001deg); /* Firefox: promoting to its own layer to trigger anti-aliasing  */
 }
 
@@ -1536 +1547 @@
     -ms-transform: none;
     transform: none;
-}
-
-.wp-full-overlay.collapsed .collapse-sidebar-arrow {
-    background-position: -1px -109px;
-}
-
-.wp-full-overlay .collapse-sidebar-label {
-    position: absolute;
-    left: 100%;
-    line-height: 20px;
-    margin-left: 10px;
-}
-
-.wp-full-overlay.collapsed .collapse-sidebar-label {
-    display: none;
 }
 
@@ -1613 +1609 @@
 }
 
-#customize-container .collapse-sidebar {
-    bottom: 16px;
-}
-
 #customize-controls {
     margin-top: 0;

trunk/src/wp-admin/customize.php

@@ -167 +167 @@
 
         <div id="customize-footer-actions" class="wp-full-overlay-footer">
-            <a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>">
+            <button type="button" class="collapse-sidebar button-secondary" aria-expanded="true" aria-label="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
                 <span class="collapse-sidebar-arrow"></span>
-                <span class="collapse-sidebar-label"><?php _e('Collapse'); ?></span>
-            </a>
+                <span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>
+            </button>
         </div>
     </form>

trunk/src/wp-admin/includes/class-wp-theme-install-list-table.php

@@ -329 +329 @@
                 </div>
                 <div class="wp-full-overlay-footer">
-                    <a href="#" class="collapse-sidebar" title="<?php esc_attr_e('Collapse Sidebar'); ?>">
-                        <span class="collapse-sidebar-label"><?php _e('Collapse'); ?></span>
+                    <button type="button" class="collapse-sidebar button-secondary" aria-expanded="true" aria-label="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
                         <span class="collapse-sidebar-arrow"></span>
-                    </a>
+                        <span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>
+                    </button>
                 </div>
             </div>

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

@@ -3087 +3087 @@
         });
 
-        $('.collapse-sidebar').on( 'click keydown', function( event ) {
-            if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
-                return;
+        $( '.collapse-sidebar' ).on( 'click', function() {
+            if ( 'true' === $( this ).attr( 'aria-expanded' ) ) {
+                $( this ).attr({ 'aria-expanded': 'false', 'aria-label': api.l10n.expandSidebar });
+            } else {
+                $( this ).attr({ 'aria-expanded': 'true', 'aria-label': api.l10n.collapseSidebar });
             }
 
             overlay.toggleClass( 'collapsed' ).toggleClass( 'expanded' );
-            event.preventDefault();
         });
 

trunk/src/wp-admin/js/theme.js

@@ -794 +794 @@
     },
 
-    collapse: function() {
+    collapse: function( event ) {
+        var $button = $( event.currentTarget );
+        if ( 'true' === $button.attr( 'aria-expanded' ) ) {
+            $button.attr({ 'aria-expanded': 'false', 'aria-label': l10n.expandSidebar });
+        } else {
+            $button.attr({ 'aria-expanded': 'true', 'aria-label': l10n.collapseSidebar });
+        }
 
         this.$el.toggleClass( 'collapsed' ).toggleClass( 'expanded' );

trunk/src/wp-admin/theme-install.php

@@ -52 +52 @@
         'themesFound'   => __( 'Number of Themes found: %d' ),
         'noThemesFound' => __( 'No themes found. Try a different search.' ),
+        'collapseSidebar'    => __( 'Collapse Sidebar' ),
+        'expandSidebar'      => __( 'Expand Sidebar' ),
     ),
     'installedThemes' => array_keys( $installed_themes ),
@@ -253 +255 @@
         </div>
         <div class="wp-full-overlay-footer">
-            <a href="#" class="collapse-sidebar" title="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
+            <button type="button" class="collapse-sidebar button-secondary" aria-expanded="true" aria-label="<?php esc_attr_e( 'Collapse Sidebar' ); ?>">
+                <span class="collapse-sidebar-arrow"></span>
                 <span class="collapse-sidebar-label"><?php _e( 'Collapse' ); ?></span>
-                <span class="collapse-sidebar-arrow"></span>
-            </a>
+            </button>
         </div>
     </div>

trunk/src/wp-includes/script-loader.php

@@ -420 +420 @@
         'previewIframeTitle' => __( 'Site Preview' ),
         'loginIframeTitle'   => __( 'Session expired' ),
-
+        'collapseSidebar'    => __( 'Collapse Sidebar' ),
+        'expandSidebar'      => __( 'Expand Sidebar' ),
         // Used for overriding the file types allowed in plupload.
-        'allowedFiles' => __( 'Allowed Files' ),
+        'allowedFiles'       => __( 'Allowed Files' ),
     ) );