Customize: Put focus on change button instead of remove button in media control.

Allow controls to specify the primary element to receive focus by adding a `control-focus` class.

Props adamsilverstein, westonruter.
Fixes #36337.


git-svn-id: https://develop.svn.wordpress.org/trunk@37152 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter 2016-03-30 21:40:43 +00:00
parent 253308253b
commit 0bc533e10b
2 changed files with 8 additions and 4 deletions

View File

@ -77,7 +77,7 @@
* @param {Function} [params.completeCallback]
*/
focus = function ( params ) {
var construct, completeCallback, focus;
var construct, completeCallback, focus, focusElement;
construct = this;
params = params || {};
focus = function () {
@ -90,8 +90,12 @@
focusContainer = construct.container;
}
// Note that we can't use :focusable due to a jQuery UI issue. See: https://github.com/jquery/jquery-ui/pull/1583
focusContainer.find( 'input, select, textarea, button, object, a[href], [tabindex]' ).filter( ':visible' ).first().focus();
focusElement = focusContainer.find( '.control-focus:first' );
if ( 0 === focusElement.length ) {
// Note that we can't use :focusable due to a jQuery UI issue. See: https://github.com/jquery/jquery-ui/pull/1583
focusElement = focusContainer.find( 'input, select, textarea, button, object, a[href], [tabindex]' ).filter( ':visible' ).first();
}
focusElement.focus();
};
if ( params.completeCallback ) {
completeCallback = params.completeCallback;

View File

@ -196,7 +196,7 @@ class WP_Customize_Media_Control extends WP_Customize_Control {
<div class="actions">
<# if ( data.canUpload ) { #>
<button type="button" class="button remove-button">{{ data.button_labels.remove }}</button>
<button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button">{{ data.button_labels.change }}</button>
<button type="button" class="button upload-button control-focus" id="{{ data.settings['default'] }}-button">{{ data.button_labels.change }}</button>
<div style="clear:both"></div>
<# } #>
</div>