From f6e22576ad92642dd6a90cb5454fbfc61cf6c525 Mon Sep 17 00:00:00 2001
From: Tim Kaye <KTS915@users.noreply.github.com>
Date: Sun, 10 Sep 2023 14:43:50 -0400
Subject: [PATCH] Deatils and summary tags added to
 class-wp-customize-nav-menus.php

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.
---
 .../class-wp-customize-nav-menus.php          | 119 +++++++++---------
 1 file changed, 56 insertions(+), 63 deletions(-)

diff --git a/src/wp-includes/class-wp-customize-nav-menus.php b/src/wp-includes/class-wp-customize-nav-menus.php
index 92a3b594ff..75eebd6b71 100644
--- a/src/wp-includes/class-wp-customize-nav-menus.php
+++ b/src/wp-includes/class-wp-customize-nav-menus.php
@@ -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">
@@ -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
@@ -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.
@@ -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
 	}
 
@@ -1218,41 +1218,37 @@ 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
 	}
 
@@ -1260,40 +1256,37 @@ protected function print_post_type_container( $available_item_type ) {
 	 * 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
 	}