From 008d95208fe01be80671fa365d095826cb0d6bf8 Mon Sep 17 00:00:00 2001
From: ayush-chauhan233 <ayush.chauhan@brightscout.com>
Date: Fri, 6 Dec 2024 14:09:35 +0530
Subject: [PATCH] [BST-186]: Review Fixes: Updated the message menu structure

---
 .../product_menu_list.test.tsx.snap           |   2 +-
 .../post_priority/post_priority_picker.tsx    | 163 +++++++++---------
 .../post_priority_picker_item.tsx             |   4 +-
 .../widgets/menu/menu_group.test.tsx          |   2 +-
 .../components/widgets/menu/menu_group.tsx    |   2 +-
 5 files changed, 91 insertions(+), 82 deletions(-)

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 5255a46494c..2f0c45285f2 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,7 +501,7 @@ exports[`components/global/product_switcher_menu should show integrations should
   <li
     className="MenuGroup menu-divider"
     onClick={[Function]}
-    role="presentation"
+    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 eccd7c4ef48..d9146ef21a5 100644
--- a/webapp/channels/src/components/post_priority/post_priority_picker.tsx
+++ b/webapp/channels/src/components/post_priority/post_priority_picker.tsx
@@ -138,85 +138,94 @@ function PostPriorityPicker({
                     defaultMessage: 'Message priority',
                 })}
             </Header>
-            <div>
-                <Menu
-                    className='Menu'
-                    role='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 f1de5b5085d..40601bdf4a3 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 {
@@ -116,7 +116,7 @@ function ToggleItem({
         <Wrapper
             onClick={disabled ? undefined : onClick}
             disabled={disabled}
-            role='button'
+            role='menuitemcheckbox'
         >
             <ToggleMain>
                 {icon}
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 55393b830a1..e4a4cdfa61f 100644
--- a/webapp/channels/src/components/widgets/menu/menu_group.test.tsx
+++ b/webapp/channels/src/components/widgets/menu/menu_group.test.tsx
@@ -15,7 +15,7 @@ describe('components/MenuItem', () => {
   <li
     className="MenuGroup menu-divider"
     onClick={[Function]}
-    role="presentation"
+    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 213ffddc72d..228a13074ef 100644
--- a/webapp/channels/src/components/widgets/menu/menu_group.tsx
+++ b/webapp/channels/src/components/widgets/menu/menu_group.tsx
@@ -23,7 +23,7 @@ const MenuGroup = (props: Props) => {
         <li
             className='MenuGroup menu-divider'
             onClick={handleDividerClick}
-            role='presentation'
+            role='separator'
         />
     );