sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Media: avoid page scrolling when opening the media modal.

Browse Source 
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.


git-svn-id: https://develop.svn.wordpress.org/trunk@42624 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia 2018-01-31 17:02:27 +00:00
parent 1c4f57f425
commit 37e81feb9f
3 changed files with 9 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/wp-includes/js/media-views.js
View File

@ -4248,10 +4248,6 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
tagName: 'div',
template: wp.template('media-modal'),
attributes: {
tabindex: 0
},
events: {
'click .media-modal-backdrop, .media-modal-close': 'escapeHandler',
'keydown': 'keydown'
@ -4263,8 +4259,7 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
_.defaults( this.options, {
container: document.body,
title: '',
propagate: true,
freeze: true
propagate: true
});
this.focusManager = new wp.media.view.FocusManager({
@ -4319,7 +4314,6 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
*/
open: function() {
var $el = this.$el,
options = this.options,
mceEditor;
if ( $el.is(':visible') ) {
@ -4332,13 +4326,6 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
this.attach();
}
// 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' );
@ -4346,7 +4333,7 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
// 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();
@ -4356,7 +4343,8 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
}
}
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');
},
@ -4366,8 +4354,6 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
* @returns {wp.media.view.Modal} Returns itself to allow chaining
*/
close: function( options ) {
var freeze = this._freeze;
if ( ! this.views.attached || ! this.$el.is(':visible') ) {
return this;
}
@ -4387,11 +4373,6 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
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');
}

27
src/wp-includes/js/media/views/modal.js
View File

@ -17,10 +17,6 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
tagName: 'div',
template: wp.template('media-modal'),
attributes: {
tabindex: 0
},
events: {
'click .media-modal-backdrop, .media-modal-close': 'escapeHandler',
'keydown': 'keydown'
@ -32,8 +28,7 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
_.defaults( this.options, {
container: document.body,
title: '',
propagate: true,
freeze: true
propagate: true
});
this.focusManager = new wp.media.view.FocusManager({
@ -88,7 +83,6 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
*/
open: function() {
var $el = this.$el,
options = this.options,
mceEditor;
if ( $el.is(':visible') ) {
@ -101,13 +95,6 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
this.attach();
}
// 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' );
@ -115,7 +102,7 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
// 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();
@ -125,7 +112,8 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
}
}
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');
},
@ -135,8 +123,6 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
* @returns {wp.media.view.Modal} Returns itself to allow chaining
*/
close: function( options ) {
var freeze = this._freeze;
if ( ! this.views.attached || ! this.$el.is(':visible') ) {
return this;
}
@ -156,11 +142,6 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
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');
}

2
src/wp-includes/media-template.php
View File

@ -182,7 +182,7 @@ function wp_print_media_templates() {
</script>
<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>
</div>