From 202f1009d467269f4904735d97a03a4e0c5cc5a3 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 14 Jul 2026 11:51:38 +0200
Subject: [PATCH 1/3] Make the Customizer devices preview labels visible.

---
 src/wp-admin/css/themes.css                    | 11 +++++++++--
 src/wp-admin/customize.php                     |  2 +-
 src/wp-includes/class-wp-customize-manager.php |  6 +++---
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css
index e7eadd7f6941d..be495568c89b7 100644
--- a/src/wp-admin/css/themes.css
+++ b/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;
diff --git a/src/wp-admin/customize.php b/src/wp-admin/customize.php
index 257dbbe0d60a8..49a871f7417d9 100644
--- a/src/wp-admin/customize.php
+++ b/src/wp-admin/customize.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>
diff --git a/src/wp-includes/class-wp-customize-manager.php b/src/wp-includes/class-wp-customize-manager.php
index d574a767cb8a6..cb1447e4cde5d 100644
--- a/src/wp-includes/class-wp-customize-manager.php
+++ b/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' ),
 			),
 		);
 

From 48c9fd995a59c0232e37b8082575a396cd91d4a2 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 14 Jul 2026 12:33:43 +0200
Subject: [PATCH 2/3] Adjust tests.

---
 tests/phpunit/tests/customize/manager.php  | 8 ++++----
 tests/qunit/fixtures/customize-settings.js | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/tests/phpunit/tests/customize/manager.php b/tests/phpunit/tests/customize/manager.php
index 21bdd85eebac3..bedf0b39b3e95 100644
--- a/tests/phpunit/tests/customize/manager.php
+++ b/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,
 			),
 		);
diff --git a/tests/qunit/fixtures/customize-settings.js b/tests/qunit/fixtures/customize-settings.js
index 74a35379d8f6d..9f5b838b02ba2 100644
--- a/tests/qunit/fixtures/customize-settings.js
+++ b/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,

From 725f94294b3f4d6619aac1091ad4c1ad0bb5507e Mon Sep 17 00:00:00 2001
From: Joe Dolson <design@joedolson.com>
Date: Tue, 14 Jul 2026 16:20:07 -0500
Subject: [PATCH 3/3] Add group role and aria-label

---
 src/wp-admin/customize.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/wp-admin/customize.php b/src/wp-admin/customize.php
index 49a871f7417d9..be4657918d565 100644
--- a/src/wp-admin/customize.php
+++ b/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