WordPress.org

Make WordPress Core

Changeset 42624


Ignore:
Timestamp:
01/31/2018 05:02:27 PM (4 months 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.