Nav block menu switcher - decode HTML entities and utilise accessible markup pattern (#36397)

* Decode HTML entities and utilise accessible markup pattern

* Fix placeholder instance

Author: getdave

packages/block-library/src/navigation/edit/navigation-menu-selector.js

@@ -3,7 +3,8 @@
  */
 import { MenuGroup, MenuItem, MenuItemsChoice } from '@wordpress/components';
 import { useEntityId } from '@wordpress/core-data';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -26,10 +27,18 @@ export default function NavigationMenuSelector( { onSelect, onCreateNew } ) {
 							)
 						)
 					}
-					choices={ navigationMenus.map( ( { id, title } ) => ( {
-						value: id,
-						label: title.rendered,
-					} ) ) }
+					choices={ navigationMenus.map( ( { id, title } ) => {
+						const label = decodeEntities( title.rendered );
+						return {
+							value: id,
+							label,
+							'aria-label': sprintf(
+								/* translators: %s: The name of a menu. */
+								__( "Switch to '%s'" ),
+								label
+							),
+						};
+					} ) }
 				/>
 			</MenuGroup>
 			<MenuGroup>

packages/block-library/src/navigation/edit/placeholder/index.js

@@ -14,6 +14,7 @@ import { useDispatch } from '@wordpress/data';
 import { useCallback, useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { navigation, Icon } from '@wordpress/icons';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -59,7 +60,9 @@ const ExistingMenusDropdown = ( {
 										onClose={ onClose }
 										key={ menu.id }
 									>
-										{ menu.title.rendered }
+										{ decodeEntities(
+											menu.title.rendered
+										) }
 									</MenuItem>
 								);
 							} ) }
@@ -75,7 +78,7 @@ const ExistingMenusDropdown = ( {
 									onClose={ onClose }
 									key={ menu.id }
 								>
-									{ menu.name }
+									{ decodeEntities( menu.name ) }
 								</MenuItem>
 							);
 						} ) }