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

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

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


git-svn-id: https://develop.svn.wordpress.org/trunk@42031 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter 2017-10-27 20:17:49 +00:00
parent 6eacf2f06b
commit acd03e1ecb
2 changed files with 22 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/wp-admin/js/customize-controls.js
View File

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

16
src/wp-includes/customize/class-wp-customize-media-control.php
View File

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