From ed161f31be97b1c2aac17835eb83d12deb33f841 Mon Sep 17 00:00:00 2001
From: ayush-chauhan233 <ayush.chauhan@brightscout.com>
Date: Tue, 28 Jan 2025 12:40:02 +0530
Subject: [PATCH] [MM-61674]: Added appropriate roles to the menu component of
 post priority (#29545)

---
 .../link_customization_e20_1_spec.js          |   2 +-
 .../product_menu_item/product_menu_item.tsx   |   1 +
 .../product_menu_list.test.tsx.snap           |   1 +
 .../post_priority/post_priority_picker.tsx    | 160 ++++++++++--------
 .../post_priority_picker_item.tsx             |   4 +-
 .../src/components/widgets/menu/menu.test.tsx |   6 +-
 .../src/components/widgets/menu/menu.tsx      |   2 +-
 .../widgets/menu/menu_group.test.tsx          |   1 +
 .../components/widgets/menu/menu_group.tsx    |   1 +
 .../main_menu_action.test.tsx.snap            |   4 +-
 10 files changed, 99 insertions(+), 83 deletions(-)

diff --git 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
index 991893f298..8e542c5a9e 100644
--- 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);
         });
     });
diff --git 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
index ade857940f..d0699d9ce1 100644
--- 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}
diff --git 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
index 85cea752fe..2f0c45285f 100644
--- 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]}
diff --git a/webapp/channels/src/components/post_priority/post_priority_picker.tsx b/webapp/channels/src/components/post_priority/post_priority_picker.tsx
index 844032a58c..eb92af6f6e 100644
--- a/webapp/channels/src/components/post_priority/post_priority_picker.tsx
+++ b/webapp/channels/src/components/post_priority/post_priority_picker.tsx
@@ -141,82 +141,94 @@ function PostPriorityPicker({
                     defaultMessage: 'Message priority',
                 })}
             </Header>
-            <div role='application'>
-                <Menu className='Menu'>
+            <Menu
+                className='Menu'
+                role='menu'
+            >
+                <MenuGroup>
+                    <MenuItem
+                        id='menu-item-priority-standard'
+                        onClick={makeOnSelectPriority()}
+                        isSelected={!priority}
+                        icon={<StandardIcon size={18}/>}
+                        text={formatMessage({
+                            id: 'post_priority.priority.standard',
+                            defaultMessage: 'Standard',
+                        })}
+                    />
+                    <MenuItem
+                        id='menu-item-priority-important'
+                        onClick={makeOnSelectPriority(PostPriority.IMPORTANT)}
+                        isSelected={priority === PostPriority.IMPORTANT}
+                        icon={<ImportantIcon size={18}/>}
+                        text={formatMessage({
+                            id: 'post_priority.priority.important',
+                            defaultMessage: 'Important',
+                        })}
+                    />
+                    <MenuItem
+                        id='menu-item-priority-urgent'
+                        onClick={makeOnSelectPriority(PostPriority.URGENT)}
+                        isSelected={priority === PostPriority.URGENT}
+                        icon={<UrgentIcon size={18}/>}
+                        text={formatMessage({
+                            id: 'post_priority.priority.urgent',
+                            defaultMessage: 'Urgent',
+                        })}
+                    />
+                </MenuGroup>
+                {(postAcknowledgementsEnabled || persistentNotificationsEnabled) && (
                     <MenuGroup>
-                        <MenuItem
-                            id='menu-item-priority-standard'
-                            onClick={makeOnSelectPriority()}
-                            isSelected={!priority}
-                            icon={<StandardIcon size={18}/>}
-                            text={formatMessage({
-                                id: 'post_priority.priority.standard',
-                                defaultMessage: 'Standard',
-                            })}
-                        />
-                        <MenuItem
-                            id='menu-item-priority-important'
-                            onClick={makeOnSelectPriority(PostPriority.IMPORTANT)}
-                            isSelected={priority === PostPriority.IMPORTANT}
-                            icon={<ImportantIcon size={18}/>}
-                            text={formatMessage({
-                                id: 'post_priority.priority.important',
-                                defaultMessage: 'Important',
-                            })}
-                        />
-                        <MenuItem
-                            id='menu-item-priority-urgent'
-                            onClick={makeOnSelectPriority(PostPriority.URGENT)}
-                            isSelected={priority === PostPriority.URGENT}
-                            icon={<UrgentIcon size={18}/>}
-                            text={formatMessage({
-                                id: 'post_priority.priority.urgent',
-                                defaultMessage: 'Urgent',
-                            })}
-                        />
+                        <li
+                            role='none'
+                            style={{all: 'unset'}}
+                        >
+                            <ul
+                                role='group'
+                                aria-label='Message and Notification Settings'
+                                style={{all: 'unset'}}
+                            >
+                                {postAcknowledgementsEnabled && (
+                                    <ToggleItem
+                                        disabled={false}
+                                        onClick={handleAck}
+                                        toggled={requestedAck}
+                                        icon={<AcknowledgementIcon size={18}/>}
+                                        text={formatMessage({
+                                            id: 'post_priority.requested_ack.text',
+                                            defaultMessage: 'Request acknowledgement',
+                                        })}
+                                        description={formatMessage({
+                                            id: 'post_priority.requested_ack.description',
+                                            defaultMessage: 'An acknowledgement button will appear with your message',
+                                        })}
+                                    />
+                                )}
+                                {priority === PostPriority.URGENT && persistentNotificationsEnabled && (
+                                    <ToggleItem
+                                        disabled={priority !== PostPriority.URGENT}
+                                        onClick={handlePersistentNotifications}
+                                        toggled={persistentNotifications}
+                                        icon={<PersistentNotificationsIcon size={18}/>}
+                                        text={formatMessage({
+                                            id: 'post_priority.persistent_notifications.text',
+                                            defaultMessage: 'Send persistent notifications',
+                                        })}
+                                        description={formatMessage(
+                                            {
+                                                id: 'post_priority.persistent_notifications.description',
+                                                defaultMessage: 'Recipients will be notified every {interval, plural, one {1 minute} other {{interval} minutes}} until they acknowledge or reply',
+                                            }, {
+                                                interval,
+                                            },
+                                        )}
+                                    />
+                                )}
+                            </ul>
+                        </li>
                     </MenuGroup>
-                    {(postAcknowledgementsEnabled || persistentNotificationsEnabled) && (
-                        <MenuGroup>
-                            {postAcknowledgementsEnabled && (
-                                <ToggleItem
-                                    disabled={false}
-                                    onClick={handleAck}
-                                    toggled={requestedAck}
-                                    icon={<AcknowledgementIcon size={18}/>}
-                                    text={formatMessage({
-                                        id: 'post_priority.requested_ack.text',
-                                        defaultMessage: 'Request acknowledgement',
-                                    })}
-                                    description={formatMessage({
-                                        id: 'post_priority.requested_ack.description',
-                                        defaultMessage: 'An acknowledgement button will appear with your message',
-                                    })}
-                                />
-                            )}
-                            {priority === PostPriority.URGENT && persistentNotificationsEnabled && (
-                                <ToggleItem
-                                    disabled={priority !== PostPriority.URGENT}
-                                    onClick={handlePersistentNotifications}
-                                    toggled={persistentNotifications}
-                                    icon={<PersistentNotificationsIcon size={18}/>}
-                                    text={formatMessage({
-                                        id: 'post_priority.persistent_notifications.text',
-                                        defaultMessage: 'Send persistent notifications',
-                                    })}
-                                    description={formatMessage(
-                                        {
-                                            id: 'post_priority.persistent_notifications.description',
-                                            defaultMessage: 'Recipients will be notified every {interval, plural, one {1 minute} other {{interval} minutes}} until they acknowledge or reply',
-                                        }, {
-                                            interval,
-                                        },
-                                    )}
-                                />
-                            )}
-                        </MenuGroup>
-                    )}
-                </Menu>
-            </div>
+                )}
+            </Menu>
             {postAcknowledgementsEnabled && (
                 <Footer>
                     <button
diff --git a/webapp/channels/src/components/post_priority/post_priority_picker_item.tsx b/webapp/channels/src/components/post_priority/post_priority_picker_item.tsx
index 3b7cb7bb63..b73cc53581 100644
--- 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>
diff --git a/webapp/channels/src/components/widgets/menu/menu.test.tsx b/webapp/channels/src/components/widgets/menu/menu.test.tsx
index 59eecf5059..de0cf3ea94 100644
--- 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
diff --git a/webapp/channels/src/components/widgets/menu/menu.tsx b/webapp/channels/src/components/widgets/menu/menu.tsx
index d3677d2b10..91f54d6375 100644
--- 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}
diff --git a/webapp/channels/src/components/widgets/menu/menu_group.test.tsx b/webapp/channels/src/components/widgets/menu/menu_group.test.tsx
index 0cff806c6e..e4a4cdfa61 100644
--- 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>
diff --git a/webapp/channels/src/components/widgets/menu/menu_group.tsx b/webapp/channels/src/components/widgets/menu/menu_group.tsx
index 38149bee49..228a13074e 100644
--- 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'
         />
     );
 
diff --git 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
index b6ce288859..38129186fb 100644
--- 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)>