Changeset 42031

Timestamp:

10/27/2017 08:17:49 PM (9 years ago)

Author:

westonruter

Message:

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.

Location:

trunk/src

Files:

• wp-admin/js/customize-controls.js (modified) (3 diffs)
• wp-includes/customize/class-wp-customize-media-control.php (modified) (3 diffs)

trunk/src/wp-admin/js/customize-controls.js

@@ -3694 +3694 @@
                         } );
 
-                        control.notifications.container = control.getNotificationsContainerElement();
-
                         renderNotificationsIfVisible = function() {
                                 var sectionId = control.section();
@@ -3906 +3904 @@
                  */
                 renderContent: function () {
-                        var control = this, template, standardTypes, templateId;
+                        var control = this, template, standardTypes, templateId, sectionId;
 
                         standardTypes = [
@@ -3946 +3944 @@
                                         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();
                         }
                 },

trunk/src/wp-includes/customize/class-wp-customize-media-control.php

@@ -132 +132 @@
         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 ) { #>
@@ -179 +183 @@
                                         <# 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>
@@ -193 +197 @@
                                         <# } #>
                                         <# 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>