Changeset 32382

Timestamp:

05/06/2015 10:53:07 AM (10 years ago)

Author:

SergeyBiryukov

Message:

Customizer: Use a semantic, accessible element for Remove Header Image button.

Make the button more noticeable on dark, light, and busy images.

props afercia, RDall, melchoyce.
fixes #32227, #31325.

Location:

trunk/src

Files:

• wp-admin/css/customize-controls.css (modified) (1 diff)
• wp-includes/class-wp-customize-control.php (modified) (1 diff)

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

@@ -765 +765 @@
 
 .customize-control-header .uploaded .header-view .close {
-    font-size: 2em;
-    color: grey;
+    font-size: 20px;
+    color: #fff;
+    background: #555;
+    background: rgba(0, 0, 0, 0.5);
     position: absolute;
-    visibility: hidden;
     top: 10px;
+    right: -999px;
+    z-index: 1;
+    width: 26px;
+    height: 26px;
+    cursor: pointer;
+}
+
+.customize-control-header .header-view:hover .close,
+.customize-control-header .header-view .close:focus {
     right: 10px;
-    z-index: 1;
-    width: 20px;
-    height: 20px;
-    cursor: pointer;
-}
-
-.customize-control-header .uploaded .header-view .close:hover {
- color: black;
- text-shadow:
-    -1px -1px 0 #fff,
-    1px -1px 0 #fff,
-    -1px 1px 0 #fff,
-    1px 1px 0 #fff;
-}
-
-.customize-control-header .header-view:hover .close {
-    visibility: visible;
 }
 

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

@@ -1075 +1075 @@
 
             <# if (data.type === 'uploaded') { #>
-                <div class="dashicons dashicons-no close"></div>
+                <button type="button" class="dashicons dashicons-no close"><span class="screen-reader-text"><?php _e( 'Remove image' ); ?></span></button>
             <# } #>