Changeset 58306 for trunk/src/wp-includes/customize/class-wp-customize-nav-menu-item-control.php

Timestamp:

06/03/2024 08:33:03 PM (4 months ago)

Author:

joedolson

Message:

Menus: Accessibility: Improve screen reader text for edit button.

Change the edit menu item toggle to communicate more context about the item to be edited. Make edit text consistent between Customizer menu editor and admin menu editor.

The menu position is conveyed only visually, using indentation, because there are no organizational semantics in either editor. This change helps provide screen reader users with consistent contextual information about the order, position, and parent of the current item.

Props joedolson, rcreators, afercia, mohonchandra.
Fixes #60673, See #60672.

File:

• trunk/src/wp-includes/customize/class-wp-customize-nav-menu-item-control.php (modified) (1 diff)

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

@@ -78 +78 @@
                 <span class="item-controls">
                     <button type="button" class="button-link item-edit" aria-expanded="false"><span class="screen-reader-text">
-                    <?php
-                        /* translators: 1: Title of a menu item, 2: Type of a menu item. */
-                        printf( __( 'Edit menu item: %1$s (%2$s)' ), '{{ data.title || data.original_title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}' );
-                    ?>
+                    <# if ( 0 === data.depth ) { #>
+                        <?php
+                        /* translators: 1: Title of a menu item, 2: Type of a menu item. 3: Item index, 4: Total items. */
+                        printf( __( 'Edit %1$s (%2$s, %3$d of %4$d)' ), '{{ data.title || data.original_title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}', '', '' );
+                        ?>
+                    <# } else if ( 1 === data.depth ) { #>
+                        <?php
+                            /* translators: 1: Title of a menu item, 2: Type of a menu item, 3, Item index, 4, Total items, 5: Item parent. */
+                            printf( __( 'Edit %1$s (%2$s, sub-item %3$d of %4$d under %5$s)' ), '{{ data.title || data.original_title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}', '', '', '' );
+                        ?>
+                    <# } else { #>
+                        <?php
+                            /* translators: 1: Title of a menu item, 2: Type of a menu item, 3, Item index, 4, Total items, 5: Item parent, 6: Item depth. */
+                            printf( __( 'Edit %1$s (%2$s, sub-item %3$d of %4$d under %5$s, level %6$s)' ), '{{ data.title || data.original_title || wp.customize.Menus.data.l10n.untitled }}', '{{ data.item_type_label }}', '', '', '', '{{data.depth}}' );
+                        ?>
+                    <# } #>
                     </span><span class="toggle-indicator" aria-hidden="true"></span></button>
                     <button type="button" class="button-link item-delete submitdelete deletion"><span class="screen-reader-text">