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

Accessibility: Handle focus when closing the media modal.

Browse Source 
When closing the media modal, by default focus should be moved back to the UI
control that was clicked to open the modal. The only exception is when inserting
images into the Visual or Text editor.

Fixes #38142.


git-svn-id: https://develop.svn.wordpress.org/trunk@38652 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia 2016-09-25 21:32:10 +00:00
parent cf6f354fa8
commit 7be45216c4
3 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/wp-includes/js/media-editor.js
View File

@ -1111,13 +1111,6 @@
event.preventDefault();
// Remove focus from the `.insert-media` button.
// Prevents Opera from showing the outline of the button
// above the modal.
//
// See: https://core.trac.wordpress.org/ticket/22445
elem.blur();
if ( elem.hasClass( 'gallery' ) ) {
options.state = 'gallery';
options.title = wp.media.view.l10n.createGalleryTitle;

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

@ -6698,6 +6698,8 @@ Modal = wp.media.View.extend({
'keydown': 'keydown'
},
clickedOpenerEl: null,
initialize: function() {
_.defaults( this.options, {
container: document.body,
@ -6765,6 +6767,8 @@ Modal = wp.media.View.extend({
return this;
}
this.clickedOpenerEl = document.activeElement;
if ( ! this.views.attached ) {
this.attach();
}
@ -6815,8 +6819,12 @@ Modal = wp.media.View.extend({
// Hide modal and remove restricted media modal tab focus once it's closed
this.$el.hide().undelegate( 'keydown' );
// Put focus back in useful location once modal is closed
$('#wpbody-content').focus();
// Put focus back in useful location once modal is closed.
if ( null !== this.clickedOpenerEl ) {
this.clickedOpenerEl.focus();
} else {
$( '#wpbody-content' ).focus();
}
this.propagate('close');

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

@ -24,6 +24,8 @@ Modal = wp.media.View.extend({
'keydown': 'keydown'
},
clickedOpenerEl: null,
initialize: function() {
_.defaults( this.options, {
container: document.body,
@ -91,6 +93,8 @@ Modal = wp.media.View.extend({
return this;
}
this.clickedOpenerEl = document.activeElement;
if ( ! this.views.attached ) {
this.attach();
}
@ -141,8 +145,12 @@ Modal = wp.media.View.extend({
// Hide modal and remove restricted media modal tab focus once it's closed
this.$el.hide().undelegate( 'keydown' );
// Put focus back in useful location once modal is closed
$('#wpbody-content').focus();
// Put focus back in useful location once modal is closed.
if ( null !== this.clickedOpenerEl ) {
this.clickedOpenerEl.focus();
} else {
$( '#wpbody-content' ).focus();
}
this.propagate('close');