From 0ddaeb1ad23cee4c24969b4f5bdd95015208d7c9 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Sun, 9 Jun 2019 15:47:43 +0000
Subject: [PATCH] Accessibility: Fix the order of the Previous, Next, and Close
 buttons in the Attachment Details modal.

Making the visual and DOM order match benefits keyboard users who navigate documents sequentially and expect the focus order to be consistent with the sequential reading order.

Fixes #47458.


git-svn-id: https://develop.svn.wordpress.org/trunk@45506 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/js/media/views/attachment/details.js     | 11 +++++------
 src/js/media/views/frame/edit-attachments.js |  5 +++--
 src/js/media/views/modal.js                  | 10 ++++++----
 src/wp-includes/media-template.php           |  5 ++++-
 4 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/js/media/views/attachment/details.js b/src/js/media/views/attachment/details.js
index 885948b364..fe12487548 100644
--- a/src/js/media/views/attachment/details.js
+++ b/src/js/media/views/attachment/details.js
@@ -18,12 +18,11 @@ Details = Attachment.extend(/** @lends wp.media.view.Attachment.Details.prototyp
 	className: 'attachment-details',
 	template:  wp.template('attachment-details'),
 
-	attributes: function() {
-		return {
-			'tabIndex':     0,
-			'data-id':      this.model.get( 'id' )
-		};
-	},
+	/*
+	 * Reset all the attributes inherited from Attachment including role=checkbox,
+	 * tabindex, etc., as they are inappropriate for this view. See #47458 and [30483] / #30390.
+	 */
+	attributes: {},
 
 	events: {
 		'change [data-setting]':          'updateSetting',
diff --git a/src/js/media/views/frame/edit-attachments.js b/src/js/media/views/frame/edit-attachments.js
index 469f5db739..0b5d150cd9 100644
--- a/src/js/media/views/frame/edit-attachments.js
+++ b/src/js/media/views/frame/edit-attachments.js
@@ -80,8 +80,9 @@ EditAttachments = MediaFrame.extend(/** @lends wp.media.view.MediaFrame.EditAtta
 		// Initialize modal container view.
 		if ( this.options.modal ) {
 			this.modal = new wp.media.view.Modal({
-				controller: this,
-				title:      this.options.title
+				controller:     this,
+				title:          this.options.title,
+				hasCloseButton: false
 			});
 
 			this.modal.on( 'open', _.bind( function () {
diff --git a/src/js/media/views/modal.js b/src/js/media/views/modal.js
index 75ffe06d66..aabf2b48d4 100644
--- a/src/js/media/views/modal.js
+++ b/src/js/media/views/modal.js
@@ -26,9 +26,10 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
 
 	initialize: function() {
 		_.defaults( this.options, {
-			container: document.body,
-			title:     '',
-			propagate: true
+			container:      document.body,
+			title:          '',
+			propagate:      true,
+			hasCloseButton: true
 		});
 
 		this.focusManager = new wp.media.view.FocusManager({
@@ -40,7 +41,8 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
 	 */
 	prepare: function() {
 		return {
-			title: this.options.title
+			title:          this.options.title,
+			hasCloseButton: this.options.hasCloseButton
 		};
 	},
 
diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
index dd2d67a90c..427ff53b2c 100644
--- a/src/wp-includes/media-template.php
+++ b/src/wp-includes/media-template.php
@@ -188,7 +188,9 @@ function wp_print_media_templates() {
 	<?php // Template for the media modal. ?>
 	<script type="text/html" id="tmpl-media-modal">
 		<div tabindex="0" class="<?php echo $class; ?>">
-			<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close media panel' ); ?></span></span></button>
+			<# if ( data.hasCloseButton ) { #>
+				<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close dialog' ); ?></span></span></button>
+			<# } #>
 			<div class="media-modal-content"></div>
 		</div>
 		<div class="media-modal-backdrop"></div>
@@ -323,6 +325,7 @@ function wp_print_media_templates() {
 		<div class="edit-media-header">
 			<button class="left dashicons <# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Previous' ); ?></span></button>
 			<button class="right dashicons <# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text"><?php _e( 'Next' ); ?></span></button>
+			<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text"><?php _e( 'Close dialog' ); ?></span></span></button>
 		</div>
 		<div class="media-frame-title"></div>
 		<div class="media-frame-content"></div>