Customize: Add visible text on responsive view switches.

Add a visible text label on the Customizer's responsive view switches. While the text is very small, it serves to supplement the icons to help more readily comprehend the purpose of these controls. Consolidate the labels so the visible label matches the accessible name of the control for voice command users, and add a `group` role with `aria-label` to provide improved context for screen reader users.

Developed in WordPress#12519

Props ahortin, iamjolly, cheffheid, oglekler, afercia, abcd95, westonruter, celloexpressions, rianrietveld, joshuawold, estelaris, mukesh27, joedolson, wildworks. 
Fixes #36447.

git-svn-id: https://develop.svn.wordpress.org/trunk@62745 602fd350-edb4-49c9-b593-d223f7449a82

Author: joedolson

src/wp-admin/css/themes.css

@@ -1748,6 +1748,7 @@ body.full-overlay-active {
 	background: transparent;
 	border: none;
 	height: 45px;
+	min-width: 50px;
 	padding: 0 3px;
 	margin: 0 0 0 -4px;
 	box-shadow: none;
@@ -1767,9 +1768,9 @@ body.full-overlay-active {
 .wp-full-overlay-footer .devices button:before {
 	display: inline-block;
 	-webkit-font-smoothing: antialiased;
-	font: normal 20px/30px "dashicons";
+	font: normal 20px/20px "dashicons";
 	vertical-align: top;
-	margin: 3px 0;
+	margin: 0 0 -2px;
 	padding: 4px 8px;
 	color: #646970;
 }
@@ -1812,6 +1813,12 @@ body.full-overlay-active {
 	content: "\f470" / '';
 }
 
+.wp-full-overlay-footer .devices .devices__preview-label {
+	display: block;
+	font-size: 10px;
+	line-height: 1;
+}
+
 @media screen and (max-width: 1024px) {
 	.wp-full-overlay-footer .devices {
 		display: none;

src/wp-admin/customize.php

@@ -275,7 +275,7 @@
 			</button>
 			<?php $previewable_devices = $wp_customize->get_previewable_devices(); ?>
 			<?php if ( ! empty( $previewable_devices ) ) : ?>
-			<div class="devices-wrapper">
+			<div class="devices-wrapper" role="group" aria-label="<?php echo esc_attr_x( 'Responsive Views', 'label for responsive previews group' ); ?>">
 				<div class="devices">
 					<?php foreach ( (array) $previewable_devices as $device => $settings ) : ?>
 						<?php
@@ -289,7 +289,7 @@
 						}
 						?>
 						<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>
+							<span class="devices__preview-label"><?php echo esc_html( $settings['label'] ); ?></span>
 						</button>
 					<?php endforeach; ?>
 				</div>

src/wp-includes/class-wp-customize-manager.php

@@ -5044,14 +5044,14 @@ public function customize_pane_settings() {
 	public function get_previewable_devices() {
 		$devices = array(
 			'desktop' => array(
-				'label'   => __( 'Enter desktop preview mode' ),
+				'label'   => __( 'Desktop' ),
 				'default' => true,
 			),
 			'tablet'  => array(
-				'label' => __( 'Enter tablet preview mode' ),
+				'label' => __( 'Tablet' ),
 			),
 			'mobile'  => array(
-				'label' => __( 'Enter mobile preview mode' ),
+				'label' => __( 'Mobile' ),
 			),
 		);
 

tests/phpunit/tests/customize/manager.php

@@ -3519,14 +3519,14 @@ public function test_get_previewable_devices() {
 		// The default devices list.
 		$default_devices = array(
 			'desktop' => array(
-				'label'   => __( 'Enter desktop preview mode' ),
+				'label'   => __( 'Desktop' ),
 				'default' => true,
 			),
 			'tablet'  => array(
-				'label' => __( 'Enter tablet preview mode' ),
+				'label' => __( 'Tablet' ),
 			),
 			'mobile'  => array(
-				'label' => __( 'Enter mobile preview mode' ),
+				'label' => __( 'Mobile' ),
 			),
 		);
 
@@ -3551,7 +3551,7 @@ public function test_get_previewable_devices() {
 	private function filtered_device_list() {
 		return array(
 			'custom-device' => array(
-				'label'   => __( 'Enter custom-device preview mode' ),
+				'label'   => __( 'Custom device' ),
 				'default' => true,
 			),
 		);

tests/qunit/fixtures/customize-settings.js

@@ -146,14 +146,14 @@ window._wpCustomizeSettings = {
 	},
 	'previewableDevices': {
 		'desktop': {
-			'label': 'Enter desktop preview mode',
+			'label': 'Desktop',
 			'default': true
 		},
 		'tablet': {
-			'label': 'Enter tablet preview mode'
+			'label': 'Tablet'
 		},
 		'mobile': {
-			'label': 'Enter mobile preview mode'
+			'label': 'Mobile'
 		}
 	},
 	initialClientTimestamp: 1506510531595,