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

Timestamp:

10/27/2017 08:17:49 PM (8 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.

File:

• trunk/src/wp-includes/customize/class-wp-customize-media-control.php (modified) (3 diffs)

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>