Changeset 42627

Timestamp:

01/31/2018 11:54:02 PM (9 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>