From 326804ba440116fcfa97dadbdd51f91e2e4d160d Mon Sep 17 00:00:00 2001
From: Saurabh Sharma <saurabh.sharma@brightscout.com>
Date: Wed, 15 Jan 2025 10:12:29 +0530
Subject: [PATCH] [MM-61597]: Provide proper name, role, and state information
 in Channel menu's submenu (#29658)

* [MA-25]: Provide proper name, role, and state information in move to option

* [MA-25]: Concatenate Id

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../__snapshots__/submenu_item.test.tsx.snap          | 11 +++++++++++
 .../widgets/menu/menu_items/submenu_item.tsx          |  3 +++
 2 files changed, 14 insertions(+)

diff --git a/webapp/channels/src/components/widgets/menu/menu_items/__snapshots__/submenu_item.test.tsx.snap b/webapp/channels/src/components/widgets/menu/menu_items/__snapshots__/submenu_item.test.tsx.snap
index b74506020f9..d54ef0780f4 100644
--- a/webapp/channels/src/components/widgets/menu/menu_items/__snapshots__/submenu_item.test.tsx.snap
+++ b/webapp/channels/src/components/widgets/menu/menu_items/__snapshots__/submenu_item.test.tsx.snap
@@ -62,6 +62,7 @@ exports[`components/widgets/menu/menu_items/submenu_item empty subMenu should ma
       onKeyDown={[Function]}
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
+      role="button"
       tabIndex={0}
     >
       <div
@@ -79,6 +80,7 @@ exports[`components/widgets/menu/menu_items/submenu_item empty subMenu should ma
       </div>
       <ul
         className="a11y__popup Menu dropdown-menu SubMenu"
+        id="1_submenu"
         style={
           Object {
             "right": "100%",
@@ -156,6 +158,9 @@ exports[`components/widgets/menu/menu_items/submenu_item present subMenu should
   text="test"
 >
   <li
+    aria-controls="1_submenu"
+    aria-expanded={false}
+    aria-haspopup="menu"
     className="SubMenuItem MenuItem"
     id="1_menuitem"
     onClick={[Function]}
@@ -167,6 +172,7 @@ exports[`components/widgets/menu/menu_items/submenu_item present subMenu should
       onKeyDown={[Function]}
       onMouseEnter={[Function]}
       onMouseLeave={[Function]}
+      role="button"
       tabIndex={0}
     >
       <div
@@ -184,6 +190,7 @@ exports[`components/widgets/menu/menu_items/submenu_item present subMenu should
       </div>
       <ul
         className="a11y__popup Menu dropdown-menu SubMenu"
+        id="1_submenu"
         style={
           Object {
             "right": "100%",
@@ -257,6 +264,7 @@ exports[`components/widgets/menu/menu_items/submenu_item present subMenu should
                 onKeyDown={[Function]}
                 onMouseEnter={[Function]}
                 onMouseLeave={[Function]}
+                role="button"
                 tabIndex={1}
               >
                 <div
@@ -274,6 +282,7 @@ exports[`components/widgets/menu/menu_items/submenu_item present subMenu should
                 </div>
                 <ul
                   className="a11y__popup Menu dropdown-menu SubMenu"
+                  id="A_submenu"
                   style={
                     Object {
                       "right": "100%",
@@ -351,6 +360,7 @@ exports[`components/widgets/menu/menu_items/submenu_item present subMenu should
                 onKeyDown={[Function]}
                 onMouseEnter={[Function]}
                 onMouseLeave={[Function]}
+                role="button"
                 tabIndex={1}
               >
                 <div
@@ -368,6 +378,7 @@ exports[`components/widgets/menu/menu_items/submenu_item present subMenu should
                 </div>
                 <ul
                   className="a11y__popup Menu dropdown-menu SubMenu"
+                  id="B_submenu"
                   style={
                     Object {
                       "right": "100%",
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 c07584c54e5..ae619cc7a00 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,7 @@ 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 +234,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}