Changeset 59265 for trunk/src/wp-admin/includes/class-walker-nav-menu-edit.php

Timestamp:

10/21/2024 07:53:10 PM (16 months ago)

Author:

joedolson

Message:

Menus: A11y: Set the parent and order using select fields.

Add select inputs to allow users to set the parent and position of items in the menu settings. Fixes a significant problem for screen reader users that makes updating menus extremely tedious, since the options for moving items do not explicitly set a position. This is also a significant improvement for all users manipulating large menus.

This could easily be considered an enhancement, but while it is a minor enhancement for most users, it is transformative for screen reader users in managing menus, moving that interface from nearly unusable to very manageable.

Props javad2000, audrasjb, juliemoynat, williamalexander, rcreators, milamj, joedolson.
Fixes #43305.

File:

• trunk/src/wp-admin/includes/class-walker-nav-menu-edit.php (modified) (2 diffs)

trunk/src/wp-admin/includes/class-walker-nav-menu-edit.php

@@ -219 +219 @@
                     </label>
                 </p>
-                <p class="field-css-classes description description-thin">
-                    <label for="edit-menu-item-classes-<?php echo $item_id; ?>">
-                        <?php _e( 'CSS Classes (optional)' ); ?><br />
-                        <input type="text" id="edit-menu-item-classes-<?php echo $item_id; ?>" class="widefat code edit-menu-item-classes" name="menu-item-classes[<?php echo $item_id; ?>]" value="<?php echo esc_attr( implode( ' ', $menu_item->classes ) ); ?>" />
-                    </label>
-                </p>
-                <p class="field-xfn description description-thin">
-                    <label for="edit-menu-item-xfn-<?php echo $item_id; ?>">
-                        <?php _e( 'Link Relationship (XFN)' ); ?><br />
-                        <input type="text" id="edit-menu-item-xfn-<?php echo $item_id; ?>" class="widefat code edit-menu-item-xfn" name="menu-item-xfn[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $menu_item->xfn ); ?>" />
-                    </label>
-                </p>
+                <div class="description-group">
+                    <p class="field-css-classes description description-thin">
+                        <label for="edit-menu-item-classes-<?php echo $item_id; ?>">
+                            <?php _e( 'CSS Classes (optional)' ); ?><br />
+                            <input type="text" id="edit-menu-item-classes-<?php echo $item_id; ?>" class="widefat code edit-menu-item-classes" name="menu-item-classes[<?php echo $item_id; ?>]" value="<?php echo esc_attr( implode( ' ', $menu_item->classes ) ); ?>" />
+                        </label>
+                    </p>
+                    <p class="field-xfn description description-thin">
+                        <label for="edit-menu-item-xfn-<?php echo $item_id; ?>">
+                            <?php _e( 'Link Relationship (XFN)' ); ?><br />
+                            <input type="text" id="edit-menu-item-xfn-<?php echo $item_id; ?>" class="widefat code edit-menu-item-xfn" name="menu-item-xfn[<?php echo $item_id; ?>]" value="<?php echo esc_attr( $menu_item->xfn ); ?>" />
+                        </label>
+                    </p>
+                </div>
                 <p class="field-description description description-wide">
                     <label for="edit-menu-item-description-<?php echo $item_id; ?>">
@@ -238 +240 @@
                     </label>
                 </p>
+
+                <?php
+                /**
+                 * Update parent and order of menu item using select inputs.
+                 *
+                 * @since 6.7.0
+                 */
+                ?>
+    
+                <div class="field-move-combo description-group">
+                    <p class="description description-wide">
+                        <label for="edit-menu-item-parent-<?php echo $item_id; ?>">
+                            <?php _e( 'Menu Parent' ); ?>
+                        </label>
+                        <select class="edit-menu-item-parent widefat" id="edit-menu-item-parent-<?php echo $item_id; ?>" name="menu-item-parent[<?php echo $item_id; ?>]">
+                        </select>
+                    </p>
+                    <p class="description description-wide">
+                        <label for="edit-menu-item-order-<?php echo $item_id; ?>">
+                            <?php _e( 'Menu Order' ); ?>
+                        </label>
+                        <select class="edit-menu-item-order widefat" id="edit-menu-item-order-<?php echo $item_id; ?>" name="menu-item-order[<?php echo $item_id; ?>]">
+                        </select>
+                    </p>
+                </div>
 
                 <?php