WordPress.org

Make WordPress Core

Changeset 42627


Ignore:
Timestamp:
01/31/18 23:54:02 (2 weeks 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.