Customize: Improve accessibility of markup for base `WP_Customize_Control` and `WP_Customize_Nav_Menu_Control` with proper use of `label` elements and inclusion of `aria-describedby`.
See #33085. Props valendesigns, afercia, westonruter. Built from https://develop.svn.wordpress.org/trunk@41740 git-svn-id: http://core.svn.wordpress.org/trunk@41574 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Weston Ruter
parent
55ba2f5e53
commit
c03b283f37
|
|
@ -929,9 +929,7 @@ p.customize-section-description {
|
|||
line-height: 28px;
|
||||
}
|
||||
|
||||
.customize-control-radio label,
|
||||
.customize-control-checkbox label,
|
||||
.customize-control-nav_menu_auto_add label {
|
||||
.customize-control .customize-inside-control-row {
|
||||
line-height: 20px;
|
||||
display: block;
|
||||
margin-right: 24px;
|
||||
|
|
@ -2670,9 +2668,9 @@ body.adding-widget .add-new-widget:before,
|
|||
display: inline;
|
||||
}
|
||||
|
||||
.customize-control-radio label,
|
||||
.customize-control-checkbox label,
|
||||
.customize-control-nav_menu_auto_add label {
|
||||
.customize-control-radio .customize-inside-control-row,
|
||||
.customize-control-checkbox .customize-inside-control-row,
|
||||
.customize-control-nav_menu_auto_add .customize-inside-control-row {
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -929,9 +929,7 @@ p.customize-section-description {
|
|||
line-height: 28px;
|
||||
}
|
||||
|
||||
.customize-control-radio label,
|
||||
.customize-control-checkbox label,
|
||||
.customize-control-nav_menu_auto_add label {
|
||||
.customize-control .customize-inside-control-row {
|
||||
line-height: 20px;
|
||||
display: block;
|
||||
margin-left: 24px;
|
||||
|
|
@ -2670,9 +2668,9 @@ body.adding-widget .add-new-widget:before,
|
|||
display: inline;
|
||||
}
|
||||
|
||||
.customize-control-radio label,
|
||||
.customize-control-checkbox label,
|
||||
.customize-control-nav_menu_auto_add label {
|
||||
.customize-control-radio .customize-inside-control-row,
|
||||
.customize-control-checkbox .customize-inside-control-row,
|
||||
.customize-control-nav_menu_auto_add .customize-inside-control-row {
|
||||
margin-left: 32px;
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -477,83 +477,104 @@ class WP_Customize_Control {
|
|||
* @since 3.4.0
|
||||
*/
|
||||
protected function render_content() {
|
||||
switch( $this->type ) {
|
||||
$input_id = '_customize-input-' . $this->id;
|
||||
$description_id = '_customize-description-' . $this->id;
|
||||
$describedby_attr = ( ! empty( $this->description ) ) ? 'aria-describedby="' . esc_attr( $description_id ) . '"' : '';
|
||||
switch ( $this->type ) {
|
||||
case 'checkbox':
|
||||
?>
|
||||
<label>
|
||||
<input type="checkbox" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); checked( $this->value() ); ?> />
|
||||
<?php echo esc_html( $this->label ); ?>
|
||||
<span class="customize-inside-control-row">
|
||||
<input
|
||||
id="<?php echo esc_attr( $input_id ); ?>"
|
||||
<?php echo $describedby_attr; ?>
|
||||
type="checkbox"
|
||||
value="<?php echo esc_attr( $this->value() ); ?>"
|
||||
<?php $this->link(); ?>
|
||||
<?php checked( $this->value() ); ?>
|
||||
/>
|
||||
<label for="<?php echo esc_attr( $input_id ); ?>"><?php echo esc_html( $this->label ); ?></label>
|
||||
<?php if ( ! empty( $this->description ) ) : ?>
|
||||
<span class="description customize-control-description"><?php echo $this->description; ?></span>
|
||||
<span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description; ?></span>
|
||||
<?php endif; ?>
|
||||
</label>
|
||||
</span>
|
||||
<?php
|
||||
break;
|
||||
case 'radio':
|
||||
if ( empty( $this->choices ) )
|
||||
if ( empty( $this->choices ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
$name = '_customize-radio-' . $this->id;
|
||||
|
||||
if ( ! empty( $this->label ) ) : ?>
|
||||
?>
|
||||
<?php if ( ! empty( $this->label ) ) : ?>
|
||||
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
|
||||
<?php endif;
|
||||
if ( ! empty( $this->description ) ) : ?>
|
||||
<span class="description customize-control-description"><?php echo $this->description ; ?></span>
|
||||
<?php endif;
|
||||
<?php endif; ?>
|
||||
<?php if ( ! empty( $this->description ) ) : ?>
|
||||
<span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description ; ?></span>
|
||||
<?php endif; ?>
|
||||
|
||||
foreach ( $this->choices as $value => $label ) :
|
||||
?>
|
||||
<label>
|
||||
<input type="radio" value="<?php echo esc_attr( $value ); ?>" name="<?php echo esc_attr( $name ); ?>" <?php $this->link(); checked( $this->value(), $value ); ?> />
|
||||
<?php echo esc_html( $label ); ?><br/>
|
||||
</label>
|
||||
<?php
|
||||
endforeach;
|
||||
<?php foreach ( $this->choices as $value => $label ) : ?>
|
||||
<span class="customize-inside-control-row">
|
||||
<input
|
||||
id="<?php echo esc_attr( $input_id . '-radio-' . $value ); ?>"
|
||||
type="radio" <?php echo $describedby_attr; ?>
|
||||
value="<?php echo esc_attr( $value ); ?>"
|
||||
name="<?php echo esc_attr( $name ); ?>"
|
||||
<?php $this->link(); ?>
|
||||
<?php checked( $this->value(), $value ); ?>
|
||||
/>
|
||||
<label for="<?php echo esc_attr( $input_id . '-radio-' . $value ); ?>"><?php echo esc_html( $label ); ?></label>
|
||||
</span>
|
||||
<?php endforeach; ?>
|
||||
<?php
|
||||
break;
|
||||
case 'select':
|
||||
if ( empty( $this->choices ) )
|
||||
if ( empty( $this->choices ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
?>
|
||||
<label>
|
||||
<?php if ( ! empty( $this->label ) ) : ?>
|
||||
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
|
||||
<?php endif;
|
||||
if ( ! empty( $this->description ) ) : ?>
|
||||
<span class="description customize-control-description"><?php echo $this->description; ?></span>
|
||||
<?php endif; ?>
|
||||
<?php if ( ! empty( $this->label ) ) : ?>
|
||||
<label for="<?php echo esc_attr( $input_id ); ?>" class="customize-control-title"><?php echo esc_html( $this->label ); ?></label>
|
||||
<?php endif; ?>
|
||||
<?php if ( ! empty( $this->description ) ) : ?>
|
||||
<span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description; ?></span>
|
||||
<?php endif; ?>
|
||||
|
||||
<select <?php $this->link(); ?>>
|
||||
<?php
|
||||
foreach ( $this->choices as $value => $label )
|
||||
echo '<option value="' . esc_attr( $value ) . '"' . selected( $this->value(), $value, false ) . '>' . $label . '</option>';
|
||||
?>
|
||||
</select>
|
||||
</label>
|
||||
<select id="<?php echo esc_attr( $input_id ); ?>" <?php echo $describedby_attr; ?> <?php $this->link(); ?>>
|
||||
<?php
|
||||
foreach ( $this->choices as $value => $label ) {
|
||||
echo '<option value="' . esc_attr( $value ) . '"' . selected( $this->value(), $value, false ) . '>' . $label . '</option>';
|
||||
}
|
||||
?>
|
||||
</select>
|
||||
<?php
|
||||
break;
|
||||
case 'textarea':
|
||||
?>
|
||||
<label>
|
||||
<?php if ( ! empty( $this->label ) ) : ?>
|
||||
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
|
||||
<?php endif;
|
||||
if ( ! empty( $this->description ) ) : ?>
|
||||
<span class="description customize-control-description"><?php echo $this->description; ?></span>
|
||||
<?php endif; ?>
|
||||
<textarea rows="5" <?php $this->input_attrs(); ?> <?php $this->link(); ?>><?php echo esc_textarea( $this->value() ); ?></textarea>
|
||||
</label>
|
||||
<?php if ( ! empty( $this->label ) ) : ?>
|
||||
<label for="<?php echo esc_attr( $input_id ); ?>" class="customize-control-title"><?php echo esc_html( $this->label ); ?></label>
|
||||
<?php endif; ?>
|
||||
<?php if ( ! empty( $this->description ) ) : ?>
|
||||
<span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description; ?></span>
|
||||
<?php endif; ?>
|
||||
<textarea
|
||||
id="<?php echo esc_attr( $input_id ); ?>"
|
||||
rows="5"
|
||||
<?php echo $describedby_attr; ?>
|
||||
<?php $this->input_attrs(); ?>
|
||||
<?php $this->link(); ?>>
|
||||
<?php echo esc_textarea( $this->value() ); ?>
|
||||
</textarea>
|
||||
<?php
|
||||
break;
|
||||
case 'dropdown-pages':
|
||||
?>
|
||||
<label>
|
||||
<?php if ( ! empty( $this->label ) ) : ?>
|
||||
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
|
||||
<?php endif;
|
||||
if ( ! empty( $this->description ) ) : ?>
|
||||
<span class="description customize-control-description"><?php echo $this->description; ?></span>
|
||||
<label for="<?php echo esc_attr( $input_id ); ?>" class="customize-control-title"><?php echo esc_html( $this->label ); ?></label>
|
||||
<?php endif; ?>
|
||||
<?php if ( ! empty( $this->description ) ) : ?>
|
||||
<span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description; ?></span>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php
|
||||
|
|
@ -576,7 +597,7 @@ class WP_Customize_Control {
|
|||
}
|
||||
|
||||
// Hackily add in the data link parameter.
|
||||
$dropdown = str_replace( '<select', '<select ' . $this->get_link(), $dropdown );
|
||||
$dropdown = str_replace( '<select', '<select ' . $this->get_link() . ' id="' . esc_attr( $input_id ) . '" ' . $describedby_attr, $dropdown );
|
||||
|
||||
// Even more hacikly add auto-draft page stubs.
|
||||
// @todo Eventually this should be removed in favor of the pages being injected into the underlying get_pages() call. See <https://github.com/xwp/wp-customize-posts/pull/250>.
|
||||
|
|
@ -596,30 +617,37 @@ class WP_Customize_Control {
|
|||
|
||||
echo $dropdown;
|
||||
?>
|
||||
</label>
|
||||
<?php if ( $this->allow_addition && current_user_can( 'publish_pages' ) && current_user_can( 'edit_theme_options' ) ) : // Currently tied to menus functionality. ?>
|
||||
<button type="button" class="button-link add-new-toggle"><?php
|
||||
<button type="button" class="button-link add-new-toggle">
|
||||
<?php
|
||||
/* translators: %s: add new page label */
|
||||
printf( __( '+ %s' ), get_post_type_object( 'page' )->labels->add_new_item );
|
||||
?></button>
|
||||
?>
|
||||
</button>
|
||||
<div class="new-content-item">
|
||||
<label for="create-input-<?php echo $this->id; ?>"><span class="screen-reader-text"><?php _e( 'New page title' ); ?></span></label>
|
||||
<input type="text" id="create-input-<?php echo $this->id; ?>" class="create-item-input" placeholder="<?php esc_attr_e( 'New page title…' ); ?>">
|
||||
<button type="button" class="button add-content"><?php _e( 'Add' ); ?></button>
|
||||
</div>
|
||||
<?php endif;
|
||||
<?php endif; ?>
|
||||
<?php
|
||||
break;
|
||||
default:
|
||||
?>
|
||||
<label>
|
||||
<?php if ( ! empty( $this->label ) ) : ?>
|
||||
<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
|
||||
<?php endif;
|
||||
if ( ! empty( $this->description ) ) : ?>
|
||||
<span class="description customize-control-description"><?php echo $this->description; ?></span>
|
||||
<?php endif; ?>
|
||||
<input type="<?php echo esc_attr( $this->type ); ?>" <?php $this->input_attrs(); ?> value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->link(); ?> />
|
||||
</label>
|
||||
<?php if ( ! empty( $this->label ) ) : ?>
|
||||
<label for="<?php echo esc_attr( $input_id ); ?>" class="customize-control-title"><?php echo esc_html( $this->label ); ?></label>
|
||||
<?php endif; ?>
|
||||
<?php if ( ! empty( $this->description ) ) : ?>
|
||||
<span id="<?php echo esc_attr( $description_id ); ?>" class="description customize-control-description"><?php echo $this->description; ?></span>
|
||||
<?php endif; ?>
|
||||
<input
|
||||
id="<?php echo esc_attr( $input_id ); ?>"
|
||||
type="<?php echo esc_attr( $this->type ); ?>"
|
||||
<?php echo $describedby_attr; ?>
|
||||
<?php $this->input_attrs(); ?>
|
||||
value="<?php echo esc_attr( $this->value() ); ?>"
|
||||
<?php $this->link(); ?>
|
||||
/>
|
||||
<?php
|
||||
break;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@ class WP_Customize_Nav_Menu_Control extends WP_Customize_Control {
|
|||
*/
|
||||
public function content_template() {
|
||||
?>
|
||||
<# var elementId; #>
|
||||
<button type="button" class="button add-new-menu-item" aria-label="<?php esc_attr_e( 'Add or remove menu items' ); ?>" aria-expanded="false" aria-controls="available-menu-items">
|
||||
<?php _e( 'Add Items' ); ?>
|
||||
</button>
|
||||
|
|
@ -64,21 +65,25 @@ class WP_Customize_Nav_Menu_Control extends WP_Customize_Control {
|
|||
</li>
|
||||
|
||||
<?php foreach ( get_registered_nav_menus() as $location => $description ) : ?>
|
||||
<li class="customize-control customize-control-checkbox assigned-menu-location">
|
||||
<label>
|
||||
<input type="checkbox" data-menu-id="{{ data.menu_id }}" data-location-id="<?php echo esc_attr( $location ); ?>" class="menu-location" /> <?php echo $description; ?>
|
||||
<span class="theme-location-set"><?php
|
||||
/* translators: %s: menu name */
|
||||
printf( _x( '(Current: %s)', 'menu location' ),
|
||||
'<span class="current-menu-location-name-' . esc_attr( $location ) . '"></span>'
|
||||
);
|
||||
?></span>
|
||||
</label>
|
||||
</li>
|
||||
<# elementId = _.uniqueId( 'customize-nav-menu-control-location-' ); #>
|
||||
<li class="customize-control customize-control-checkbox assigned-menu-location customize-inside-control-row">
|
||||
<input id="{{ elementId }}" type="checkbox" data-menu-id="{{ data.menu_id }}" data-location-id="<?php echo esc_attr( $location ); ?>" class="menu-location" />
|
||||
<label for="{{ elementId }}">
|
||||
<?php echo $description; ?>
|
||||
<span class="theme-location-set">
|
||||
<?php
|
||||
/* translators: %s: menu name */
|
||||
printf( _x( '(Current: %s)', 'menu location' ),
|
||||
'<span class="current-menu-location-name-' . esc_attr( $location ) . '"></span>'
|
||||
);
|
||||
?>
|
||||
</span>
|
||||
</label>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
|
||||
</ul>
|
||||
<?php endif;
|
||||
<?php endif; ?>
|
||||
<?php
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '4.9-alpha-41739';
|
||||
$wp_version = '4.9-alpha-41740';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
|
|||
Loading…
Reference in New Issue