Changeset 63336

Timestamp:

08/21/2026 08:33:05 PM (17 hours ago)

Author:

afercia

Message:

Customize: Fix visual and DOM order mismatch of the Menus panel buttons.

In the Customizer > Menus panel, the visual order of the 'Reorder' and 'Add Items' buttons didn't match the DOM order.
For accessibility, the visual order and DOM order must match when they impact tab sequence, interaction, and meaning.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/13228

Props afercia.
Fixes #65935.

Location:

trunk

Files:

• src/wp-admin/css/customize-controls.css (modified) (1 diff)
• src/wp-admin/css/customize-nav-menus.css (modified) (1 diff)
• src/wp-includes/customize/class-wp-customize-nav-menu-control.php (modified) (1 diff)
• tests/qunit/index.html (modified) (1 diff)

trunk/src/wp-admin/css/customize-controls.css

@@ -2494 +2494 @@
  */
 
+ .customize-control-nav_menu-buttons,
 .customize-control-widgets-buttons {
         display: flex;

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

@@ -861 +861 @@
 
 .customize-control-nav_menu .customize-control-nav_menu-buttons {
-        display: flex;
-        flex-direction: row-reverse;
-        align-items: center;
-        gap: 8px;
         margin-top: 12px;
 }

trunk/src/wp-includes/customize/class-wp-customize-nav-menu-control.php

@@ -50 +50 @@
                 </p>
                 <div class="customize-control-nav_menu-buttons">
-                        <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 echo $add_items; ?>
-                        </button>
                         <button type="button" class="button-link reorder-toggle" aria-label="<?php esc_attr_e( 'Reorder menu items' ); ?>" aria-describedby="reorder-items-desc-{{ data.menu_id }}">
                                 <span class="reorder"><?php _e( 'Reorder' ); ?></span>
                                 <span class="reorder-done"><?php _e( 'Done' ); ?></span>
+                        </button>
+                        <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 echo $add_items; ?>
                         </button>
                 </div>

trunk/tests/qunit/index.html

@@ -255 +255 @@
                 <!-- Templates for Customizer Menus -->
                 <script type="text/html" id="tmpl-customize-control-nav_menu-content">
-                                        <button type="button" class="button add-new-menu-item" aria-label="Add or remove menu items" aria-expanded="false" aria-controls="available-menu-items">
-                        Add Items               </button>
-                <button type="button" class="not-a-button reorder-toggle" aria-label="Reorder menu items" aria-describedby="reorder-items-desc-{{ data.menu_id }}">
-                        <span class="reorder">Reorder</span>
-                        <span class="reorder-done">Done</span>
-                </button>
+                <div class="customize-control-nav_menu-buttons">
+                        <button type="button" class="button-link reorder-toggle" aria-label="Reorder menu items" aria-describedby="reorder-items-desc-242">
+                                <span class="reorder">Reorder</span>
+                                <span class="reorder-done">Done</span>
+                        </button>
+                        <button type="button" class="button add-new-menu-item" aria-label="Add or remove menu items" aria-expanded="false" aria-controls="available-menu-items">
+                                Add Items                       </button>
+                </div>
                 <p class="screen-reader-text" id="reorder-items-desc-{{ data.menu_id }}">When in reorder mode, additional controls to reorder menu items will be available in the items list above.</p>
                 <span class="add-menu-item-loading spinner"></span>