Changeset 42627

Timestamp:

01/31/2018 11:54:02 PM (8 years ago)

Author:

SergeyBiryukov

Message:

Media: avoid page scrolling when opening the media modal.

Moves focus to a proper element within the media modal to avoid the underlying
page to scroll to the bottom. Removes the media modal freeze option.

Props andreiglingeanu, adamsilverstein.
Merges [42624] to the 4.9 branch.
Fixes #39859.

Location:

branches/4.9

Files:

• . (modified) (1 prop)
• src/wp-includes/js/media-views.js (modified) (8 diffs)
• src/wp-includes/js/media/views/modal.js (modified) (8 diffs)
• src/wp-includes/media-template.php (modified) (1 diff)

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

@@ -4174 +4174 @@
     template: wp.template('media-modal'),
 
-    attributes: {
-        tabindex: 0
-    },
-
     events: {
         'click .media-modal-backdrop, .media-modal-close': 'escapeHandler',
@@ -4189 +4185 @@
             container: document.body,
             title:     '',
-            propagate: true,
-            freeze:    true
+            propagate: true
         });
 
@@ -4245 +4240 @@
     open: function() {
         var $el = this.$el,
-            options = this.options,
             mceEditor;
 
@@ -4258 +4252 @@
         }
 
-        // 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' );
@@ -4272 +4259 @@
         // 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();
@@ -4282 +4269 @@
         }
 
-        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');
@@ -4292 +4280 @@
      */
     close: function( options ) {
-        var freeze = this._freeze;
-
         if ( ! this.views.attached || ! this.$el.is(':visible') ) {
             return this;
@@ -4312 +4298 @@
 
         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 ) {

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

@@ -18 +18 @@
     template: wp.template('media-modal'),
 
-    attributes: {
-        tabindex: 0
-    },
-
     events: {
         'click .media-modal-backdrop, .media-modal-close': 'escapeHandler',
@@ -33 +29 @@
             container: document.body,
             title:     '',
-            propagate: true,
-            freeze:    true
+            propagate: true
         });
 
@@ -89 +84 @@
     open: function() {
         var $el = this.$el,
-            options = this.options,
             mceEditor;
 
@@ -102 +96 @@
         }
 
-        // 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' );
@@ -116 +103 @@
         // 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();
@@ -126 +113 @@
         }
 
-        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');
@@ -136 +124 @@
      */
     close: function( options ) {
-        var freeze = this._freeze;
-
         if ( ! this.views.attached || ! this.$el.is(':visible') ) {
             return this;
@@ -157 +143 @@
         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');

branches/4.9/src/wp-includes/media-template.php

@@ -163 +163 @@
 
     <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>