[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>
This commit is contained in:
Saurabh Sharma 2025-01-15 10:12:29 +05:30 committed by GitHub
parent e923879c52
commit 326804ba44
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 14 additions and 0 deletions

View file

@ -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%",

View file

@ -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}