[MM-55274] User account menu doesn't follow standard accessible keyboard behavior (#29173)

e2e-tests/cypress/tests/integration/channels/menus/main_menu_spec.js

@@ -33,10 +33,9 @@ describe('Main menu', () => {
         cy.apiLogin(testUser);
         cy.visit(`/${testTeam.name}/channels/town-square`);
 
-        cy.uiOpenUserMenu();
-
-        cy.findByRole('menu').should('exist').find('.menu-divider:visible').last().click();
-        cy.findByRole('menu').should('exist');
+        cy.uiOpenUserMenu().within(() => {
+            cy.findAllByRole('separator').last().click();
+        });
     });
 
     it('should show integrations option for system administrator', () => {

e2e-tests/cypress/tests/integration/channels/menus/status_dropdown_spec.js

@@ -10,15 +10,14 @@
 // Stage: @prod
 // Group: @channels @menu @custom_status @status_menu
 
-import * as TIMEOUTS from '../../../fixtures/timeouts';
 import theme from '../../../fixtures/theme.json';
 
 describe('Status dropdown menu', () => {
     const statusTestCases = [
-        {text: 'Online', className: 'icon-check-circle', profileClassName: 'icon-check-circle'},
-        {text: 'Away', className: 'icon-clock'},
-        {text: 'Do not disturb', className: 'icon-minus-circle'},
-        {text: 'Offline', className: 'icon-circle-outline'},
+        {text: 'Online', className: 'userAccountMenu_onlineMenuItem_icon'},
+        {text: 'Away', className: 'userAccountMenu_awayMenuItem_icon'},
+        {text: 'Do not disturb', className: 'userAccountMenu_dndMenuItem_icon'},
+        {text: 'Offline', className: 'userAccountMenu_offlineMenuItem_icon'},
     ];
 
     before(() => {
@@ -40,9 +39,10 @@ describe('Status dropdown menu', () => {
 
         // * Verify all available statuses are shown with icon and text
         statusTestCases.forEach((tc) => {
-            cy.get('@userMenu').findByText(tc.text).
-                parent().
-                find('i').should('have.class', tc.className);
+            cy.uiGetStatusMenu().within(() => {
+                cy.findByText(tc.text).should('be.visible');
+                cy.get('svg').filter(`.${tc.className}`).should('have.length', 1);
+            });
         });
     });
 
@@ -67,7 +67,7 @@ describe('Status dropdown menu', () => {
         cy.uiOpenUserMenu().as('userMenu');
 
         // * Verify "Set a Custom Status" header is clickable
-        cy.get('@userMenu').findByText('Set a custom status').should('have.css', 'cursor', 'pointer');
+        cy.get('@userMenu').findByText('Set custom status').should('have.css', 'cursor', 'pointer');
     });
 
     it('MM-T2927_5 When custom status is disabled, status menu is displayed when status icon is clicked', () => {
@@ -81,22 +81,12 @@ describe('Status dropdown menu', () => {
         cy.uiOpenUserMenu();
     });
 
-    it('MM-T4420 Should stay open when dnd sub-menu header is clicked', () => {
-        // # Open Dnd sub menu and click on header
-        cy.uiOpenDndStatusSubMenu().find('#dndSubMenu-header_menuitem').click().then(() => {
-            cy.wait(TIMEOUTS.HALF_SEC);
-
-            // * Verify that dnd submenu is still visible
-            cy.get('body').find('#dndSubMenu-header_menuitem').should('be.visible');
-        });
-    });
-
     it('MM-T4914 Profile menu header is clickable, opens Profile settings', () => {
         // # Open user menu
-        cy.uiOpenUserMenu().as('userMenu');
-
-        // * Verify menu header is clickable
-        cy.get('@userMenu').get('.MenuHeader').should('have.css', 'cursor', 'pointer').click();
+        cy.uiOpenUserMenu().within(() => {
+            // * Verify menu header is clickable
+            cy.get('li').first().should('have.css', 'cursor', 'pointer').click();
+        });
 
         // * Verify click on header opens Profile settings modal
         cy.findByRole('dialog', {name: 'Profile'}).should('be.visible');
@@ -111,14 +101,14 @@ function stepThroughStatuses(statusTestCases = []) {
     statusTestCases.forEach((tc) => {
         // # Open user menu and click option
         if (tc.text === 'Do not disturb') {
-            cy.uiOpenDndStatusSubMenu().find('#dndTime-thirty_minutes_menuitem').click();
+            cy.uiOpenDndStatusSubMenuAndClick30Mins();
         } else {
             cy.uiOpenUserMenu(tc.text);
         }
 
         // # Verify correct status icon is shown on user's profile picture
-        cy.uiGetProfileHeader().
-            find('i').
-            and('have.class', tc.profileClassName || tc.className);
+        cy.uiGetSetStatusButton().within(() => {
+            cy.get('svg').filter(`.${tc.className}`).should('have.length', 1);
+        });
     });
 }