[MM-61674]: Added appropriate roles to the menu component of post priority (#29545)

2025-01-28 12:40:02 +05:30
--- a/e2e-tests/cypress/tests/integration/channels/system_console/site_configuration/link_customization_e20_1_spec.js
+++ b/e2e-tests/cypress/tests/integration/channels/system_console/site_configuration/link_customization_e20_1_spec.js
@@ -140,7 +140,7 @@ describe('SupportSettings', () => {
        cy.uiOpenProductMenu().within(() => {
            // * Verify that 'Download Apps' has expected link
            cy.findByText('Download Apps').
-                parent().
+                parents('a').
                should('have.attr', 'href', link);
        });
    });
--- a/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_item/product_menu_item.tsx
+++ b/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_item/product_menu_item.tsx
@@ -61,6 +61,7 @@ const ProductMenuItem = ({icon, destination, text, active, onClick, tourTip, id}
            to={destination}
            onClick={onClick}
            id={id}
+            role='menuitem'
        >
            <ProductIcon
                size={24}
--- a/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_list/snapshots/product_menu_list.test.tsx.snap
+++ b/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_list/snapshots/product_menu_list.test.tsx.snap
@@ -501,6 +501,7 @@ exports[`components/global/product_switcher_menu should show integrations should
  <li
    className="MenuGroup menu-divider"
    onClick={[Function]}
+    role="separator"
  />
  <div
    onClick={[Function]}
--- a/webapp/channels/src/components/post_priority/post_priority_picker.tsx
+++ b/webapp/channels/src/components/post_priority/post_priority_picker.tsx
@@ -141,8 +141,10 @@ function PostPriorityPicker({
                    defaultMessage: 'Message priority',
                })}
            </Header>
-            <div role='application'>
-                <Menu className='Menu'>
+            <Menu
+                className='Menu'
+                role='menu'
+            >
                <MenuGroup>
                    <MenuItem
                        id='menu-item-priority-standard'
@@ -177,6 +179,15 @@ function PostPriorityPicker({
                </MenuGroup>
                {(postAcknowledgementsEnabled || persistentNotificationsEnabled) && (
                    <MenuGroup>
+                        <li
+                            role='none'
+                            style={{all: 'unset'}}
+                        >
+                            <ul
+                                role='group'
+                                aria-label='Message and Notification Settings'
+                                style={{all: 'unset'}}
+                            >
                                {postAcknowledgementsEnabled && (
                                    <ToggleItem
                                        disabled={false}
@@ -213,10 +224,11 @@ function PostPriorityPicker({
                                        )}
                                    />
                                )}
+                            </ul>
+                        </li>
                    </MenuGroup>
                )}
            </Menu>
-            </div>
            {postAcknowledgementsEnabled && (
                <Footer>
                    <button
--- a/webapp/channels/src/components/post_priority/post_priority_picker_item.tsx
+++ b/webapp/channels/src/components/post_priority/post_priority_picker_item.tsx
@@ -32,7 +32,7 @@ const ItemButton = styled.button`
    align-items: center !important;
 `;

-const Wrapper = styled.div`
+const Wrapper = styled.li`
    cursor: ${(props) => (props.disabled ? 'default' : 'pointer')};

    &:hover {
@@ -117,7 +117,7 @@ function ToggleItem({
        <Wrapper
            onClick={disabled ? undefined : onClick}
            disabled={disabled}
-            role='button'
+            role='menuitemcheckbox'
            aria-pressed={toggled}
        >
            <ToggleMain>
--- a/webapp/channels/src/components/widgets/menu/menu.test.tsx
+++ b/webapp/channels/src/components/widgets/menu/menu.test.tsx
@@ -23,11 +23,11 @@ describe('components/Menu', () => {
      <div
        aria-label="test-label"
        className="a11y__popup Menu"
-        role="menu"
      >
        <ul
          className="Menu__content dropdown-menu"
          onClick={[Function]}
+          role="menu"
          style={Object {}}
        >
          text
@@ -51,11 +51,11 @@ describe('components/Menu', () => {
        aria-label="test-label"
        className="a11y__popup Menu"
        id="test-id"
-        role="menu"
      >
        <ul
          className="Menu__content dropdown-menu"
          onClick={[Function]}
+          role="menu"
          style={Object {}}
        >
          text
@@ -79,11 +79,11 @@ describe('components/Menu', () => {
      <div
        aria-label="test-label"
        className="a11y__popup Menu"
-        role="menu"
      >
        <ul
          className="Menu__content dropdown-menu openLeft openUp"
          onClick={[Function]}
+          role="menu"
          style={Object {}}
        >
          text
--- a/webapp/channels/src/components/widgets/menu/menu.tsx
+++ b/webapp/channels/src/components/widgets/menu/menu.tsx
@@ -128,9 +128,9 @@ export default class Menu extends React.PureComponent<Props> {
                aria-label={ariaLabel}
                className='a11y__popup Menu'
                id={id}
-                role='menu'
            >
                <ul
+                    role='menu'
                    id={listId}
                    ref={this.node}
                    style={styles}
--- a/webapp/channels/src/components/widgets/menu/menu_group.test.tsx
+++ b/webapp/channels/src/components/widgets/menu/menu_group.test.tsx
@@ -15,6 +15,7 @@ describe('components/MenuItem', () => {
  <li
    className="MenuGroup menu-divider"
    onClick={[Function]}
+    role="separator"
  />
  text
 </Fragment>
--- a/webapp/channels/src/components/widgets/menu/menu_group.tsx
+++ b/webapp/channels/src/components/widgets/menu/menu_group.tsx
@@ -23,6 +23,7 @@ const MenuGroup = (props: Props) => {
        <li
            className='MenuGroup menu-divider'
            onClick={handleDividerClick}
+            role='separator'
        />
    );

--- a/webapp/channels/src/plugins/test/snapshots/main_menu_action.test.tsx.snap
+++ b/webapp/channels/src/plugins/test/snapshots/main_menu_action.test.tsx.snap
@@ -4,11 +4,11 @@ exports[`plugins/MainMenuActions should match snapshot in mobile view with some
 <div
  aria-label="main menu"
  className="a11y__popup Menu"
-  role="menu"
 >
  <ul
    className="Menu__content dropdown-menu"
    onClick={[Function]}
+    role="menu"
    style={Object {}}
  >
    <Memo(MenuGroup)>
@@ -438,11 +438,11 @@ exports[`plugins/MainMenuActions should match snapshot in web view 1`] = `
 <div
  aria-label="team menu"
  className="a11y__popup Menu"
-  role="menu"
 >
  <ul
    className="Menu__content dropdown-menu"
    onClick={[Function]}
+    role="menu"
    style={Object {}}
  >
    <Memo(MenuGroup)>