[MM-61597]: Provide proper name, role, and state information in Chann…

…el menu's submenu (mattermost#29658) * [MA-25]: Provide proper name, role, and state information in move to option * [MA-25]: Concatenate Id --------- Co-authored-by: Mattermost Build <[email protected]>
code · Jan 15, 2025 · 326804b · 326804b
1 parent e923879
commit 326804b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/.../channels/src/components/widgets/menu/menu_items/__snapshots__/submenu_item.test.tsx.snap b/.../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
@@ -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}