From 7be45216c4a8288d06647a807bf89e709490e185 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Sun, 25 Sep 2016 21:32:10 +0000
Subject: [PATCH] Accessibility: Handle focus when closing the media modal.

When closing the media modal, by default focus should be moved back to the UI
control that was clicked to open the modal. The only exception is when inserting
images into the Visual or Text editor.

Fixes #38142.


git-svn-id: https://develop.svn.wordpress.org/trunk@38652 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-includes/js/media-editor.js      |  7 -------
 src/wp-includes/js/media-views.js       | 12 ++++++++++--
 src/wp-includes/js/media/views/modal.js | 12 ++++++++++--
 3 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/wp-includes/js/media-editor.js b/src/wp-includes/js/media-editor.js
index aa407466d0..e972f6b39c 100644
--- a/src/wp-includes/js/media-editor.js
+++ b/src/wp-includes/js/media-editor.js
@@ -1111,13 +1111,6 @@
 
 					event.preventDefault();
 
-					// Remove focus from the `.insert-media` button.
-					// Prevents Opera from showing the outline of the button
-					// above the modal.
-					//
-					// See: https://core.trac.wordpress.org/ticket/22445
-					elem.blur();
-
 					if ( elem.hasClass( 'gallery' ) ) {
 						options.state = 'gallery';
 						options.title = wp.media.view.l10n.createGalleryTitle;
diff --git a/src/wp-includes/js/media-views.js b/src/wp-includes/js/media-views.js
index e8a8202d59..91a8e4872c 100644
--- a/src/wp-includes/js/media-views.js
+++ b/src/wp-includes/js/media-views.js
@@ -6698,6 +6698,8 @@ Modal = wp.media.View.extend({
 		'keydown': 'keydown'
 	},
 
+	clickedOpenerEl: null,
+
 	initialize: function() {
 		_.defaults( this.options, {
 			container: document.body,
@@ -6765,6 +6767,8 @@ Modal = wp.media.View.extend({
 			return this;
 		}
 
+		this.clickedOpenerEl = document.activeElement;
+
 		if ( ! this.views.attached ) {
 			this.attach();
 		}
@@ -6815,8 +6819,12 @@ Modal = wp.media.View.extend({
 		// Hide modal and remove restricted media modal tab focus once it's closed
 		this.$el.hide().undelegate( 'keydown' );
 
-		// Put focus back in useful location once modal is closed
-		$('#wpbody-content').focus();
+		// Put focus back in useful location once modal is closed.
+		if ( null !== this.clickedOpenerEl ) {
+			this.clickedOpenerEl.focus();
+		} else {
+			$( '#wpbody-content' ).focus();
+		}
 
 		this.propagate('close');
 
diff --git a/src/wp-includes/js/media/views/modal.js b/src/wp-includes/js/media/views/modal.js
index 2efb5dad0f..42e0b241b2 100644
--- a/src/wp-includes/js/media/views/modal.js
+++ b/src/wp-includes/js/media/views/modal.js
@@ -24,6 +24,8 @@ Modal = wp.media.View.extend({
 		'keydown': 'keydown'
 	},
 
+	clickedOpenerEl: null,
+
 	initialize: function() {
 		_.defaults( this.options, {
 			container: document.body,
@@ -91,6 +93,8 @@ Modal = wp.media.View.extend({
 			return this;
 		}
 
+		this.clickedOpenerEl = document.activeElement;
+
 		if ( ! this.views.attached ) {
 			this.attach();
 		}
@@ -141,8 +145,12 @@ Modal = wp.media.View.extend({
 		// Hide modal and remove restricted media modal tab focus once it's closed
 		this.$el.hide().undelegate( 'keydown' );
 
-		// Put focus back in useful location once modal is closed
-		$('#wpbody-content').focus();
+		// Put focus back in useful location once modal is closed.
+		if ( null !== this.clickedOpenerEl ) {
+			this.clickedOpenerEl.focus();
+		} else {
+			$( '#wpbody-content' ).focus();
+		}
 
 		this.propagate('close');