From 082c6e7d8144cb9940dbfb5e7a6fa585c743658c Mon Sep 17 00:00:00 2001
From: Ozgur Sar <ozgursar77@gmail.com>
Date: Thu, 12 Nov 2026 18:46:37 +0300
Subject: [PATCH] Media: Match the DOM order of the media modal header to its
 visual order.

Place the media modal close button and the Edit Attachment header buttons after the frame title, so that the DOM order matches the visual order for screen readers and other assistive technologies.

See #66270.
---
 src/js/media/views/modal.js        | 3 +++
 src/wp-includes/media-template.php | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/js/media/views/modal.js b/src/js/media/views/modal.js
index 629329ed88789..307f772854096 100644
--- a/src/js/media/views/modal.js
+++ b/src/js/media/views/modal.js
@@ -110,6 +110,9 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
 			this.attach();
 		}
 
+		// Match the DOM order to the visual order: place the close button after the frame title.
+		this.$( '.media-frame-title' ).first().after( this.$( '.media-modal' ).children( '.media-modal-close' ) );
+
 		// Disable page scrolling.
 		$( 'body' ).addClass( 'modal-open' );
 
diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
index a624b81e3187f..7b1879942994e 100644
--- a/src/wp-includes/media-template.php
+++ b/src/wp-includes/media-template.php
@@ -362,12 +362,12 @@ 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="media-frame-title"></div>
 		<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. */ _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>
 	</script>