WordPress/wp-includes/customize/class-wp-customize-site-icon-control.php
Andrea Fercia 5c60995bd4 Accessibility: Replace media placeholder clickable divs with buttons.
`<button>` elements are natively interactive, supported by any assistive technology, and must be used instead of non-semantic, non-accessible `<div>` elements.

Also, this change aligns the Media Widgets and the Customizer site icon and site logo controls with the design pattern used in the new Block Editor for similar controls.

Props ramonopoly, welcher, afercia.
Fixes #43151.

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


git-svn-id: http://core.svn.wordpress.org/trunk@44628 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-05 17:49:52 +00:00

94 lines
2.9 KiB
PHP

<?php
/**
* Customize API: WP_Customize_Site_Icon_Control class
*
* @package WordPress
* @subpackage Customize
* @since 4.4.0
*/
/**
* Customize Site Icon control class.
*
* Used only for custom functionality in JavaScript.
*
* @since 4.3.0
*
* @see WP_Customize_Cropped_Image_Control
*/
class WP_Customize_Site_Icon_Control extends WP_Customize_Cropped_Image_Control {
/**
* Control type.
*
* @since 4.3.0
* @var string
*/
public $type = 'site_icon';
/**
* Constructor.
*
* @since 4.3.0
*
* @param WP_Customize_Manager $manager Customizer bootstrap instance.
* @param string $id Control ID.
* @param array $args Optional. Arguments to override class property defaults.
*/
public function __construct( $manager, $id, $args = array() ) {
parent::__construct( $manager, $id, $args );
add_action( 'customize_controls_print_styles', 'wp_site_icon', 99 );
}
/**
* Renders a JS template for the content of the site icon control.
*
* @since 4.5.0
*/
public function content_template() {
?>
<# if ( data.label ) { #>
<span class="customize-control-title">{{ data.label }}</span>
<# } #>
<# if ( data.description ) { #>
<span class="description customize-control-description">{{{ data.description }}}</span>
<# } #>
<# if ( data.attachment && data.attachment.id ) { #>
<div class="attachment-media-view">
<# if ( data.attachment.sizes ) { #>
<div class="site-icon-preview wp-clearfix">
<div class="favicon-preview">
<img src="<?php echo esc_url( admin_url( 'images/' . ( is_rtl() ? 'browser-rtl.png' : 'browser.png' ) ) ); ?>" class="browser-preview" width="182" alt="" />
<div class="favicon">
<img src="{{ data.attachment.sizes.full ? data.attachment.sizes.full.url : data.attachment.url }}" alt="<?php esc_attr_e( 'Preview as a browser icon' ); ?>"/>
</div>
<span class="browser-title" aria-hidden="true"><?php bloginfo( 'name' ); ?></span>
</div>
<img class="app-icon-preview" src="{{ data.attachment.sizes.full ? data.attachment.sizes.full.url : data.attachment.url }}" alt="<?php esc_attr_e( 'Preview as an app icon' ); ?>"/>
</div>
<# } #>
<div class="actions">
<# if ( data.canUpload ) { #>
<button type="button" class="button remove-button"><?php echo $this->button_labels['remove']; ?></button>
<button type="button" class="button upload-button"><?php echo $this->button_labels['change']; ?></button>
<# } #>
</div>
</div>
<# } else { #>
<div class="attachment-media-view">
<# if ( data.canUpload ) { #>
<button type="button" class="upload-button button-add-media"><?php echo $this->button_labels['site_icon']; ?></button>
<# } #>
<div class="actions">
<# if ( data.defaultAttachment ) { #>
<button type="button" class="button default-button"><?php echo $this->button_labels['default']; ?></button>
<# } #>
</div>
</div>
<# } #>
<?php
}
}