[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,8 +141,10 @@ function PostPriorityPicker({
                     defaultMessage: 'Message priority',
                 })}
             </Header>
-            <div role='application'>
+            <Menu
-                <Menu className='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

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