From 615a6dd83191871f8684e3fd0db317fd316d97d9 Mon Sep 17 00:00:00 2001
From: im3dabasia <eshaan.dabasiya@rtcamp.com>
Date: Fri, 28 Feb 2025 22:26:18 +0530
Subject: [PATCH] fix: Added aria labellelby and describedby

---
 packages/components/src/menu-item/index.tsx | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/menu-item/index.tsx b/packages/components/src/menu-item/index.tsx
index cc57d23e585a10..2eb5c46fe6cc9b 100644
--- a/packages/components/src/menu-item/index.tsx
+++ b/packages/components/src/menu-item/index.tsx
@@ -3,6 +3,7 @@
  */
 import type { ForwardedRef } from 'react';
 import clsx from 'clsx';
+import { v4 as uuidv4 } from 'uuid';
 
 /**
  * WordPress dependencies
@@ -32,18 +33,32 @@ function UnforwardedMenuItem(
 		isSelected,
 		role = 'menuitem',
 		suffix,
-		...buttonProps
+		...restProps
 	} = props;
 
 	className = clsx( 'components-menu-item__button', className );
 
+	const buttonProps = { ...restProps };
 	if ( info ) {
+		const labelId = `menu-item-label-${ uuidv4() }`;
+		const descriptionId = `menu-item-description-${ uuidv4() }`;
+
 		children = (
 			<span className="components-menu-item__info-wrapper">
-				<span className="components-menu-item__item">{ children }</span>
-				<span className="components-menu-item__info">{ info }</span>
+				<span id={ labelId } className="components-menu-item__item">
+					{ children }
+				</span>
+				<span className="components-menu-item__info" aria-hidden="true">
+					{ info }
+				</span>
+				<span id={ descriptionId } className="screen-reader-text">
+					{ info }
+				</span>
 			</span>
 		);
+
+		buttonProps[ 'aria-labelledby' ] = labelId;
+		buttonProps[ 'aria-describedby' ] = descriptionId;
 	}
 
 	if ( icon && typeof icon !== 'string' ) {