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

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);
         });
     });

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}

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

webapp/channels/src/components/post_priority/post_priority_picker.tsx

@@ -141,82 +141,94 @@ function PostPriorityPicker({
                     defaultMessage: 'Message priority',
                 })}
             </Header>
-            <div role='application'>
+            <Menu
-                <Menu className='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
+                        <li
-                            id='menu-item-priority-standard'
+                            role='none'
-                            onClick={makeOnSelectPriority()}
+                            style={{all: 'unset'}}
-                            isSelected={!priority}
+                        >
-                            icon={<StandardIcon size={18}/>}
+                            <ul
-                            text={formatMessage({
+                                role='group'
-                                id: 'post_priority.priority.standard',
+                                aria-label='Message and Notification Settings'
-                                defaultMessage: 'Standard',
+                                style={{all: 'unset'}}
-                            })}
+                            >
-                        />
+                                {postAcknowledgementsEnabled && (
-                        <MenuItem
+                                    <ToggleItem
-                            id='menu-item-priority-important'
+                                        disabled={false}
-                            onClick={makeOnSelectPriority(PostPriority.IMPORTANT)}
+                                        onClick={handleAck}
-                            isSelected={priority === PostPriority.IMPORTANT}
+                                        toggled={requestedAck}
-                            icon={<ImportantIcon size={18}/>}
+                                        icon={<AcknowledgementIcon size={18}/>}
-                            text={formatMessage({
+                                        text={formatMessage({
-                                id: 'post_priority.priority.important',
+                                            id: 'post_priority.requested_ack.text',
-                                defaultMessage: 'Important',
+                                            defaultMessage: 'Request acknowledgement',
-                            })}
+                                        })}
-                        />
+                                        description={formatMessage({
-                        <MenuItem
+                                            id: 'post_priority.requested_ack.description',
-                            id='menu-item-priority-urgent'
+                                            defaultMessage: 'An acknowledgement button will appear with your message',
-                            onClick={makeOnSelectPriority(PostPriority.URGENT)}
+                                        })}
-                            isSelected={priority === PostPriority.URGENT}
+                                    />
-                            icon={<UrgentIcon size={18}/>}
+                                )}
-                            text={formatMessage({
+                                {priority === PostPriority.URGENT && persistentNotificationsEnabled && (
-                                id: 'post_priority.priority.urgent',
+                                    <ToggleItem
-                                defaultMessage: 'Urgent',
+                                        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>
+            </Menu>
-                            {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>
             {postAcknowledgementsEnabled && (
                 <Footer>
                     <button

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>

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

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}

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>

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'
         />
     );
 

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)>