[MM-55277] Team's menu doesn't follow standard accessible keyboard behavior (#29917)

e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_input_fields_spec.ts

@@ -36,7 +36,7 @@ describe('Verify Accessibility Support in different input fields', () => {
 
     it('MM-T1456 Verify Accessibility Support in Input fields in Invite People Flow', () => {
         // # Open team menu and click 'Invite People'
-        cy.uiOpenTeamMenu('Invite People');
+        cy.uiOpenTeamMenu('Invite people');
 
         // # Click invite members if needed
         cy.get('.InviteAs').findByTestId('inviteMembersLink').click();

e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_modals_dialogs_1_spec.ts

@@ -47,7 +47,7 @@ describe('Verify Accessibility Support in Modals & Dialogs', () => {
         verifyUserMenuModal('Profile');
 
         // * Verify the accessibility support in Team Settings Dialog
-        verifyMainMenuModal('Team Settings');
+        verifyMainMenuModal('Team settings');
 
         // * Verify the accessibility support in Manage Members Dialog
         verifyMainMenuModal('Manage Members', `${testTeam.display_name} Members`);
@@ -72,7 +72,7 @@ describe('Verify Accessibility Support in Modals & Dialogs', () => {
 
         // # Open Channel Members Dialog
         cy.get('#channelHeaderTitle').click();
-        cy.findByText('Manage Members').click().wait(TIMEOUTS.FIVE_SEC);
+        cy.findByText('Manage members').click().wait(TIMEOUTS.FIVE_SEC);
 
         // * Verify the accessibility support in Manage Members Dialog
         cy.findByRole('dialog', {name: 'Off-Topic Members'}).within(() => {

e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_modals_dialogs_spec.ts

@@ -44,7 +44,7 @@ describe('Verify Accessibility Support in Modals & Dialogs', () => {
         cy.visit(`/${testTeam.name}/channels/town-square`);
     });
 
-    it.skip('MM-T1466 Accessibility Support in Direct Messages Dialog screen', () => {
+    it('MM-T1466 Accessibility Support in Direct Messages Dialog screen', () => {
         // * Verify the aria-label in create direct message button
         cy.uiAddDirectMessage().click();
 
@@ -53,11 +53,11 @@ describe('Verify Accessibility Support in Modals & Dialogs', () => {
             cy.findByRole('heading', {name: 'Direct Messages'});
 
             // * Verify the accessibility support in search input
-            cy.findByRole('textbox', {name: 'Search for people'}).
+            cy.findByLabelText('Search for people').
                 should('have.attr', 'aria-autocomplete', 'list');
 
             // # Search for a text and then check up and down arrow
-            cy.findByRole('textbox', {name: 'Search for people'}).
+            cy.findByLabelText('Search for people').
                 typeWithForce('s').
                 wait(TIMEOUTS.HALF_SEC).
                 typeWithForce('{downarrow}{downarrow}{downarrow}{uparrow}');
@@ -80,7 +80,7 @@ describe('Verify Accessibility Support in Modals & Dialogs', () => {
 
             // # Search for an invalid text
             const additionalSearchTerm = 'somethingwhichdoesnotexist';
-            cy.findByRole('textbox', {name: 'Search for people'}).clear().
+            cy.findByLabelText('Search for people').clear().
                 typeWithForce(additionalSearchTerm).
                 wait(TIMEOUTS.HALF_SEC);
 
@@ -137,7 +137,7 @@ describe('Verify Accessibility Support in Modals & Dialogs', () => {
         });
     });
 
-    it.skip('MM-T1468 Accessibility Support in Add people to Channel Dialog screen', () => {
+    it('MM-T1468 Accessibility Support in Add people to Channel Dialog screen', () => {
         // # Add atleast 5 users
         for (let i = 0; i < 5; i++) {
             cy.apiCreateUser().then(({user}) => { // eslint-disable-line
@@ -159,11 +159,11 @@ describe('Verify Accessibility Support in Modals & Dialogs', () => {
             cy.wait(TIMEOUTS.ONE_SEC);
 
             // * Verify the accessibility support in search input
-            cy.findByRole('textbox', {name: 'Search for people or groups'}).
+            cy.findByLabelText('Search for people or groups').
                 should('have.attr', 'aria-autocomplete', 'list');
 
             // # Search for a text and then check up and down arrow
-            cy.findByRole('textbox', {name: 'Search for people or groups'}).
+            cy.findByLabelText('Search for people or groups').
                 wait(TIMEOUTS.HALF_SEC).
                 typeWithForce('u').
                 wait(TIMEOUTS.HALF_SEC).
@@ -189,7 +189,7 @@ describe('Verify Accessibility Support in Modals & Dialogs', () => {
                 });
 
             // # Search for an invalid text and check if reader can read no results
-            cy.findByRole('textbox', {name: 'Search for people or groups'}).
+            cy.findByLabelText('Search for people or groups').
                 typeWithForce('somethingwhichdoesnotexist').
                 wait(TIMEOUTS.HALF_SEC);
 
@@ -203,7 +203,7 @@ describe('Verify Accessibility Support in Modals & Dialogs', () => {
     it('MM-T1515 Verify Accessibility Support in Invite People Flow', () => {
         // # Open Invite People
         cy.uiGetLHSHeader().click();
-        cy.get('#invitePeople').should('be.visible').click();
+        cy.get("#sidebarTeamMenu li:contains('Invite people')").should('be.visible').click();
 
         // * Verify accessibility support in Invite People Dialog
         cy.findByTestId('invitationModal').should('have.attr', 'aria-modal', 'true').and('have.attr', 'aria-labelledby', 'invitation_modal_title').and('have.attr', 'role', 'dialog');

e2e-tests/cypress/tests/integration/channels/enterprise/cloud/billing/notify_admin_spec.ts

@@ -111,9 +111,14 @@ function userGroupsNotification() {
 }
 
 function creatNewTeamNotification() {
-    cy.get('.test-team-header').click().then(() => {
+    // # Click on the team menu button
+    cy.get('#sidebarTeamMenuButton').click();
+
+    // # Click on the lock button on Create a team menu item
+    cy.get('#sidebarTeamMenu').within(() => {
         cy.get('#mattermost_feature_create_multiple_teams-restricted-indicator').click();
     });
+
     cy.get('#FeatureRestrictedModal').should('exist');
     cy.get('#button-plans').as('notifyButton').should('have.text', 'Notify admin').click();
     cy.get('@notifyButton').should('have.text', 'Admin notified!');

e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/guest_experience_ui_spec.ts

@@ -64,24 +64,27 @@ describe('Guest Account - Guest User Experience', () => {
 
         // * Verify reduced options in Team Menu
         const missingMainOptions = [
-            'Invite People',
-            'Team Settings',
-            'Manage Members',
-            'Join Another Team',
-            'Create a Team',
+            'Invite people',
+            'Team settings',
+            'Manage members',
+            'Join another team',
+            'Create a team',
         ];
         missingMainOptions.forEach((missingOption) => {
             cy.uiGetLHSTeamMenu().should('not.contain', missingOption);
         });
 
         const includeMainOptions = [
-            'View Members',
-            'Leave Team',
+            'View members',
+            'Leave team',
         ];
         includeMainOptions.forEach((includeOption) => {
             cy.uiGetLHSTeamMenu().findByText(includeOption);
         });
 
+        // # Close the main menu
+        cy.get('body').type('{esc}');
+
         // * Verify Reduced Options in LHS
         cy.uiGetLHSAddChannelButton().should('not.exist');
 
@@ -120,7 +123,7 @@ describe('Guest Account - Guest User Experience', () => {
         cy.uiGetLhsSection('CHANNELS').find('.SidebarChannel').should('have.length', 3);
 
         // * Verify list of Users a Guest User can see in Team Members dialog
-        cy.uiOpenTeamMenu('View Members');
+        cy.uiOpenTeamMenu('View members');
         cy.get('#searchableUserListTotal').should('be.visible').and('have.text', '1 - 2 members of 2 total');
     });
 
@@ -136,17 +139,18 @@ describe('Guest Account - Guest User Experience', () => {
         // * Verify options in team menu are changed
         cy.uiOpenTeamMenu();
         const includeOptions = [
-            'Invite People',
-            'View Members',
-            'Leave Team',
-            'Create a Team',
+            'Invite people',
+            'View members',
+            'Leave team',
+            'Create a team',
         ];
         includeOptions.forEach((option) => {
             cy.uiGetLHSTeamMenu().findByText(option);
         });
 
-        // # Close the main menu
-        cy.uiGetLHSHeader().click();
+        // Close the main menu with Escape key
+        cy.get('body').type('{esc}');
+        cy.uiGetLHSTeamMenu().should('not.exist');
 
         // * Verify Options in LHS are changed
         cy.uiGetLHSAddChannelButton();

e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/guest_identification_spec.ts

@@ -101,7 +101,7 @@ describe('Guest Accounts', () => {
         cy.visit(`/${testTeam.name}/channels/town-square`);
 
         // # Open team menu, click Invite People, then invite guest
-        cy.uiOpenTeamMenu('Invite People');
+        cy.uiOpenTeamMenu('Invite people');
         cy.findByTestId('inviteGuestLink').click();
 
         // # Type guest user e-mail address.

e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/guest_identification_ui_spec.ts

@@ -68,7 +68,7 @@ describe('Verify Guest User Identification in different screens', () => {
 
     it('Verify Guest Badge in Team Members dialog', () => {
         // # Open team menu and click 'View Members'
-        cy.uiOpenTeamMenu('View Members');
+        cy.uiOpenTeamMenu('View members');
 
         cy.get('#teamMembersModal').should('be.visible').within(($el) => {
             cy.wrap($el).findAllByTestId('userListItemDetails').each(($elChild) => {

e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/guest_invitation_ui_spec.ts

@@ -53,7 +53,7 @@ describe('Guest Account - Guest User Invitation Flow', () => {
 
     it('MM-T4451 Verify UI Elements of Guest User Invitation Flow', () => {
         // # Open team menu and click 'Invite People'
-        cy.uiOpenTeamMenu('Invite People');
+        cy.uiOpenTeamMenu('Invite people');
 
         // * Verify Invite Guest link
         cy.findByTestId('inviteGuestLink').should('be.visible').click();
@@ -117,7 +117,7 @@ describe('Guest Account - Guest User Invitation Flow', () => {
         cy.visit(`/${testTeam.name}/channels/town-square`);
 
         // # Open team menu and click 'Invite People'
-        cy.uiOpenTeamMenu('Invite People');
+        cy.uiOpenTeamMenu('Invite people');
 
         // * Verify if Invite Members modal is displayed when guest account feature is disabled
         cy.findByTestId('invitationModal').find('h1').should('have.text', `Invite people to ${testTeam.display_name}`);
@@ -164,7 +164,7 @@ describe('Guest Account - Guest User Invitation Flow', () => {
         cy.apiDemoteUserToGuest(newUser.id);
 
         // # Open team menu and click 'Invite People'
-        cy.uiOpenTeamMenu('Invite People');
+        cy.uiOpenTeamMenu('Invite people');
 
         // # Click invite members if needed
         cy.get('.InviteAs').findByTestId('inviteMembersLink').click();
@@ -226,7 +226,7 @@ describe('Guest Account - Guest User Invitation Flow', () => {
 
     it('hides the copy link button when inviting guests', () => {
         // # Open team menu and click 'Invite People'
-        cy.uiOpenTeamMenu('Invite People');
+        cy.uiOpenTeamMenu('Invite people');
 
         // # Select Guest
         cy.findByTestId('inviteGuestLink').should('be.visible').click();

e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/helpers.ts

@@ -16,7 +16,7 @@ export function changeGuestFeatureSettings(featureFlag = true, emailInvitation =
 
 export function invitePeople(typeText: string, resultsCount: number, verifyText: string, channelName = 'Town Square', clickInvite = true) {
     // # Open team menu and click 'Invite People'
-    cy.uiOpenTeamMenu('Invite People');
+    cy.uiOpenTeamMenu('Invite people');
 
     // # Click on the next icon to invite guest
     cy.findByTestId('inviteGuestLink').click();

e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/member_invitation_ui_spec.ts

@@ -52,7 +52,7 @@ describe('Guest Account - Member Invitation Flow', () => {
         const email = `temp-${getRandomId()}@mattermost.com`;
 
         // # Open team menu and click 'Invite People'
-        cy.uiOpenTeamMenu('Invite People');
+        cy.uiOpenTeamMenu('Invite people');
 
         // * Verify UI Elements in initial step
         cy.findByTestId('invitationModal').within(() => {
@@ -251,7 +251,7 @@ describe('Guest Account - Member Invitation Flow', () => {
 
 function invitePeople(typeText, resultsCount, verifyText, clickInvite = true) {
     // # Open team menu and click 'Invite People'
-    cy.uiOpenTeamMenu('Invite People');
+    cy.uiOpenTeamMenu('Invite people');
 
     // # Search and add a member
     cy.get('.users-emails-input__control').should('be.visible').within(() => {

e2e-tests/cypress/tests/integration/channels/enterprise/guest_accounts/system_console_guest_access_ui_spec.ts

@@ -103,7 +103,7 @@ describe('Guest Account - Verify Guest Access UI', () => {
         });
 
         // # Open team menu and click 'Invite People'
-        cy.uiOpenTeamMenu('Invite People');
+        cy.uiOpenTeamMenu('Invite people');
 
         // * Verify that an option to Invite via Guest should not be available
         cy.findByTestId('inviteGuestLink').should('not.exist');

e2e-tests/cypress/tests/integration/channels/enterprise/ldap/ldap_guest_spec.ts

@@ -219,7 +219,7 @@ describe('LDAP guest', () => {
                     cy.visit(`/${team.name}/channels/town-square`);
 
                     // # Open team menu and click 'Invite People'
-                    cy.uiOpenTeamMenu('Invite People');
+                    cy.uiOpenTeamMenu('Invite people');
 
                     cy.wait(TIMEOUTS.TWO_SEC);
 

e2e-tests/cypress/tests/integration/channels/enterprise/ldap_group/invite_bot_spec.ts

@@ -54,7 +54,7 @@ describe('Group Synced Team - Bot invitation flow', () => {
         cy.visit(`/${groupConstrainedTeam.name}`);
 
         // # Click 'Invite People' at team menu
-        cy.uiOpenTeamMenu('Invite People');
+        cy.uiOpenTeamMenu('Invite people');
 
         // # Type the first letters of a bot
         cy.get('.users-emails-input__control input').typeWithForce(bot.username);
@@ -75,7 +75,7 @@ describe('Group Synced Team - Bot invitation flow', () => {
         cy.visit(`/${groupConstrainedTeam.name}`);
 
         // # Click 'Manage Members' at team menu
-        cy.uiOpenTeamMenu('Manage Members');
+        cy.uiOpenTeamMenu('Manage members');
 
         // # Search for the bot that we want to remove
         cy.get('#searchUsersInput').should('be.visible').type(bot.username);

e2e-tests/cypress/tests/integration/channels/enterprise/permissions/team_permissions_spec.ts

@@ -95,10 +95,10 @@ describe('Team Permissions', () => {
         cy.uiOpenTeamMenu().wait(TIMEOUTS.HALF_SEC);
 
         // * Verify `Invite People` menu item is not present
-        cy.get('#invitePeople').should('not.exist');
+        cy.get("#sidebarTeamMenu li:contains('Invite people')").should('not.exist');
 
         // # Click `View Members` menu item
-        cy.get('#viewMembers').should('be.visible').click().wait(TIMEOUTS.HALF_SEC);
+        cy.get("#sidebarTeamMenu li:contains('View members')").should('be.visible').click().wait(TIMEOUTS.HALF_SEC);
 
         // * Verify team members modal opens
         cy.get('#teamMembersModal').should('be.visible');