Ticket #36447: 36447.patch

wp-admin/css/customize-controls.css

@@ -228 +228 @@
         border-left-color: #0073aa;
 }
 
+/* CSS Tooltips */
+#customize-controls .tooltip {
+        position: relative;
+        overflow: visible;
+}
+
+#customize-controls .tooltip:after {
+        display: none;
+        position: absolute;
+        bottom: 100%;
+        right: 50%;
+        border: 1px solid #ddd;
+        margin-bottom: 5px;
+        padding: 5px 8px;
+        background: rgba(27,31,35,0.8);
+        color: #fff;
+        content: attr(aria-label);
+        text-align: center;
+        transform: translateX(50%);
+        white-space: pre;
+        opacity: 0;
+}
+
+#customize-controls .tooltip:hover:before,
+#customize-controls .tooltip:focus:before,
+#customize-controls .tooltip:hover:after,
+#customize-controls .tooltip:focus:after {
+        display: inline-block;
+        opacity: 1;
+}
+
 #accordion-section-themes + .control-section {
         border-top: 1px solid #ddd;
 }

wp-admin/customize.php

@@ -185 +185 @@
                                                         continue;
                                                 }
                                                 $active = ! empty( $settings['default'] );
-                                                $class = 'preview-' . $device;
+                                                $class = 'tooltip preview-' . $device;
                                                 if ( $active ) {
                                                         $class .= ' active';
                                                 }
                                                 ?>
-                                                <button type="button" class="<?php echo esc_attr( $class ); ?>" aria-pressed="<?php echo esc_attr( $active ) ?>" data-device="<?php echo esc_attr( $device ); ?>">
-                                                        <span class="screen-reader-text"><?php echo esc_html( $settings['label'] ); ?></span>
+                                                <button aria-label="<?php echo esc_html( $settings['label'] ); ?>" type="button" class="<?php echo esc_attr( $class ); ?>" aria-pressed="<?php echo esc_attr( $active ) ?>" data-device="<?php echo esc_attr( $device ); ?>">
                                                 </button>
                                         <?php endforeach; ?>
                                 </div>