Changeset 33151

Timestamp:

07/09/2015 09:59:47 PM (10 years ago)

Author:

ocean90

Message:

Customizer: Improve markup for available menu items.

• Use lists for available menu items.
• Remove unused template for available item types.
• Hide the type label and title from screen readers and instead include them in the add button.

props celloexpressions, afercia.
fixes #32724.

Location:

trunk/src

Files:

• wp-admin/css/customize-nav-menus.css (modified) (1 diff)
• wp-includes/class-wp-customize-nav-menus.php (modified) (4 diffs)

trunk/src/wp-admin/css/customize-nav-menus.css

@@ -656 +656 @@
 #available-menu-items .accordion-section-content {
     padding: 1px 15px 15px 15px;
+    margin: 0;
     min-height: 120px;
     max-height: 290px;
+}
+
+#available-menu-items .menu-item-tpl {
+    margin: 0;
 }
 

trunk/src/wp-includes/class-wp-customize-nav-menus.php

@@ -587 +587 @@
         ?>
         <script type="text/html" id="tmpl-available-menu-item">
-            <div id="menu-item-tpl-{{ data.id }}" class="menu-item-tpl" data-menu-item-id="{{ data.id }}">
+            <li id="menu-item-tpl-{{ data.id }}" class="menu-item-tpl" data-menu-item-id="{{ data.id }}">
                 <div class="menu-item-bar">
                     <div class="menu-item-handle">
-                        <span class="item-type">{{ data.type_label }}</span>
-                        <span class="item-title">
+                        <span class="item-type" aria-hidden="true">{{ data.type_label }}</span>
+                        <span class="item-title" aria-hidden="true">
                             <span class="menu-item-title<# if ( ! data.title ) { #> no-title<# } #>">{{ data.title || wp.customize.Menus.data.l10n.untitled }}</span>
                         </span>
-                        <button type="button" class="not-a-button item-add"><span class="screen-reader-text"><?php _e( 'Add Menu Item' ) ?></span></button>
+                        <button type="button" class="not-a-button item-add">
+                            <span class="screen-reader-text"><?php
+                                /* translators: 1: Title of a menu item, 2: Type of a menu item */
+                                printf( __( 'Add to menu: %1$s (%2$s)' ), '{{ data.title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.type_label }}' );
+                            ?></span>
+                        </button>
                     </div>
                 </div>
-            </div>
-        </script>
-
-        <script type="text/html" id="tmpl-available-menu-item-type">
-            <div id="available-menu-items-{{ data.type }}" class="accordion-section">
-                <h4 class="accordion-section-title">{{ data.type_label }}</h4>
-                <div class="accordion-section-content">
-                </div>
-            </div>
+            </li>
         </script>
 
@@ -653 +650 @@
                     <span class="spinner"></span>
                 </div>
-                <div class="accordion-section-content" data-type="search"></div>
+                <ul class="accordion-section-content" data-type="search"></ul>
             </div>
             <div id="new-custom-menu-item" class="accordion-section">
@@ -689 +686 @@
                     <div id="available-menu-items-<?php echo esc_attr( $type->name ); ?>" class="accordion-section">
                         <h4 class="accordion-section-title"><?php echo esc_html( $type->label ); ?> <span class="spinner"></span> <button type="button" class="not-a-button"><span class="screen-reader-text"><?php _e( 'Toggle' ); ?></span></button></h4>
-                        <div class="accordion-section-content" data-type="<?php echo esc_attr( $type->name ); ?>" data-obj_type="post_type"></div>
+                        <ul class="accordion-section-content" data-type="<?php echo esc_attr( $type->name ); ?>" data-obj_type="post_type"></ul>
                     </div>
                 <?php
@@ -701 +698 @@
                     <div id="available-menu-items-<?php echo esc_attr( $tax->name ); ?>" class="accordion-section">
                         <h4 class="accordion-section-title"><?php echo esc_html( $tax->label ); ?> <span class="spinner"></span> <button type="button" class="not-a-button"><span class="screen-reader-text"><?php _e( 'Toggle' ); ?></span></button></h4>
-                        <div class="accordion-section-content" data-type="<?php echo esc_attr( $tax->name ); ?>" data-obj_type="taxonomy"></div>
+                        <ul class="accordion-section-content" data-type="<?php echo esc_attr( $tax->name ); ?>" data-obj_type="taxonomy"></ul>
                     </div>
                 <?php