Changeset 38881

Timestamp:

10/23/2016 07:56:43 PM (8 years ago)

Author:

afercia

Message:

Customize: Keep previously uploaded header images in place.

On the Header Image section, the previously uploaded images disappeared off-screen
when using the keyboard to navigate and the remove "X" button got keyboard focus.
Changing the off-screen CSS technique used for the "X" buttons fixes it.

• improves the focus style on the previously uploaded and suggested images
• removes a tabindex="0" attribute from the current header image

Fixes #38156.

Location:

trunk/src

Files:

• wp-admin/css/customize-controls.css (modified) (5 diffs)
• wp-includes/customize/class-wp-customize-header-image-control.php (modified) (3 diffs)

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

@@ -918 +918 @@
     border: 0;
 }
+
+.customize-control-header .header-view.selected .choice:focus {
+    outline: none;
+}
+
 .customize-control-header .header-view.selected:after {
     content: '';
@@ -927 +932 @@
     border-radius: 2px;
 }
+
 .customize-control-header .header-view.button.selected {
     border: 0;
@@ -940 +946 @@
     position: absolute;
     top: 10px;
-    right: -999px;
+    left: -999px;
     z-index: 1;
     width: 26px;
@@ -949 +955 @@
 .customize-control-header .header-view:hover .close,
 .customize-control-header .header-view .close:focus {
+    left: auto;
     right: 10px;
+}
+
+.customize-control-header .header-view .close:focus {
+    outline: 1px solid #5b9dd9;
 }
 
@@ -996 +1007 @@
     display: block;
     margin-bottom: 9px;
+}
+
+.customize-control-header .choice:focus {
+    outline: none;
+    -webkit-box-shadow:
+        0 0 0 1px #5b9dd9,
+        0 0 3px 1px rgba(30, 140, 190, .8);
+    box-shadow:
+        0 0 0 1px #5b9dd9,
+        0 0 3px 1px rgba(30, 140, 190, .8);
 }
 

trunk/src/wp-includes/customize/class-wp-customize-header-image-control.php

@@ -103 +103 @@
             <# } else { #>
 
-            <# if (data.type === 'uploaded') { #>
-                <button type="button" class="dashicons dashicons-no close"><span class="screen-reader-text"><?php _e( 'Remove image' ); ?></span></button>
-            <# } #>
-
             <button type="button" class="choice thumbnail"
                 data-customize-image-value="{{{data.header.url}}}"
@@ -113 +109 @@
                 <img src="{{{data.header.thumbnail_url}}}" alt="{{{data.header.alt_text || data.header.description}}}">
             </button>
+
+            <# if ( data.type === 'uploaded' ) { #>
+                <button type="button" class="dashicons dashicons-no close"><span class="screen-reader-text"><?php _e( 'Remove image' ); ?></span></button>
+            <# } #>
 
             <# } #>
@@ -132 +132 @@
                 <# } else { #>
 
-            <img src="{{{data.header.thumbnail_url}}}" alt="{{{data.header.alt_text || data.header.description}}}" tabindex="0"/>
+            <img src="{{{data.header.thumbnail_url}}}" alt="{{{data.header.alt_text || data.header.description}}}" />
 
                 <# } #>