WordPress.org

Make WordPress Core

Changeset 42627


Ignore:
Timestamp:
01/31/2018 11:54:02 PM (4 months 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:
4 edited

Legend:

Unmodified
Added
Removed
  • branches/4.9

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

    r42600 r42627  
    41744174    template: wp.template('media-modal'),
    41754175
    4176     attributes: {
    4177         tabindex: 0
    4178     },
    4179 
    41804176    events: {
    41814177        'click .media-modal-backdrop, .media-modal-close': 'escapeHandler',
     
    41894185            container: document.body,
    41904186            title:     '',
    4191             propagate: true,
    4192             freeze:    true
     4187            propagate: true
    41934188        });
    41944189
     
    42454240    open: function() {
    42464241        var $el = this.$el,
    4247             options = this.options,
    42484242            mceEditor;
    42494243
     
    42584252        }
    42594253
    4260         // If the `freeze` option is set, record the window's scroll position.
    4261         if ( options.freeze ) {
    4262             this._freeze = {
    4263                 scrollTop: $( window ).scrollTop()
    4264             };
    4265         }
    4266 
    42674254        // Disable page scrolling.
    42684255        $( 'body' ).addClass( 'modal-open' );
     
    42724259        // Try to close the onscreen keyboard
    42734260        if ( 'ontouchend' in document ) {
    4274             if ( ( mceEditor = window.tinymce && window.tinymce.activeEditor )  && ! mceEditor.isHidden() && mceEditor.iframeElement ) {
     4261            if ( ( mceEditor = window.tinymce && window.tinymce.activeEditor ) && ! mceEditor.isHidden() && mceEditor.iframeElement ) {
    42754262                mceEditor.iframeElement.focus();
    42764263                mceEditor.iframeElement.blur();
     
    42824269        }
    42834270
    4284         this.$el.focus();
     4271        // Set initial focus on the content instead of this view element, to avoid page scrolling.
     4272        this.$( '.media-modal' ).focus();
    42854273
    42864274        return this.propagate('open');
     
    42924280     */
    42934281    close: function( options ) {
    4294         var freeze = this._freeze;
    4295 
    42964282        if ( ! this.views.attached || ! this.$el.is(':visible') ) {
    42974283            return this;
     
    43124298
    43134299        this.propagate('close');
    4314 
    4315         // If the `freeze` option is set, restore the container's scroll position.
    4316         if ( freeze ) {
    4317             $( window ).scrollTop( freeze.scrollTop );
    4318         }
    43194300
    43204301        if ( options && options.escape ) {
  • branches/4.9/src/wp-includes/js/media/views/modal.js

    r41351 r42627  
    1818    template: wp.template('media-modal'),
    1919
    20     attributes: {
    21         tabindex: 0
    22     },
    23 
    2420    events: {
    2521        'click .media-modal-backdrop, .media-modal-close': 'escapeHandler',
     
    3329            container: document.body,
    3430            title:     '',
    35             propagate: true,
    36             freeze:    true
     31            propagate: true
    3732        });
    3833
     
    8984    open: function() {
    9085        var $el = this.$el,
    91             options = this.options,
    9286            mceEditor;
    9387
     
    10296        }
    10397
    104         // If the `freeze` option is set, record the window's scroll position.
    105         if ( options.freeze ) {
    106             this._freeze = {
    107                 scrollTop: $( window ).scrollTop()
    108             };
    109         }
    110 
    11198        // Disable page scrolling.
    11299        $( 'body' ).addClass( 'modal-open' );
     
    116103        // Try to close the onscreen keyboard
    117104        if ( 'ontouchend' in document ) {
    118             if ( ( mceEditor = window.tinymce && window.tinymce.activeEditor )  && ! mceEditor.isHidden() && mceEditor.iframeElement ) {
     105            if ( ( mceEditor = window.tinymce && window.tinymce.activeEditor ) && ! mceEditor.isHidden() && mceEditor.iframeElement ) {
    119106                mceEditor.iframeElement.focus();
    120107                mceEditor.iframeElement.blur();
     
    126113        }
    127114
    128         this.$el.focus();
     115        // Set initial focus on the content instead of this view element, to avoid page scrolling.
     116        this.$( '.media-modal' ).focus();
    129117
    130118        return this.propagate('open');
     
    136124     */
    137125    close: function( options ) {
    138         var freeze = this._freeze;
    139 
    140126        if ( ! this.views.attached || ! this.$el.is(':visible') ) {
    141127            return this;
     
    157143        this.propagate('close');
    158144
    159         // If the `freeze` option is set, restore the container's scroll position.
    160         if ( freeze ) {
    161             $( window ).scrollTop( freeze.scrollTop );
    162         }
    163 
    164145        if ( options && options.escape ) {
    165146            this.propagate('escape');
  • branches/4.9/src/wp-includes/media-template.php

    r41325 r42627  
    163163
    164164    <script type="text/html" id="tmpl-media-modal">
    165         <div class="<?php echo $class; ?>">
     165        <div tabindex="0" class="<?php echo $class; ?>">
    166166            <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>
    167167            <div class="media-modal-content"></div>
Note: See TracChangeset for help on using the changeset viewer.