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

Media: cleanup recent changes to `media.view.FocusManager`. 

* Adjusts the focus method to target the menu for the current modal
* Refactor the FocusManager so that the method names and the functionality matches more closely with how it currently works. The changes in 4.0 to the FocusManager change the purpose of the focus manager entirely — instead of being a way to save and restore focus state, the new FocusManager is about constraining keyboard navigation via the tab key to inside the modal. 

Props gcorne.
See #23560.


git-svn-id: https://develop.svn.wordpress.org/trunk@29602 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Scott Taylor 2014-08-25 18:22:34 +00:00
parent 361d664db5
commit 15eb91dfdb
1 changed files with 21 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2498,9 +2498,7 @@
// Keep focus inside media modal
// after canceling a gallery
new media.view.FocusManager({
el: this.el
}).focus();
this.controller.modal.focusManager.focus();
}
},
separateCancel: new media.View({
@ -2689,9 +2687,7 @@
// Keep focus inside media modal
// after jumping to gallery view
new media.view.FocusManager({
el: this.el
}).focus();
this.controller.modal.focusManager.focus();
}
});
},
@ -2721,9 +2717,7 @@
// Keep focus inside media modal
// after jumping to playlist view
new media.view.FocusManager({
el: this.el
}).focus();
this.controller.modal.focusManager.focus();
}
});
},
@ -2753,9 +2747,7 @@
// Keep focus inside media modal
// after jumping to video playlist view
new media.view.FocusManager({
el: this.el
}).focus();
this.controller.modal.focusManager.focus();
}
});
},
@ -3253,7 +3245,7 @@
}
}
this.$( '.media-modal-close' ).focus();
this.$el.focus();
return this.propagate('open');
},
@ -3351,42 +3343,37 @@
* @augments Backbone.View
*/
media.view.FocusManager = media.View.extend({
events: {
keydown: 'recordTab',
focusin: 'updateIndex'
'keydown': 'constrainTabbing'
},
focus: function() {
// Reset focus on first left menu item
$('.media-menu-item').first().focus();
focus: function() { // Reset focus on first left menu item
this.$('.media-menu-item').first().focus();
},
/**
* @param {Object} event
*/
recordTab: function( event ) {
constrainTabbing: function( event ) {
var tabbables;
// Look for the tab key.
if ( 9 !== event.keyCode ) {
return;
}
tabbables = this.$( ':tabbable' );
// Keep tab focus within media modal while it's open
if ( event.target === this.tabbableLast[0] && !event.shiftKey ) {
this.tabbableFirst.focus();
if ( tabbables.last()[0] === event.target && ! event.shiftKey ) {
tabbables.first().focus();
return false;
} else if ( event.target === this.tabbableFirst[0] && event.shiftKey ) {
this.tabbableLast.focus();
} else if ( tabbables.first()[0] === event.target && event.shiftKey ) {
tabbables.last().focus();
return false;
}
},
/**
* @param {Object} event
*/
updateIndex: function() {
// Resets tabbable elements
this.tabbables = $( ':tabbable', this.$el );
this.tabbableFirst = this.tabbables.filter( ':first' );
this.tabbableLast = this.tabbables.filter( ':last' );
}
});
/**
@ -6165,9 +6152,7 @@
// Keep focus inside media modal
// after clear link is selected
new media.view.FocusManager({
el: this.el
}).focus();
this.controller.modal.focusManager.focus();
}
});
@ -6520,9 +6505,7 @@
this.model.destroy();
// Keep focus inside media modal
// after image is deleted
new media.view.FocusManager({
el: this.el
}).focus();
this.controller.modal.focusManager.focus();
}
},
/**