From 35e22bba3d5120ed83ebc88c7fdfcdfc0f088f03 Mon Sep 17 00:00:00 2001
From: SaurabhSharma-884 <saurabh.sharma@brightscout.com>
Date: Mon, 16 Dec 2024 12:19:30 +0530
Subject: [PATCH] [MA-25]: Provide proper name, role, and state information in
 move to option

---
 .../src/components/widgets/menu/menu_items/submenu_item.tsx   | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/webapp/channels/src/components/widgets/menu/menu_items/submenu_item.tsx b/webapp/channels/src/components/widgets/menu/menu_items/submenu_item.tsx
index c07584c54e50..14e4d2ec0232 100644
--- a/webapp/channels/src/components/widgets/menu/menu_items/submenu_item.tsx
+++ b/webapp/channels/src/components/widgets/menu/menu_items/submenu_item.tsx
@@ -187,6 +187,8 @@ export class SubMenuItem extends React.PureComponent<Props, State> {
                 <ul
                     className={classNames(['a11y__popup Menu dropdown-menu SubMenu', {styleSelectableItem}])}
                     style={subMenuStyle}
+                    id={id + '_submenu'}
+
                 >
                     {hasSubmenu ? subMenu!.map((s) => {
                         const hasDivider = s.id === 'ChannelMenu-moveToDivider';
@@ -233,12 +235,14 @@ export class SubMenuItem extends React.PureComponent<Props, State> {
                 id={id + '_menuitem'}
                 ref={this.node}
                 onClick={this.onClick}
+                {...(Boolean(hasSubmenu) && {'aria-haspopup': 'menu', 'aria-controls': id + '_submenu', 'aria-expanded': this.state.show})}
             >
                 <div
                     className={classNames([{styleSelectableItemDiv: styleSelectableItem}])}
                     id={id}
                     aria-label={ariaLabel}
                     onMouseEnter={this.show}
+                    role='button'
                     onMouseLeave={this.hide}
                     tabIndex={tabIndex ?? 0}
                     onKeyDown={this.handleKeyDown}