Customize: Improve Media control accessibility and compatibility for settings passed as arrays or as solitary setting.

* Eliminate Media control template from having dependency on `params.settings.default` for element ID, to fix compat with `params.settings` array or single `params.setting`. See #36167.
* Move description out of label and add `aria-describedby` to Media control's Select button. See #30738, #33085.
* Obtain notification container whenever content is (re-)rendered (such as for Media control). See #38794.
* Re-render notifications after control content is re-rendered, if control is in expanded section. See #38794.

Amends [41390].
See #36167, #38794, #33085, #30738.

Built from https://develop.svn.wordpress.org/trunk@42031


git-svn-id: http://core.svn.wordpress.org/trunk@41865 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Weston Ruter 2017-10-27 20:18:47 +00:00
parent cb877e10ba
commit d348f1624b
4 changed files with 26 additions and 17 deletions

View File

@ -3693,8 +3693,6 @@
} );
} );
control.notifications.container = control.getNotificationsContainerElement();
renderNotificationsIfVisible = function() {
var sectionId = control.section();
if ( ! sectionId || ( api.section.has( sectionId ) && api.section( sectionId ).expanded() ) ) {
@ -3905,7 +3903,7 @@
* @since 4.1.0
*/
renderContent: function () {
var control = this, template, standardTypes, templateId;
var control = this, template, standardTypes, templateId, sectionId;
standardTypes = [
'button',
@ -3946,6 +3944,13 @@
control.container.html( template( control.params ) );
}
}
// Re-render notifications after content has been re-rendered.
control.notifications.container = control.getNotificationsContainerElement();
sectionId = control.section();
if ( ! sectionId || ( api.section.has( sectionId ) && api.section( sectionId ).expanded() ) ) {
control.notifications.render();
}
},
/**

File diff suppressed because one or more lines are too long

View File

@ -131,14 +131,18 @@ class WP_Customize_Media_Control extends WP_Customize_Control {
*/
public function content_template() {
?>
<label for="{{ data.settings['default'] }}-button">
<# if ( data.label ) { #>
<span class="customize-control-title">{{ data.label }}</span>
<# } #>
<# if ( data.description ) { #>
<span class="description customize-control-description">{{{ data.description }}}</span>
<# } #>
</label>
<#
var selectButtonId = _.uniqueId( 'customize-media-control-button-' );
var descriptionId = _.uniqueId( 'customize-media-control-description-' );
var describedByAttr = data.description ? ' aria-describedby="' + descriptionId + '" ' : '';
#>
<# if ( data.label ) { #>
<label class="customize-control-title" for="{{ selectButtonId }}">{{ data.label }}</label>
<# } #>
<div class="customize-control-notifications-container"></div>
<# if ( data.description ) { #>
<span id="{{ descriptionId }}" class="description customize-control-description">{{{ data.description }}}</span>
<# } #>
<# if ( data.attachment && data.attachment.id ) { #>
<div class="attachment-media-view attachment-media-view-{{ data.attachment.type }} {{ data.attachment.orientation }}">
@ -178,7 +182,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 control-focus" id="{{ data.settings['default'] }}-button">{{ data.button_labels.change }}</button>
<button type="button" class="button upload-button control-focus" id="{{ selectButtonId }}" {{{ describedByAttr }}}>{{ data.button_labels.change }}</button>
<# } #>
</div>
</div>
@ -192,7 +196,7 @@ class WP_Customize_Media_Control extends WP_Customize_Control {
<button type="button" class="button default-button">{{ data.button_labels['default'] }}</button>
<# } #>
<# if ( data.canUpload ) { #>
<button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button">{{ data.button_labels.select }}</button>
<button type="button" class="button upload-button" id="{{ selectButtonId }}" {{{ describedByAttr }}}>{{ data.button_labels.select }}</button>
<# } #>
</div>
</div>

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.9-beta4-42030';
$wp_version = '4.9-beta4-42031';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.