Ticket #39859: 39859.3.diff

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

@@ -17 +17 @@
         tagName:  'div',
         template: wp.template('media-modal'),
 
-        attributes: {
-                tabindex: 0
-        },
-
         events: {
                 'click .media-modal-backdrop, .media-modal-close': 'escapeHandler',
                 'keydown': 'keydown'
@@ -32 +28 @@
                 _.defaults( this.options, {
                         container: document.body,
                         title:     '',
-                        propagate: true,
-                        freeze:    true
+                        propagate: true
                 });
 
                 this.focusManager = new wp.media.view.FocusManager({
@@ -88 +83 @@
          */
         open: function() {
                 var $el = this.$el,
-                        options = this.options,
                         mceEditor;
 
                 if ( $el.is(':visible') ) {
@@ -101 +95 @@
                         this.attach();
                 }
 
-                // If the `freeze` option is set, record the window's scroll position.
-                if ( options.freeze ) {
-                        this._freeze = {
-                                scrollTop: $( window ).scrollTop()
-                        };
-                }
-
                 // Disable page scrolling.
                 $( 'body' ).addClass( 'modal-open' );
 
@@ -115 +102 @@
 
                 // Try to close the onscreen keyboard
                 if ( 'ontouchend' in document ) {
-                        if ( ( mceEditor = window.tinymce && window.tinymce.activeEditor )  && ! mceEditor.isHidden() && mceEditor.iframeElement ) {
+                        if ( ( mceEditor = window.tinymce && window.tinymce.activeEditor ) && ! mceEditor.isHidden() && mceEditor.iframeElement ) {
                                 mceEditor.iframeElement.focus();
                                 mceEditor.iframeElement.blur();
 
@@ -125 +112 @@
                         }
                 }
 
-                this.$el.focus();
+                // Set initial focus on the content instead of this view element, to avoid page scrolling.
+                this.$( '.media-modal' ).focus();
 
                 return this.propagate('open');
         },
@@ -135 +123 @@
          * @returns {wp.media.view.Modal} Returns itself to allow chaining
          */
         close: function( options ) {
-                var freeze = this._freeze;
-
                 if ( ! this.views.attached || ! this.$el.is(':visible') ) {
                         return this;
                 }
@@ -156 +142 @@
 
                 this.propagate('close');
 
-                // If the `freeze` option is set, restore the container's scroll position.
-                if ( freeze ) {
-                        $( window ).scrollTop( freeze.scrollTop );
-                }
-
                 if ( options && options.escape ) {
                         this.propagate('escape');
                 }

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

@@ -4248 +4248 @@
         tagName:  'div',
         template: wp.template('media-modal'),
 
-        attributes: {
-                tabindex: 0
-        },
-
         events: {
                 'click .media-modal-backdrop, .media-modal-close': 'escapeHandler',
                 'keydown': 'keydown'
@@ -4263 +4259 @@
                 _.defaults( this.options, {
                         container: document.body,
                         title:     '',
-                        propagate: true,
-                        freeze:    true
+                        propagate: true
                 });
 
                 this.focusManager = new wp.media.view.FocusManager({
@@ -4319 +4314 @@
          */
         open: function() {
                 var $el = this.$el,
-                        options = this.options,
                         mceEditor;
 
                 if ( $el.is(':visible') ) {
@@ -4332 +4326 @@
                         this.attach();
                 }
 
-                // If the `freeze` option is set, record the window's scroll position.
-                if ( options.freeze ) {
-                        this._freeze = {
-                                scrollTop: $( window ).scrollTop()
-                        };
-                }
-
                 // Disable page scrolling.
                 $( 'body' ).addClass( 'modal-open' );
 
@@ -4346 +4333 @@
 
                 // Try to close the onscreen keyboard
                 if ( 'ontouchend' in document ) {
-                        if ( ( mceEditor = window.tinymce && window.tinymce.activeEditor )  && ! mceEditor.isHidden() && mceEditor.iframeElement ) {
+                        if ( ( mceEditor = window.tinymce && window.tinymce.activeEditor ) && ! mceEditor.isHidden() && mceEditor.iframeElement ) {
                                 mceEditor.iframeElement.focus();
                                 mceEditor.iframeElement.blur();
 
@@ -4356 +4343 @@
                         }
                 }
 
-                this.$el.focus();
+                // Set initial focus on the content instead of this view element, to avoid page scrolling.
+                this.$( '.media-modal' ).focus();
 
                 return this.propagate('open');
         },
@@ -4366 +4354 @@
          * @returns {wp.media.view.Modal} Returns itself to allow chaining
          */
         close: function( options ) {
-                var freeze = this._freeze;
-
                 if ( ! this.views.attached || ! this.$el.is(':visible') ) {
                         return this;
                 }
@@ -4387 +4373 @@
 
                 this.propagate('close');
 
-                // If the `freeze` option is set, restore the container's scroll position.
-                if ( freeze ) {
-                        $( window ).scrollTop( freeze.scrollTop );
-                }
-
                 if ( options && options.escape ) {
                         this.propagate('escape');
                 }

src/wp-includes/media-template.php

@@ -182 +182 @@
         </script>
 
         <script type="text/html" id="tmpl-media-modal">
-                <div class="<?php echo $class; ?>">
+                <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>
                         <div class="media-modal-content"></div>
                 </div>