Changeset 52166

Timestamp:

11/15/2021 07:58:04 PM (5 years ago)

Author:

joedolson

Message:

Menus: Add audible notice on menu item add or remove.

Call wp.a11y.speak() to add audible notification when a menu item is added or removed from a menu.

Props joedolson, costdev, hellofromTonya.
Fixes #53840.

Location:

trunk

Files:

• src/js/_enqueues/lib/nav-menu.js (modified) (5 diffs)
• src/wp-admin/nav-menus.php (modified) (1 diff)
• tests/qunit/wp-admin/js/nav-menu.js (modified) (1 diff)

trunk/src/js/_enqueues/lib/nav-menu.js

@@ -312 +312 @@
                                 prevItem = thisItem.prev(),
                                 prevItemDepth = parseInt( prevItem.menuItemDepth(), 10 ),
-                                prevItemId = prevItem.getItemData()['menu-item-db-id'];
+                                prevItemId = prevItem.getItemData()['menu-item-db-id'],
+                                a11ySpeech = menus[ 'moved' + dir.charAt(0).toUpperCase() + dir.slice(1) ];
 
                         switch ( dir ) {
@@ -400 +401 @@
                         api.refreshKeyboardAccessibility();
                         api.refreshAdvancedAccessibility();
+
+                        if ( a11ySpeech ) {
+                                wp.a11y.speak( a11ySpeech );
+                        }
                 },
 
@@ -1225 +1230 @@
                         api.refreshKeyboardAccessibility();
                         api.refreshAdvancedAccessibility();
+                        wp.a11y.speak( menus.itemAdded );
                         $( document ).trigger( 'menu-item-added', [ $menuMarkup ] );
                 },
@@ -1240 +1246 @@
                         api.refreshKeyboardAccessibility();
                         api.refreshAdvancedAccessibility();
+                        wp.a11y.speak( menus.itemAdded );
                         $( document ).trigger( 'menu-item-added', [ $menuMarkup ] );
                 },
@@ -1514 +1521 @@
                                         }
                                         api.refreshAdvancedAccessibility();
+                                        wp.a11y.speak( menus.itemRemoved );
                                 });
                 },

trunk/src/wp-admin/nav-menus.php

@@ -500 +500 @@
         /* translators: %s: Item name. */
         'itemsDeleted'            => __( 'Deleted menu item: %s.' ),
+        'itemAdded'               => __( 'Menu item added' ),
+        'itemRemoved'             => __( 'Menu item removed' ),
+        'movedUp'                 => __( 'Menu item moved up' ),
+        'movedDown'               => __( 'Menu item moved down' ),
+        'movedTop'                => __( 'Menu item moved to the top' ),
+        'movedLeft'               => __( 'Menu item moved out of submenu' ),
+        'movedRight'              => __( 'Menu item is now a sub-item' ),
 );
 wp_localize_script( 'nav-menu', 'menus', $nav_menus_l10n );

trunk/tests/qunit/wp-admin/js/nav-menu.js

@@ -23 +23 @@
 
                 var testString = '<div>Hello World</div>';
+
+                // Mock global menus.
+                if ( ! window.hasOwnProperty( 'menus' ) ) {
+                        window.menus = {
+                                'itemAdded': false,
+                                'itemDeleted': false
+                        };
+                }
+
+                // Mock global wp.a11y.
+                window.wp = window.wp || {};
+                window.wp.a11y = {
+                        'speak': function() {}
+                };
 
                 // Mock the internal function calls so the don't fail.