Changeset 38652

Timestamp:

09/25/2016 09:32:10 PM (8 years ago)

Author:

afercia

Message:

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.

Location:

trunk/src/wp-includes/js

Files:

• media-editor.js (modified) (1 diff)
• media-views.js (modified) (3 diffs)
• media/views/modal.js (modified) (3 diffs)

trunk/src/wp-includes/js/media-editor.js

@@ -1112 +1112 @@
                     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';

trunk/src/wp-includes/js/media-views.js

@@ -6699 +6699 @@
     },
 
+    clickedOpenerEl: null,
+
     initialize: function() {
         _.defaults( this.options, {
@@ -6766 +6768 @@
         }
 
+        this.clickedOpenerEl = document.activeElement;
+
         if ( ! this.views.attached ) {
             this.attach();
@@ -6816 +6820 @@
         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');

trunk/src/wp-includes/js/media/views/modal.js

@@ -25 +25 @@
     },
 
+    clickedOpenerEl: null,
+
     initialize: function() {
         _.defaults( this.options, {
@@ -92 +94 @@
         }
 
+        this.clickedOpenerEl = document.activeElement;
+
         if ( ! this.views.attached ) {
             this.attach();
@@ -142 +146 @@
         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');