Skip to content
This repository has been archived by the owner on Mar 9, 2024. It is now read-only.

Commit

Permalink
Deatils and summary tags added to class-wp-customize-nav-menus.php
Browse files Browse the repository at this point in the history 
This replicates the changes made to the regular `nav menus` screen in that it adds the `details` and `summary` tags to the Add Menus section in the Customizer.

This change both improves accessibility and enables the `accordion` script to be removed.
  • Loading branch information
@KTS915
KTS915 authored Sep 10, 2023
1 parent 2103176 commit f6e2257
Showing 1 changed file with 56 additions and 63 deletions.
119 changes: 56 additions & 63 deletions src/wp-includes/class-wp-customize-nav-menus.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1141,7 +1141,7 @@ public function print_templates() {
*/
public function available_items_template() {
?>
<div id="available-menu-items" class="accordion-container">
<ul id="available-menu-items" class="accordion-container">
<div class="customize-section-title">
<button type="button" class="customize-section-back" tabindex="-1">
<span class="screen-reader-text">
Expand All @@ -1161,7 +1161,7 @@ public function available_items_template() {
<?php _e( 'Add Menu Items' ); ?>
</h3>
</div>
<div id="available-menu-items-search" class="accordion-section cannot-expand">
<li id="available-menu-items-search" class="accordion-section cannot-expand">
<div class="accordion-section-title">
<label class="screen-reader-text" for="menu-items-search">
<?php
Expand All @@ -1186,7 +1186,7 @@ public function available_items_template() {
?>
</span></button>
<ul class="accordion-section-content available-menu-items-list" data-type="search"></ul>
</div>
</li>
<?php

// Ensure the page post type comes first in the list.
Expand All @@ -1208,7 +1208,7 @@ public function available_items_template() {
$this->print_post_type_container( $item_type );
}
?>
</div><!-- #available-menu-items -->
</ul><!-- #available-menu-items -->
<?php
}

Expand All @@ -1218,82 +1218,75 @@ public function available_items_template() {
* To be used in the template #available-menu-items.
*
* @since 4.7.0
*
* Details and summary tags added for accessibility
*
* @since CP 2.0.0
*
* @param array $available_item_type Menu item data to output, including title, type, and label.
*/
protected function print_post_type_container( $available_item_type ) {
$id = sprintf( 'available-menu-items-%s-%s', $available_item_type['type'], $available_item_type['object'] );
?>
<div id="<?php echo esc_attr( $id ); ?>" class="accordion-section">
<h4 class="accordion-section-title" role="presentation">
<?php echo esc_html( $available_item_type['title'] ); ?>
<span class="spinner"></span>
<span class="no-items"><?php _e( 'No items' ); ?></span>
<button type="button" class="button-link" aria-expanded="false">
<span class="screen-reader-text">
<?php
/* translators: %s: Title of a section with menu items. */
printf( __( 'Toggle section: %s' ), esc_html( $available_item_type['title'] ) );
?>
</span>
<span class="toggle-indicator" aria-hidden="true"></span>
</button>
</h4>
<div class="accordion-section-content">
<?php if ( 'post_type' === $available_item_type['type'] ) : ?>
<?php $post_type_obj = get_post_type_object( $available_item_type['object'] ); ?>
<?php if ( current_user_can( $post_type_obj->cap->create_posts ) && current_user_can( $post_type_obj->cap->publish_posts ) ) : ?>
<div class="new-content-item">
<label for="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>" class="screen-reader-text"><?php echo esc_html( $post_type_obj->labels->add_new_item ); ?></label>
<input type="text" id="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>" class="create-item-input" placeholder="<?php echo esc_attr( $post_type_obj->labels->add_new_item ); ?>">
<button type="button" class="button add-content"><?php _e( 'Add' ); ?></button>
</div>
<li id="<?php echo esc_attr( $id ); ?>" class="accordion-section">
<details>
<summary class="accordion-section-title">
<?php echo esc_html( $available_item_type['title'] ); ?>
<span class="no-items"><?php _e( 'No items' ); ?></span>
</summary>
<div class="accordion-section-content">
<?php if ( 'post_type' === $available_item_type['type'] ) : ?>
<?php $post_type_obj = get_post_type_object( $available_item_type['object'] ); ?>
<?php if ( current_user_can( $post_type_obj->cap->create_posts ) && current_user_can( $post_type_obj->cap->publish_posts ) ) : ?>
<div class="new-content-item">
<label for="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>" class="screen-reader-text"><?php echo esc_html( $post_type_obj->labels->add_new_item ); ?></label>
<input type="text" id="<?php echo esc_attr( 'create-item-input-' . $available_item_type['object'] ); ?>" class="create-item-input" placeholder="<?php echo esc_attr( $post_type_obj->labels->add_new_item ); ?>">
<button type="button" class="button add-content"><?php _e( 'Add' ); ?></button>
</div>
<?php endif; ?>
<?php endif; ?>
<?php endif; ?>
<ul class="available-menu-items-list" data-type="<?php echo esc_attr( $available_item_type['type'] ); ?>" data-object="<?php echo esc_attr( $available_item_type['object'] ); ?>" data-type_label="<?php echo esc_attr( isset( $available_item_type['type_label'] ) ? $available_item_type['type_label'] : $available_item_type['type'] ); ?>"></ul>
</div>
</div>
<ul class="available-menu-items-list" data-type="<?php echo esc_attr( $available_item_type['type'] ); ?>" data-object="<?php echo esc_attr( $available_item_type['object'] ); ?>" data-type_label="<?php echo esc_attr( isset( $available_item_type['type_label'] ) ? $available_item_type['type_label'] : $available_item_type['type'] ); ?>"></ul>
</div>
</details>
</li>
<?php
}

/**
* Prints the markup for available menu item custom links.
*
* @since 4.7.0
*
* Details and summary tags added for accessibility
*
* @since CP 2.0.0
*/
protected function print_custom_links_available_menu_item() {
?>
<div id="new-custom-menu-item" class="accordion-section">
<h4 class="accordion-section-title" role="presentation">
<?php _e( 'Custom Links' ); ?>
<button type="button" class="button-link" aria-expanded="false">
<span class="screen-reader-text">
<?php
/* translators: Hidden accessibility text. */
_e( 'Toggle section: Custom Links' );
?>
</span>
<span class="toggle-indicator" aria-hidden="true"></span>
</button>
</h4>
<div class="accordion-section-content customlinkdiv">
<input type="hidden" value="custom" id="custom-menu-item-type" name="menu-item[-1][menu-item-type]" />
<p id="menu-item-url-wrap" class="wp-clearfix">
<label class="howto" for="custom-menu-item-url"><?php _e( 'URL' ); ?></label>
<input id="custom-menu-item-url" name="menu-item[-1][menu-item-url]" type="text" class="code menu-item-textbox" placeholder="https://">
</p>
<p id="menu-item-name-wrap" class="wp-clearfix">
<label class="howto" for="custom-menu-item-name"><?php _e( 'Link Text' ); ?></label>
<input id="custom-menu-item-name" name="menu-item[-1][menu-item-title]" type="text" class="regular-text menu-item-textbox">
</p>
<p class="button-controls">
<span class="add-to-menu">
<input type="submit" class="button submit-add-to-menu right" value="<?php esc_attr_e( 'Add to Menu' ); ?>" name="add-custom-menu-item" id="custom-menu-item-submit">
<span class="spinner"></span>
</span>
</p>
</div>
</div>
<li id="new-custom-menu-item" class="accordion-section">
<details>
<summary class="accordion-section-title">
<?php _e( 'Custom Links' ); ?>
</summary>
<div class="accordion-section-content customlinkdiv">
<input type="hidden" value="custom" id="custom-menu-item-type" name="menu-item[-1][menu-item-type]" />
<p id="menu-item-url-wrap" class="wp-clearfix">
<label class="howto" for="custom-menu-item-url"><?php _e( 'URL' ); ?></label>
<input id="custom-menu-item-url" name="menu-item[-1][menu-item-url]" type="text" class="code menu-item-textbox" placeholder="https://">
</p>
<p id="menu-item-name-wrap" class="wp-clearfix">
<label class="howto" for="custom-menu-item-name"><?php _e( 'Link Text' ); ?></label>
<input id="custom-menu-item-name" name="menu-item[-1][menu-item-title]" type="text" class="regular-text menu-item-textbox">
</p>
<p class="button-controls">
<span class="add-to-menu">
<input type="submit" class="button submit-add-to-menu right" value="<?php esc_attr_e( 'Add to Menu' ); ?>" name="add-custom-menu-item" id="custom-menu-item-submit">
<span class="spinner"></span>
</span>
</p>
</div>
</details>
</li>
<?php
}

Expand Down

0 comments on commit f6e2257

Please sign in to comment.