Make WordPress Core

Changeset 42031


Ignore:
Timestamp:
10/27/2017 08:17:49 PM (7 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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/js/customize-controls.js

    r42025 r42031  
    36943694            } );
    36953695
    3696             control.notifications.container = control.getNotificationsContainerElement();
    3697 
    36983696            renderNotificationsIfVisible = function() {
    36993697                var sectionId = control.section();
     
    39063904         */
    39073905        renderContent: function () {
    3908             var control = this, template, standardTypes, templateId;
     3906            var control = this, template, standardTypes, templateId, sectionId;
    39093907
    39103908            standardTypes = [
     
    39463944                    control.container.html( template( control.params ) );
    39473945                }
     3946            }
     3947
     3948            // Re-render notifications after content has been re-rendered.
     3949            control.notifications.container = control.getNotificationsContainerElement();
     3950            sectionId = control.section();
     3951            if ( ! sectionId || ( api.section.has( sectionId ) && api.section( sectionId ).expanded() ) ) {
     3952                control.notifications.render();
    39483953            }
    39493954        },
  • trunk/src/wp-includes/customize/class-wp-customize-media-control.php

    r41550 r42031  
    132132    public function content_template() {
    133133        ?>
    134         <label for="{{ data.settings['default'] }}-button">
    135             <# if ( data.label ) { #>
    136                 <span class="customize-control-title">{{ data.label }}</span>
    137             <# } #>
    138             <# if ( data.description ) { #>
    139                 <span class="description customize-control-description">{{{ data.description }}}</span>
    140             <# } #>
    141         </label>
     134        <#
     135        var selectButtonId = _.uniqueId( 'customize-media-control-button-' );
     136        var descriptionId = _.uniqueId( 'customize-media-control-description-' );
     137        var describedByAttr = data.description ? ' aria-describedby="' + descriptionId + '" ' : '';
     138        #>
     139        <# if ( data.label ) { #>
     140            <label class="customize-control-title" for="{{ selectButtonId }}">{{ data.label }}</label>
     141        <# } #>
     142        <div class="customize-control-notifications-container"></div>
     143        <# if ( data.description ) { #>
     144            <span id="{{ descriptionId }}" class="description customize-control-description">{{{ data.description }}}</span>
     145        <# } #>
    142146
    143147        <# if ( data.attachment && data.attachment.id ) { #>
     
    179183                    <# if ( data.canUpload ) { #>
    180184                    <button type="button" class="button remove-button">{{ data.button_labels.remove }}</button>
    181                     <button type="button" class="button upload-button control-focus" id="{{ data.settings['default'] }}-button">{{ data.button_labels.change }}</button>
     185                    <button type="button" class="button upload-button control-focus" id="{{ selectButtonId }}" {{{ describedByAttr }}}>{{ data.button_labels.change }}</button>
    182186                    <# } #>
    183187                </div>
     
    193197                    <# } #>
    194198                    <# if ( data.canUpload ) { #>
    195                     <button type="button" class="button upload-button" id="{{ data.settings['default'] }}-button">{{ data.button_labels.select }}</button>
     199                    <button type="button" class="button upload-button" id="{{ selectButtonId }}" {{{ describedByAttr }}}>{{ data.button_labels.select }}</button>
    196200                    <# } #>
    197201                </div>
Note: See TracChangeset for help on using the changeset viewer.