WordPress.org

Make WordPress Core

Changeset 42624


Ignore:
Timestamp:
01/31/18 17:02:27 (3 weeks ago)
Author:
afercia
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.
Fixes 39859.

Location:
trunk/src/wp-includes
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/media-views.js

    r42599 r42624  
    42494249    template: wp.template('media-modal'), 
    42504250 
    4251     attributes: { 
    4252         tabindex: 0 
    4253     }, 
    4254  
    42554251    events: { 
    42564252        'click .media-modal-backdrop, .media-modal-close': 'escapeHandler', 
     
    42644260            container: document.body, 
    42654261            title:     '', 
    4266             propagate: true, 
    4267             freeze:    true 
     4262            propagate: true 
    42684263        }); 
    42694264 
     
    43204315    open: function() { 
    43214316        var $el = this.$el, 
    4322             options = this.options, 
    43234317            mceEditor; 
    43244318 
     
    43334327        } 
    43344328 
    4335         // If the `freeze` option is set, record the window's scroll position. 
    4336         if ( options.freeze ) { 
    4337             this._freeze = { 
    4338                 scrollTop: $( window ).scrollTop() 
    4339             }; 
    4340         } 
    4341  
    43424329        // Disable page scrolling. 
    43434330        $( 'body' ).addClass( 'modal-open' ); 
     
    43474334        // Try to close the onscreen keyboard 
    43484335        if ( 'ontouchend' in document ) { 
    4349             if ( ( mceEditor = window.tinymce && window.tinymce.activeEditor )  && ! mceEditor.isHidden() && mceEditor.iframeElement ) { 
     4336            if ( ( mceEditor = window.tinymce && window.tinymce.activeEditor ) && ! mceEditor.isHidden() && mceEditor.iframeElement ) { 
    43504337                mceEditor.iframeElement.focus(); 
    43514338                mceEditor.iframeElement.blur(); 
     
    43574344        } 
    43584345 
    4359         this.$el.focus(); 
     4346        // Set initial focus on the content instead of this view element, to avoid page scrolling. 
     4347        this.$( '.media-modal' ).focus(); 
    43604348 
    43614349        return this.propagate('open'); 
     
    43674355     */ 
    43684356    close: function( options ) { 
    4369         var freeze = this._freeze; 
    4370  
    43714357        if ( ! this.views.attached || ! this.$el.is(':visible') ) { 
    43724358            return this; 
     
    43874373 
    43884374        this.propagate('close'); 
    4389  
    4390         // If the `freeze` option is set, restore the container's scroll position. 
    4391         if ( freeze ) { 
    4392             $( window ).scrollTop( freeze.scrollTop ); 
    4393         } 
    43944375 
    43954376        if ( options && options.escape ) { 
  • trunk/src/wp-includes/js/media/views/modal.js

    r41351 r42624  
    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'); 
  • trunk/src/wp-includes/media-template.php

    r42444 r42624  
    183183 
    184184    <script type="text/html" id="tmpl-media-modal"> 
    185         <div class="<?php echo $class; ?>"> 
     185        <div tabindex="0" class="<?php echo $class; ?>"> 
    186186            <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> 
    187187            <div class="media-modal-content"></div> 
Note: See TracChangeset for help on using the changeset viewer.