From 607db2fa3b53a76b84348b592bf1fd5737729644 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 29 Sep 2026 16:14:03 +0200
Subject: [PATCH 01/10] Do not move focus when navigating the media library
 attachments dialog.

---
 src/js/media/views/frame/edit-attachments.js | 19 ++-----------------
 src/wp-includes/media-template.php           |  4 ++--
 2 files changed, 4 insertions(+), 19 deletions(-)

diff --git a/src/js/media/views/frame/edit-attachments.js b/src/js/media/views/frame/edit-attachments.js
index e3bc0d09e643b..f55a2169b16cd 100644
--- a/src/js/media/views/frame/edit-attachments.js
+++ b/src/js/media/views/frame/edit-attachments.js
@@ -201,8 +201,8 @@ EditAttachments = MediaFrame.extend(/** @lends wp.media.view.MediaFrame.EditAtta
 	},
 
 	toggleNav: function() {
-		this.$( '.left' ).prop( 'disabled', ! this.hasPrevious() );
-		this.$( '.right' ).prop( 'disabled', ! this.hasNext() );
+		this.$( '.left' ).attr( 'aria-disabled', ! this.hasPrevious() );
+		this.$( '.right' ).attr( 'aria-disabled', ! this.hasNext() );
 	},
 
 	/**
@@ -238,8 +238,6 @@ EditAttachments = MediaFrame.extend(/** @lends wp.media.view.MediaFrame.EditAtta
 
 		model = this.library.at( this.getCurrentIndex() - 1 );
 		this.trigger( 'refresh', model );
-		// Move focus to the Previous button. When there are no more items, to the Next button.
-		this.focusNavButton( this.hasPrevious() ? '.left' : '.right' );
 		this.announceMediaItemDebounced( model );
 	},
 
@@ -255,22 +253,9 @@ EditAttachments = MediaFrame.extend(/** @lends wp.media.view.MediaFrame.EditAtta
 
 		model = this.library.at( this.getCurrentIndex() + 1 );
 		this.trigger( 'refresh', model );
-		// Move focus to the Next button. When there are no more items, to the Previous button.
-		this.focusNavButton( this.hasNext() ? '.right' : '.left' );
 		this.announceMediaItemDebounced( model );
 	},
 
-	/**
-	 * Set focus to the navigation buttons depending on the browsing direction.
-	 *
-	 * @since 5.3.0
-	 *
-	 * @param {string} which A CSS selector to target the button to focus.
-	 */
-	focusNavButton: function( which ) {
-		$( which ).trigger( 'focus' );
-	},
-
 	getCurrentIndex: function() {
 		return this.library.indexOf( this.model );
 	},
diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
index 70e75e0d28567..f7c7e0f561a66 100644
--- a/src/wp-includes/media-template.php
+++ b/src/wp-includes/media-template.php
@@ -369,8 +369,8 @@ function wp_print_media_templates() {
 	<?php // Template for the Attachment Details layout in the media browser. ?>
 	<script type="text/html" id="tmpl-edit-attachment-frame">
 		<div class="edit-media-header">
-			<button class="left dashicons"<# if ( ! data.hasPrevious ) { #> disabled<# } #>><span class="screen-reader-text"><?php /* translators: Hidden accessibility text. */ _e( 'Edit previous media item' ); ?></span></button>
-			<button class="right dashicons"<# if ( ! data.hasNext ) { #> disabled<# } #>><span class="screen-reader-text"><?php /* translators: Hidden accessibility text. */ _e( 'Edit next media item' ); ?></span></button>
+			<button class="left dashicons"<# if ( ! data.hasPrevious ) { #> aria-disabled='true'<# } #>><span class="screen-reader-text"><?php /* translators: Hidden accessibility text. */ _e( 'Edit previous media item' ); ?></span></button>
+			<button class="right dashicons"<# if ( ! data.hasNext ) { #> aria-disabled='true'<# } #>><span class="screen-reader-text"><?php /* translators: Hidden accessibility text. */ _e( 'Edit next media item' ); ?></span></button>
 			<button type="button" class="media-modal-close"><span class="media-modal-icon" aria-hidden="true"></span><span class="screen-reader-text"><?php _e( 'Close dialog' ); ?></span></button>
 		</div>
 		<div class="media-frame-title"></div>

From 01ac3822ef6f18afddd0ebcfc842795b43b0b807 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Wed, 30 Sep 2026 14:22:15 +0200
Subject: [PATCH 02/10] Adjust focus style for media attachment nav buttons.

---
 src/wp-admin/css/media.css | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css
index 5e67e429776ec..c4b48286a5a2b 100644
--- a/src/wp-admin/css/media.css
+++ b/src/wp-admin/css/media.css
@@ -725,9 +725,9 @@ border color while dragging a file over the uploader drop area */
 .upload-php .media-modal-close:focus,
 .edit-attachment-frame .edit-media-header .left:focus,
 .edit-attachment-frame .edit-media-header .right:focus {
-	/* Only visible in Windows High Contrast mode */
-	outline: 2px solid transparent;
-	outline-offset: -2px;
+	/* Always visible also in Windows High Contrast mode */
+	outline: 1px solid #c3c4c7;;
+	outline-offset: -1px;
 }
 
 .upload-php .media-modal-close:focus .media-modal-icon::before,
@@ -745,8 +745,9 @@ border color while dragging a file over the uploader drop area */
 	content: "\f345" / "";
 }
 
-.edit-attachment-frame .edit-media-header [disabled],
-.edit-attachment-frame .edit-media-header [disabled]:hover {
+.edit-attachment-frame .edit-media-header [aria-disabled="true"],
+.edit-attachment-frame .edit-media-header [aria-disabled="true"]:hover,
+.edit-attachment-frame .edit-media-header [aria-disabled="true"]:focus {
 	color: #c3c4c7;
 	background: inherit;
 	cursor: default;

From 4c57dfdb3131ca381fc9bacb3c8e3b9483b7d8b9 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Wed, 30 Sep 2026 17:28:49 +0200
Subject: [PATCH 03/10] Improve focus mangement and announcements for screen
 readers in the themes browsers.

---
 src/js/_enqueues/wp/theme.js | 32 ++++++++++++++++++++------------
 src/wp-admin/css/themes.css  |  9 ++++++++-
 src/wp-admin/themes.php      |  2 +-
 3 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/js/_enqueues/wp/theme.js b/src/js/_enqueues/wp/theme.js
index ff5d72ad2801e..3992da21689b5 100644
--- a/src/js/_enqueues/wp/theme.js
+++ b/src/js/_enqueues/wp/theme.js
@@ -620,18 +620,16 @@ themes.view.Theme = wp.Backbone.View.extend({
 		if ( 0 === this.model.collection.indexOf( current ) ) {
 			previousThemeButton
 				.addClass( 'disabled' )
-				.prop( 'disabled', true );
-
-			nextThemeButton.trigger( 'focus' );
+				.attr( 'aria-disabled', true )
+				.trigger( 'focus' );
 		}
 
 		// Disable next if the next model is undefined.
 		if ( _.isUndefined( this.model.collection.at( this.model.collection.indexOf( current ) + 1 ) ) ) {
 			nextThemeButton
 				.addClass( 'disabled' )
-				.prop( 'disabled', true );
-
-			previousThemeButton.trigger( 'focus' );
+				.attr( 'aria-disabled', true )
+				.trigger( 'focus' );
 		}
 	},
 
@@ -725,11 +723,14 @@ themes.view.Details = wp.Backbone.View.extend({
 
 	// Set initial focus and constrain tabbing within the theme browser modal.
 	containFocus: function( $el ) {
+		// Set initial focus on the theme overlay, only on first render.
+		var $themeOverlay = $( '.theme-overlay' );
+		if ( $themeOverlay.hasClass( 'theme-overlay-initial' ) ) {
+			_.delay( function() {
+				$themeOverlay.trigger( 'focus' ).removeClass( 'theme-overlay-initial' );
+			}, 100 );
+		}
 
-		// Set initial focus on the primary action control.
-		_.delay( function() {
-			$( '.theme-overlay' ).trigger( 'focus' );
-		}, 100 );
 
 		// Constrain tabbing within the modal.
 		$el.on( 'keydown.wp-themes', function( event ) {
@@ -789,6 +790,9 @@ themes.view.Details = wp.Backbone.View.extend({
 				if ( themes.focusedTheme ) {
 					themes.focusedTheme.find('.more-details').trigger( 'focus' );
 				}
+
+				// Add back the `theme-overlay-initial` class for the theme overlay.
+				$( '.theme-overlay' ).addClass( 'theme-overlay-initial' );
 			});
 		}
 
@@ -803,12 +807,12 @@ themes.view.Details = wp.Backbone.View.extend({
 		if ( this.model.cid === this.model.collection.at(0).cid ) {
 			this.$el.find( '.left' )
 				.addClass( 'disabled' )
-				.prop( 'disabled', true );
+				.attr( 'aria-disabled', true );
 		}
 		if ( this.model.cid === this.model.collection.at( this.model.collection.length - 1 ).cid ) {
 			this.$el.find( '.right' )
 				.addClass( 'disabled' )
-				.prop( 'disabled', true );
+				.attr( 'aria-disabled', true );
 		}
 	},
 
@@ -1354,6 +1358,8 @@ themes.view.Themes = wp.Backbone.View.extend({
 
 			// Trigger a route update for the current model.
 			self.theme.trigger( 'theme:expand', nextModel.cid );
+			// Move focus to the 'Next' navigation button after the view fully re-rendeers.
+			$( '.theme-header .right' ).trigger( 'focus' );
 			themes.announceThemeDebounced( nextModel );
 		}
 	},
@@ -1389,6 +1395,8 @@ themes.view.Themes = wp.Backbone.View.extend({
 
 			// Trigger a route update for the current model.
 			self.theme.trigger( 'theme:expand', previousModel.cid );
+			// Move focus to the 'Previous' navigation button after the view fully re-rendeers.
+			$( '.theme-header .left' ).trigger( 'focus' );
 			themes.announceThemeDebounced( previousModel );
 		}
 	},
diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css
index 5b71c223b6ce6..2e597a63e865c 100644
--- a/src/wp-admin/css/themes.css
+++ b/src/wp-admin/css/themes.css
@@ -1561,6 +1561,14 @@ body.full-overlay-active {
 	box-shadow: none;
 }
 
+.theme-install-overlay .close-full-overlay:focus,
+.theme-install-overlay .previous-theme:focus,
+.theme-install-overlay .next-theme:focus {
+	/* Always visible also in Windows High Contrast mode */
+	outline: 1px solid #c3c4c7;;
+	outline-offset: -1px;
+}
+
 .theme-install-overlay .close-full-overlay::before {
 	font: 400 22px/1 dashicons;
 	content: "\f335";
@@ -1597,7 +1605,6 @@ body.full-overlay-active {
 	color: #c3c4c7;
 	background: #f0f0f1;
 	cursor: default;
-	pointer-events: none;
 }
 
 .theme-install-overlay .close-full-overlay::before,
diff --git a/src/wp-admin/themes.php b/src/wp-admin/themes.php
index ac2cd4a9824cb..1acb7c9704374 100644
--- a/src/wp-admin/themes.php
+++ b/src/wp-admin/themes.php
@@ -664,7 +664,7 @@
 <?php endforeach; ?>
 	</div>
 </div>
-<div class="theme-overlay" tabindex="0" role="dialog" aria-label="<?php esc_attr_e( 'Theme Details' ); ?>"></div>
+<div class="theme-overlay theme-overlay-initial" tabindex="0" role="dialog" aria-label="<?php esc_attr_e( 'Theme Details' ); ?>"></div>
 
 <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
 

From d3d146a1fc7a13dd38ac5410d2057e275e3e9b32 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Wed, 30 Sep 2026 17:50:27 +0200
Subject: [PATCH 04/10] Make sure the ARIA live regions are not hidden.

---
 src/wp-admin/css/themes.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css
index 2e597a63e865c..8f89f2c04fb6a 100644
--- a/src/wp-admin/css/themes.css
+++ b/src/wp-admin/css/themes.css
@@ -1406,6 +1406,12 @@ body.full-overlay-active {
 	visibility: hidden;
 }
 
+/* Make sure the ARIA live regions are visible, as they inherit the hidden visibility from the body. */
+.a11y-speak-intro-text,
+.a11y-speak-region {
+	visibility: visible;
+}
+
 .wp-full-overlay {
 	background: #1d2327;
 	z-index: 500000;

From 19cd85bdcf0d29274039a8f320c7940518fa8e6c Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Wed, 30 Sep 2026 18:23:46 +0200
Subject: [PATCH 05/10] Make the theme installer a dialog and set initial focus
 on it.

---
 src/js/_enqueues/wp/theme.js   | 2 ++
 src/wp-admin/theme-install.php | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/js/_enqueues/wp/theme.js b/src/js/_enqueues/wp/theme.js
index 3992da21689b5..8dbadca34dc9b 100644
--- a/src/js/_enqueues/wp/theme.js
+++ b/src/js/_enqueues/wp/theme.js
@@ -964,6 +964,8 @@ themes.view.Preview = themes.view.Details.extend({
 
 		this.$el.fadeIn( 200, function() {
 			$body.addClass( 'theme-installer-active full-overlay-active' );
+			// Set initial focus on the theme installer overlay modal dialog.
+			self.$el.trigger( 'focus' );
 		});
 
 		this.$el.find( 'iframe' ).one( 'load', function() {
diff --git a/src/wp-admin/theme-install.php b/src/wp-admin/theme-install.php
index 8e6fc5d1eea2c..bfec6eb1d8ac2 100644
--- a/src/wp-admin/theme-install.php
+++ b/src/wp-admin/theme-install.php
@@ -281,7 +281,7 @@
 		?>
 	</h2>
 	<div class="theme-browser content-filterable"></div>
-	<div class="theme-install-overlay wp-full-overlay expanded"></div>
+	<div class="theme-install-overlay wp-full-overlay expanded" tabindex="0" role="dialog" aria-label="<?php esc_attr_e( 'Browse Themes' ); ?>"></div>
 
 	<p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
 	<span class="spinner"></span>

From c7b7772ae0f5a382bf7a8ddd197905b9e00bca81 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Wed, 30 Sep 2026 19:32:02 +0200
Subject: [PATCH 06/10] Fix returning focus back to the opener theme in the
 theme installer.

---
 src/js/_enqueues/wp/theme.js   | 12 ++++++------
 src/wp-admin/theme-install.php |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/js/_enqueues/wp/theme.js b/src/js/_enqueues/wp/theme.js
index 8dbadca34dc9b..8abb738ba71cd 100644
--- a/src/js/_enqueues/wp/theme.js
+++ b/src/js/_enqueues/wp/theme.js
@@ -480,7 +480,7 @@ themes.view.Theme = wp.Backbone.View.extend({
 			return;
 		}
 
-		// Set focused theme to current element.
+		// Store the theme that had focus when expand is called.
 		themes.focusedTheme = this.$el;
 
 		this.trigger( 'theme:expand', self.model.cid );
@@ -520,7 +520,7 @@ themes.view.Theme = wp.Backbone.View.extend({
 
 		event = event || window.event;
 
-		// Set focus to current theme.
+		// Store the theme that had focus when preview is called.
 		themes.focusedTheme = this.$el;
 
 		// Construct a new Preview view.
@@ -786,9 +786,9 @@ themes.view.Details = wp.Backbone.View.extend({
 				// Restore scroll position.
 				document.body.scrollTop = scroll;
 
-				// Return focus to the theme div.
+				// Return focus to the opener theme 'more-details' button.
 				if ( themes.focusedTheme ) {
-					themes.focusedTheme.find('.more-details').trigger( 'focus' );
+					themes.focusedTheme.find( '.more-details' ).trigger( 'focus' );
 				}
 
 				// Add back the `theme-overlay-initial` class for the theme overlay.
@@ -982,9 +982,9 @@ themes.view.Preview = themes.view.Details.extend({
 		this.$el.fadeOut( 200, function() {
 			$( 'body' ).removeClass( 'theme-installer-active full-overlay-active' );
 
-			// Return focus to the theme div.
+			// Return focus to the opener theme 'more-details' button.
 			if ( themes.focusedTheme ) {
-				themes.focusedTheme.find('.more-details').trigger( 'focus' );
+				themes.focusedTheme.find( '.more-details' ).trigger( 'focus' );
 			}
 		}).removeClass( 'iframe-ready' );
 
diff --git a/src/wp-admin/theme-install.php b/src/wp-admin/theme-install.php
index bfec6eb1d8ac2..cf61628cd2877 100644
--- a/src/wp-admin/theme-install.php
+++ b/src/wp-admin/theme-install.php
@@ -390,7 +390,7 @@
 		</p></div>
 	<# } #>
 
-	<span class="more-details"><?php _ex( 'Details &amp; Preview', 'theme' ); ?></span>
+	<button type="button" class="more-details"><?php _ex( 'Details &amp; Preview', 'theme' ); ?></button>
 	<div class="theme-author">
 		<?php
 		/* translators: %s: Theme author name. */

From 059f7d5a6f07854124002ba10f075fd1bf7fce2d Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Wed, 30 Sep 2026 21:40:10 +0200
Subject: [PATCH 07/10] Use aria-disabled for the customizer theme browser nav
 buttons.

---
 src/js/_enqueues/wp/customize/controls.js | 8 ++++++--
 src/wp-admin/css/colors/_admin.scss       | 8 ++++----
 src/wp-admin/css/customize-controls.css   | 8 ++++----
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/js/_enqueues/wp/customize/controls.js b/src/js/_enqueues/wp/customize/controls.js
index 64bfd3fe754be..83d5a0c2f9897 100644
--- a/src/js/_enqueues/wp/customize/controls.js
+++ b/src/js/_enqueues/wp/customize/controls.js
@@ -2597,10 +2597,14 @@
 		 */
 		updateLimits: function () {
 			if ( ! this.getNextTheme() ) {
-				this.overlay.find( '.right' ).addClass( 'disabled' );
+				this.overlay.find( '.right' )
+					.addClass( 'disabled' )
+					.attr( 'aria-disabled', true );
 			}
 			if ( ! this.getPreviousTheme() ) {
-				this.overlay.find( '.left' ).addClass( 'disabled' );
+				this.overlay.find( '.left' )
+					.addClass( 'disabled' )
+					.attr( 'aria-disabled', true );
 			}
 		},
 
diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss
index 20704b3f525f0..2d014555a2c2f 100644
--- a/src/wp-admin/css/colors/_admin.scss
+++ b/src/wp-admin/css/colors/_admin.scss
@@ -773,10 +773,10 @@ div#wp-responsive-toggle a::before {
 
 	&.wp-customizer .theme-overlay .theme-header .close:focus,
 	&.wp-customizer .theme-overlay .theme-header .close:hover,
-	&.wp-customizer .theme-overlay .theme-header .right:focus,
-	&.wp-customizer .theme-overlay .theme-header .right:hover,
-	&.wp-customizer .theme-overlay .theme-header .left:focus,
-	&.wp-customizer .theme-overlay .theme-header .left:hover {
+	&.wp-customizer .theme-overlay .theme-header .right:focus:not(.disabled),
+	&.wp-customizer .theme-overlay .theme-header .right:hover:not(.disabled),
+	&.wp-customizer .theme-overlay .theme-header .left:focus:not(.disabled),
+	&.wp-customizer .theme-overlay .theme-header .left:hover:not(.disabled) {
 		border-bottom-color: variables.$button-color;
 		color: variables.$link;
 	}
diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 24de538114bad..7cdc6e97ae4d3 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -2455,10 +2455,10 @@ p.customize-section-description {
 
 .wp-customizer .theme-overlay .theme-header .close:focus,
 .wp-customizer .theme-overlay .theme-header .close:hover,
-.wp-customizer .theme-overlay .theme-header .right:focus,
-.wp-customizer .theme-overlay .theme-header .right:hover,
-.wp-customizer .theme-overlay .theme-header .left:focus,
-.wp-customizer .theme-overlay .theme-header .left:hover {
+.wp-customizer .theme-overlay .theme-header .right:focus:not(.disabled),
+.wp-customizer .theme-overlay .theme-header .right:hover:not(.disabled),
+.wp-customizer .theme-overlay .theme-header .left:focus:not(.disabled),
+.wp-customizer .theme-overlay .theme-header .left:hover:not(.disabled) {
 	background: #fff;
 }
 

From 36978a00d20798dab687c21cdc00d6c2e97081f3 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Wed, 30 Sep 2026 22:20:22 +0200
Subject: [PATCH 08/10] Standardize controls labeling.

---
 src/wp-admin/includes/theme.php    | 4 ++--
 src/wp-admin/theme-install.php     | 4 ++--
 src/wp-admin/themes.php            | 6 +++---
 src/wp-includes/media-template.php | 8 ++++----
 tests/qunit/index.html             | 6 +++---
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/wp-admin/includes/theme.php b/src/wp-admin/includes/theme.php
index 5ee488536ede2..7f92fed1b2625 100644
--- a/src/wp-admin/includes/theme.php
+++ b/src/wp-admin/includes/theme.php
@@ -828,13 +828,13 @@ function customize_themes_print_templates() {
 				<button type="button" class="left dashicons dashicons-no"><span class="screen-reader-text">
 					<?php
 					/* translators: Hidden accessibility text. */
-					_e( 'Show previous theme' );
+					_ex( 'Previous', 'theme' );
 					?>
 				</span></button>
 				<button type="button" class="right dashicons dashicons-no"><span class="screen-reader-text">
 					<?php
 					/* translators: Hidden accessibility text. */
-					_e( 'Show next theme' );
+					_ex( 'Next', 'theme' );
 					?>
 				</span></button>
 				<button type="button" class="close dashicons dashicons-no"><span class="screen-reader-text">
diff --git a/src/wp-admin/theme-install.php b/src/wp-admin/theme-install.php
index cf61628cd2877..d1135be2ea75a 100644
--- a/src/wp-admin/theme-install.php
+++ b/src/wp-admin/theme-install.php
@@ -473,13 +473,13 @@
 			<button class="previous-theme"><span class="screen-reader-text">
 				<?php
 				/* translators: Hidden accessibility text. */
-				_e( 'Previous theme' );
+				_ex( 'Previous', 'theme' );
 				?>
 			</span></button>
 			<button class="next-theme"><span class="screen-reader-text">
 				<?php
 				/* translators: Hidden accessibility text. */
-				_e( 'Next theme' );
+				_ex( 'Next', 'theme' );
 				?>
 			</span></button>
 			<# if ( data.installed ) { #>
diff --git a/src/wp-admin/themes.php b/src/wp-admin/themes.php
index 1acb7c9704374..a0686c645766a 100644
--- a/src/wp-admin/themes.php
+++ b/src/wp-admin/themes.php
@@ -1057,19 +1057,19 @@ function wp_theme_auto_update_setting_template() {
 			<button class="left dashicons dashicons-no"><span class="screen-reader-text">
 				<?php
 				/* translators: Hidden accessibility text. */
-				_e( 'Show previous theme' );
+				_ex( 'Previous', 'theme' );
 				?>
 			</span></button>
 			<button class="right dashicons dashicons-no"><span class="screen-reader-text">
 				<?php
 				/* translators: Hidden accessibility text. */
-				_e( 'Show next theme' );
+				_ex( 'Next', 'theme' );
 				?>
 			</span></button>
 			<button class="close dashicons dashicons-no"><span class="screen-reader-text">
 				<?php
 				/* translators: Hidden accessibility text. */
-				_e( 'Close details dialog' );
+				_e( 'Close' );
 				?>
 			</span></button>
 		</div>
diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
index f7c7e0f561a66..ee9c6bc21a1c3 100644
--- a/src/wp-includes/media-template.php
+++ b/src/wp-includes/media-template.php
@@ -206,7 +206,7 @@ function wp_print_media_templates() {
 				<button type="button" class="media-modal-close"><span class="media-modal-icon" aria-hidden="true"></span><span class="screen-reader-text">
 					<?php
 					/* translators: Hidden accessibility text. */
-					_e( 'Close dialog' );
+					_e( 'Close' );
 					?>
 				</span></button>
 			<# } #>
@@ -369,9 +369,9 @@ function wp_print_media_templates() {
 	<?php // Template for the Attachment Details layout in the media browser. ?>
 	<script type="text/html" id="tmpl-edit-attachment-frame">
 		<div class="edit-media-header">
-			<button class="left dashicons"<# if ( ! data.hasPrevious ) { #> aria-disabled='true'<# } #>><span class="screen-reader-text"><?php /* translators: Hidden accessibility text. */ _e( 'Edit previous media item' ); ?></span></button>
-			<button class="right dashicons"<# if ( ! data.hasNext ) { #> aria-disabled='true'<# } #>><span class="screen-reader-text"><?php /* translators: Hidden accessibility text. */ _e( 'Edit next media item' ); ?></span></button>
-			<button type="button" class="media-modal-close"><span class="media-modal-icon" aria-hidden="true"></span><span class="screen-reader-text"><?php _e( 'Close dialog' ); ?></span></button>
+			<button class="left dashicons"<# if ( ! data.hasPrevious ) { #> aria-disabled='true'<# } #>><span class="screen-reader-text"><?php /* translators: Hidden accessibility text. */ _ex( 'Previous', 'media item' ); ?></span></button>
+			<button class="right dashicons"<# if ( ! data.hasNext ) { #> aria-disabled='true'<# } #>><span class="screen-reader-text"><?php /* translators: Hidden accessibility text. */ _ex( 'Next', 'media item' ); ?></span></button>
+			<button type="button" class="media-modal-close"><span class="media-modal-icon" aria-hidden="true"></span><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></button>
 		</div>
 		<div class="media-frame-title"></div>
 		<div class="media-frame-content"></div>
diff --git a/tests/qunit/index.html b/tests/qunit/index.html
index 82524daa01227..244a7a9970923 100644
--- a/tests/qunit/index.html
+++ b/tests/qunit/index.html
@@ -1001,7 +1001,7 @@ <h3>
 	</script>
 	<script type="text/html" id="tmpl-media-modal">
 		<div class="media-modal wp-core-ui">
-			<button type="button" class="media-modal-close"><span class="media-modal-icon" aria-hidden="true"></span><span class="screen-reader-text">Close media panel</span></button>
+			<button type="button" class="media-modal-close"><span class="media-modal-icon" aria-hidden="true"></span><span class="screen-reader-text">Close</span></button>
 			<div class="media-modal-content"></div>
 		</div>
 		<div class="media-modal-backdrop"></div>
@@ -1081,8 +1081,8 @@ <h2>Uploading</h2>
 
 	<script type="text/html" id="tmpl-edit-attachment-frame">
 		<div class="edit-media-header">
-			<button class="left dashicons <# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text">Edit previous media item</span></button>
-			<button class="right dashicons <# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text">Edit next media item</span></button>
+			<button class="left dashicons <# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text">Previous</span></button>
+			<button class="right dashicons <# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text">Next</span></button>
 		</div>
 		<div class="media-frame-title"></div>
 		<div class="media-frame-content"></div>

From 2aa67ce47955b0e51b1431786ea02d44002e01f2 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Tue, 6 Oct 2026 13:02:04 +0200
Subject: [PATCH 09/10] Render the Details & Preview button conditionally.

---
 src/wp-admin/theme-install.php | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/wp-admin/theme-install.php b/src/wp-admin/theme-install.php
index d1135be2ea75a..ce06d850b972c 100644
--- a/src/wp-admin/theme-install.php
+++ b/src/wp-admin/theme-install.php
@@ -390,7 +390,11 @@
 		</p></div>
 	<# } #>
 
+	<# if ( data.compatible_wp && data.compatible_php ) { #>
 	<button type="button" class="more-details"><?php _ex( 'Details &amp; Preview', 'theme' ); ?></button>
+	<# } else { #>
+	<span class="more-details"><?php _ex( 'Details &amp; Preview', 'theme' ); ?></span>
+	<# } #>
 	<div class="theme-author">
 		<?php
 		/* translators: %s: Theme author name. */

From 1dc9ff8be36654a0f3dde932012599f62f1e3908 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Thu, 8 Oct 2026 12:58:02 +0200
Subject: [PATCH 10/10] Improve inline comments.

---
 src/js/_enqueues/wp/theme.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/js/_enqueues/wp/theme.js b/src/js/_enqueues/wp/theme.js
index 8abb738ba71cd..c495140302007 100644
--- a/src/js/_enqueues/wp/theme.js
+++ b/src/js/_enqueues/wp/theme.js
@@ -723,7 +723,7 @@ themes.view.Details = wp.Backbone.View.extend({
 
 	// Set initial focus and constrain tabbing within the theme browser modal.
 	containFocus: function( $el ) {
-		// Set initial focus on the theme overlay, only on first render.
+		// Set initial focus on the theme overlay modal dialog, only on first render.
 		var $themeOverlay = $( '.theme-overlay' );
 		if ( $themeOverlay.hasClass( 'theme-overlay-initial' ) ) {
 			_.delay( function() {
@@ -1360,7 +1360,7 @@ themes.view.Themes = wp.Backbone.View.extend({
 
 			// Trigger a route update for the current model.
 			self.theme.trigger( 'theme:expand', nextModel.cid );
-			// Move focus to the 'Next' navigation button after the view fully re-rendeers.
+			// Set focus again to the 'Next' navigation button after the view fully re-rendeers.
 			$( '.theme-header .right' ).trigger( 'focus' );
 			themes.announceThemeDebounced( nextModel );
 		}
@@ -1397,7 +1397,7 @@ themes.view.Themes = wp.Backbone.View.extend({
 
 			// Trigger a route update for the current model.
 			self.theme.trigger( 'theme:expand', previousModel.cid );
-			// Move focus to the 'Previous' navigation button after the view fully re-rendeers.
+			// Set focus again to the 'Previous' navigation button after the view fully re-rendeers.
 			$( '.theme-header .left' ).trigger( 'focus' );
 			themes.announceThemeDebounced( previousModel );
 		}