[MM-61966] "Browse or Create channel" menu on the right of team drop-down should use a11y supported menu (#29739)

2025-01-22 10:40:43 +05:30
--- a/e2e-tests/cypress/tests/integration/channels/channel/archived_channels_1_spec.ts
+++ b/e2e-tests/cypress/tests/integration/channels/channel/archived_channels_1_spec.ts
@@ -94,11 +94,8 @@ describe('Leave an archived channel', () => {
            // # Archive the channel
            cy.uiArchiveChannel();

-            // # Click on add channel button
-            cy.get('#SidebarContainer .AddChannelDropdown_dropdownButton').click();
-
            // # Click on browse channels
-            cy.get('#showMoreChannels').click();
+            cy.uiBrowseOrCreateChannel('Browse channels');

            // # More channels modal opens
            cy.get('#browseChannelsModal').should('be.visible');
@@ -141,11 +138,8 @@ describe('Leave an archived channel', () => {
            cy.uiArchiveChannel();
        });

-        // # Click on add channel button
-        cy.get('#SidebarContainer .AddChannelDropdown_dropdownButton').click();
-
-        // # Click on browse channels
-        cy.get('#showMoreChannels').click();
+        // # Click on browse channels from menu
+        cy.uiBrowseOrCreateChannel('Browse channels');

        // # More channels modal opens
        cy.get('#browseChannelsModal').should('be.visible').then(() => {
@@ -194,11 +188,8 @@ describe('Leave an archived channel', () => {
            cy.url().should('include', `/${testTeam.name}/channels/${archivedPublicChannel1.name}`);
        });

-        // # Click on add channel button
-        cy.get('#SidebarContainer .AddChannelDropdown_dropdownButton').click();
-
-        // # Click on browse channels
-        cy.get('#showMoreChannels').click();
+        // # Click on browse channels from menu
+        cy.uiBrowseOrCreateChannel('Browse channels');

        // # More channels modal opens
        cy.get('#browseChannelsModal').should('be.visible').then(() => {
@@ -248,11 +239,8 @@ describe('Leave an archived channel', () => {
        cy.get('#confirmModal').should('be.visible');
        cy.get('#confirmModalButton').click();

-        // # Click on add channel button
-        cy.get('#SidebarContainer .AddChannelDropdown_dropdownButton').click();
-
-        // # Click on browse channels
-        cy.get('#showMoreChannels').click();
+        // # Click on browse channels from menu
+        cy.uiBrowseOrCreateChannel('Browse channels');

        // # More channels modal opens
        cy.get('#browseChannelsModal').should('be.visible').then(() => {
@@ -283,11 +271,8 @@ describe('Leave an archived channel', () => {
            cy.uiArchiveChannel();
        });

-        // # Click on add channel button
-        cy.get('#SidebarContainer .AddChannelDropdown_dropdownButton').click();
-
-        // # Click on browse channels
-        cy.get('#showMoreChannels').click();
+        // # Click on browse channels from menu
+        cy.uiBrowseOrCreateChannel('Browse channels');

        // # More channels modal opens and lands on all channels
        cy.get('#browseChannelsModal').should('be.visible').then(() => {
@@ -318,11 +303,8 @@ describe('Leave an archived channel', () => {
            // # Archive the channel
            cy.uiArchiveChannel();

-            // # Click on add channel button
-            cy.get('#SidebarContainer .AddChannelDropdown_dropdownButton').click();
-
-            // # Click on browse channels
-            cy.get('#showMoreChannels').click();
+            // # Click on browse channels from menu
+            cy.uiBrowseOrCreateChannel('Browse channels');

            // # Modal should not contain the created channel
            cy.findByText(channelType.all).should('be.visible').click();
--- a/e2e-tests/cypress/tests/integration/channels/channel/browse_channels_spec.ts
+++ b/e2e-tests/cypress/tests/integration/channels/channel/browse_channels_spec.ts
@@ -70,7 +70,7 @@ describe('Channels', () => {
        cy.visit(`/${testTeam.name}/channels/town-square`);

        // # Go to LHS and click 'Browse channels'
-        cy.uiBrowseOrCreateChannel('Browse channels').click();
+        cy.uiBrowseOrCreateChannel('Browse channels');

        cy.get('#browseChannelsModal').should('be.visible').within(() => {
            // * Dropdown should be visible, defaulting to "All Channels"
@@ -113,7 +113,7 @@ describe('Channels', () => {
        });

        // # Go to LHS and click 'Browse channels'
-        cy.uiBrowseOrCreateChannel('Browse channels').click();
+        cy.uiBrowseOrCreateChannel('Browse channels');

        cy.get('#browseChannelsModal').should('be.visible');

@@ -167,7 +167,7 @@ describe('Channels', () => {
        });

        // # Go to LHS and click 'Browse channels'
-        cy.uiBrowseOrCreateChannel('Browse channels').click();
+        cy.uiBrowseOrCreateChannel('Browse channels');

        cy.get('#browseChannelsModal').should('be.visible').within(() => {
            // * Verify that channel has zero members
@@ -233,7 +233,7 @@ describe('Channels', () => {
        });

        // # Go to LHS and click 'Browse channels'
-        cy.uiBrowseOrCreateChannel('Browse channels').click();
+        cy.uiBrowseOrCreateChannel('Browse channels');

        // * Dropdown should be visible, defaulting to "All channels"
        cy.get('#menuWrapper').should('be.visible').within((el) => {
@@ -288,7 +288,7 @@ function verifyBrowseChannelsModalWithArchivedSelection(isEnabled, testUser, tes

 function verifyBrowseChannelsModal(isEnabled) {
    // # Go to LHS and click 'Browse channels'
-    cy.uiBrowseOrCreateChannel('Browse channels').click();
+    cy.uiBrowseOrCreateChannel('Browse channels');

    // * Verify that the browse channels modal is open and with or without option to view archived channels
    cy.get('#browseChannelsModal').should('be.visible').within(() => {
--- a/e2e-tests/cypress/tests/integration/channels/channel/browse_public_channels_spec.ts
+++ b/e2e-tests/cypress/tests/integration/channels/channel/browse_public_channels_spec.ts
@@ -66,7 +66,7 @@ describe('browse public channels', () => {
        cy.visit(`/${testTeam.name}/channels/town-square`);

        // # Go to LHS and click 'Browse channels'
-        cy.uiBrowseOrCreateChannel('Browse channels').click();
+        cy.uiBrowseOrCreateChannel('Browse channels');

        // * Assert that the browse channel modal is visible
        cy.findByRole('dialog', {name: 'Browse Channels'}).should('be.visible').then(() => {
@@ -108,7 +108,7 @@ describe('browse public channels', () => {
        cy.visit(`/${testTeam.name}/channels/town-square`);

        // # Go to LHS and click 'Browse channels'
-        cy.uiBrowseOrCreateChannel('Browse channels').click();
+        cy.uiBrowseOrCreateChannel('Browse channels');

        // * Assert the moreChannelsModel is visible
        cy.findByRole('dialog', {name: 'Browse Channels'}).should('be.visible').then(() => {
--- a/e2e-tests/cypress/tests/integration/channels/channel_settings/channel_name_validations_spec.ts
+++ b/e2e-tests/cypress/tests/integration/channels/channel_settings/channel_name_validations_spec.ts
@@ -53,7 +53,7 @@ describe('Channel routing', () => {

    it('MM-T884_2 Creating new channel validates against two user IDs being used as channel name', () => {
        // # click on create public channel
-        cy.uiBrowseOrCreateChannel('Create new channel').click();
+        cy.uiBrowseOrCreateChannel('Create new channel');

        // * Verify that the new channel modal is visible
        cy.get('#new-channel-modal').should('be.visible').within(() => {
@@ -73,7 +73,7 @@ describe('Channel routing', () => {

    it('MM-T884_3 Creating a new channel validates against gm-like names being used as channel name', () => {
        // # click on create public channel
-        cy.uiBrowseOrCreateChannel('Create new channel').click();
+        cy.uiBrowseOrCreateChannel('Create new channel');

        // * Verify that the new channel modal is visible
        cy.findByRole('dialog', {name: 'Create a new channel'}).within(() => {
--- a/e2e-tests/cypress/tests/integration/channels/channel_sidebar/category_sorting_1_spec.ts
+++ b/e2e-tests/cypress/tests/integration/channels/channel_sidebar/category_sorting_1_spec.ts
@@ -139,11 +139,8 @@ function createCategoryFromSidebarMenu() {
    // # Start with a new category
    const categoryName = `category-${getRandomId()}`;

-    // # Click on the sidebar menu dropdown
-    cy.uiGetLHSAddChannelButton().click();
-
-    // # Click on create category link
-    cy.findByText('Create new category').should('be.visible').click();
+    // # Click on the sidebar menu dropdown and select Create Category
+    cy.uiBrowseOrCreateChannel('Create new category');

    // # Verify that Create Category modal has shown up.
    // # Wait for a while until the modal has fully loaded, especially during first-time access.
--- a/e2e-tests/cypress/tests/integration/channels/channel_sidebar/category_sorting_spec.ts
+++ b/e2e-tests/cypress/tests/integration/channels/channel_sidebar/category_sorting_spec.ts
@@ -22,11 +22,8 @@ describe('Category sorting', () => {
    });

    it('MM-T3916 Create Category character limit', () => {
-        // # Click on the sidebar menu dropdown
-        cy.uiGetLHSAddChannelButton().click();
-
-        // # Click on create category link
-        cy.findByText('Create new category').should('be.visible').click();
+        // # Click on the sidebar menu dropdown and select Create Category
+        cy.uiBrowseOrCreateChannel('Create new category');

        // # Add a name 26 characters in length e.g `abcdefghijklmnopqrstuvwxyz`
        cy.get('#editCategoryModal').should('be.visible').wait(TIMEOUTS.HALF_SEC).within(() => {
--- a/e2e-tests/cypress/tests/integration/channels/channel_sidebar/custom_categories_spec.ts
+++ b/e2e-tests/cypress/tests/integration/channels/channel_sidebar/custom_categories_spec.ts
@@ -89,11 +89,8 @@ function createCategoryFromSidebarMenu() {
    // # Start with a new category
    const categoryName = `category-${getRandomId()}`;

-    // # Click on the sidebar menu dropdown
-    cy.uiGetLHSAddChannelButton().click();
-
-    // # Click on create category link
-    cy.findByText('Create new category').should('be.visible').click();
+    // # Click on the sidebar menu dropdown and select Create Category
+    cy.uiBrowseOrCreateChannel('Create new category');

    // # Verify that Create Category modal has shown up.
    // # Wait for a while until the modal has fully loaded, especially during first-time access.
--- a/e2e-tests/cypress/tests/integration/channels/channel_sidebar/new_channel_dropdown_spec.ts
+++ b/e2e-tests/cypress/tests/integration/channels/channel_sidebar/new_channel_dropdown_spec.ts
@@ -61,11 +61,8 @@ describe('Channel sidebar', () => {
        cy.get('#channelHeaderTitle').should('contain', 'Town Square');
        cy.url().should('include', `/${teamName}/channels/town-square`);

-        // # Click the New Channel Dropdown button
-        cy.uiGetLHSAddChannelButton().should('be.visible').click();
-
-        // # Click the Browse channels dropdown item
-        cy.get('.AddChannelDropdown .MenuItem:contains(Browse channels) button').should('be.visible').click();
+        // # Click on the sidebar menu dropdown and select browse channels
+        cy.uiBrowseOrCreateChannel('Browse channels');

        // * Verify that the more channels modal is visible
        cy.get('#browseChannelsModal').should('be.visible');
--- a/e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_modals_dialogs_spec.ts
+++ b/e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_modals_dialogs_spec.ts
@@ -104,7 +104,7 @@ describe('Verify Accessibility Support in Modals & Dialogs', () => {
                cy.reload();

                // * Verify the aria-label in more public channels button
-                cy.uiBrowseOrCreateChannel('Browse channels').click();
+                cy.uiBrowseOrCreateChannel('Browse channels');

                // * Verify the accessibility support in More Channels Dialog
                cy.findByRole('dialog', {name: 'Browse Channels'}).within(() => {
@@ -140,7 +140,7 @@ describe('Verify Accessibility Support in Modals & Dialogs', () => {
    it.skip('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
+            cy.apiCreateUser().then(({user}) => { // eslint-disable-line
                cy.apiAddUserToTeam(testTeam.id, user.id);
            });
        }
--- a/e2e-tests/cypress/tests/integration/channels/enterprise/ldap/ldap_group_sync_spec.ts
+++ b/e2e-tests/cypress/tests/integration/channels/enterprise/ldap/ldap_group_sync_spec.ts
@@ -234,7 +234,7 @@ context('ldap', () => {

            // # Go to team page to look for this channel in public channel directory
            cy.visit(`/${testTeam.name}`);
-            cy.uiBrowseOrCreateChannel('Browse channels').click();
+            cy.uiBrowseOrCreateChannel('Browse channels');

            // * Search private channel name and make sure it is still visible
            cy.get('#searchChannelsTextbox').type(testChannel.display_name);
@@ -456,7 +456,7 @@ context('ldap', () => {
                cy.visit(`/${testTeam.name}/channels/off-topic`);

                // # Go to LHS and click 'Browse channels'
-                cy.uiBrowseOrCreateChannel('Browse channels').click();
+                cy.uiBrowseOrCreateChannel('Browse channels');

                // * Search public channel and ensure it appears in the list
                cy.get('#searchChannelsTextbox').type(publicChannel.display_name);
@@ -473,7 +473,7 @@ context('ldap', () => {
                cy.visit(`/${testTeam.name}/channels/off-topic`);

                // # Go to LHS and click 'Browse channels'
-                cy.uiBrowseOrCreateChannel('Browse channels').click();
+                cy.uiBrowseOrCreateChannel('Browse channels');

                // * Search private channel name and make sure it isn't there in public channel directory
                cy.get('#searchChannelsTextbox').type(publicChannel.display_name);
--- a/e2e-tests/cypress/tests/integration/channels/enterprise/permissions/team_permissions_spec.ts
+++ b/e2e-tests/cypress/tests/integration/channels/enterprise/permissions/team_permissions_spec.ts
@@ -148,7 +148,7 @@ describe('Team Permissions', () => {
        cy.visit(`/${testTeam.name}/channels/town-square`);

        // # Click on create new channel at LHS
-        cy.uiBrowseOrCreateChannel('Create new channel').click();
+        cy.uiBrowseOrCreateChannel('Create new channel');

        // * Verify that the create private channel is disabled
        cy.findByRole('dialog', {name: 'Create a new channel'}).find('#public-private-selector-button-P').should('have.class', 'disabled');
--- a/e2e-tests/cypress/tests/integration/channels/enterprise/system_console/about/edition_and_license_spec.js
+++ b/e2e-tests/cypress/tests/integration/channels/enterprise/system_console/about/edition_and_license_spec.js
@@ -105,7 +105,7 @@ function verifyCreatePublicChannel(teamName, testUsers) {
        cy.visit(`/${teamName}/channels/town-square`);

        // # Click on create new channel at LHS
-        cy.uiBrowseOrCreateChannel('Create new channel').click();
+        cy.uiBrowseOrCreateChannel('Create new channel');

        cy.findByRole('dialog', {name: 'Create a new channel'}).within(() => {
            // * Verify if creating a public channel is disabled or not
--- a/e2e-tests/cypress/tests/integration/channels/multi_team_and_dm/existing_channel_name_spec.js
+++ b/e2e-tests/cypress/tests/integration/channels/multi_team_and_dm/existing_channel_name_spec.js
@@ -77,7 +77,7 @@ describe('Channel', () => {
 */
 function verifyExistingChannelError(newChannelName, makePrivate = false) {
    // Click on '+' button for Public or Private Channel
-    cy.uiBrowseOrCreateChannel('Create new channel').click();
+    cy.uiBrowseOrCreateChannel('Create new channel');

    if (makePrivate) {
        cy.get('#public-private-selector-button-P').click();
--- a/e2e-tests/cypress/tests/support/ui/channel.js
+++ b/e2e-tests/cypress/tests/support/ui/channel.js
@@ -11,7 +11,7 @@ Cypress.Commands.add('uiCreateChannel', ({
    name = '',
    createBoard = '',
 }) => {
-    cy.uiBrowseOrCreateChannel('Create new channel').click();
+    cy.uiBrowseOrCreateChannel('Create new channel');

    cy.get('#new-channel-modal').should('be.visible');
    if (isPrivate) {
--- a/e2e-tests/cypress/tests/support/ui/channel_sidebar.ts
+++ b/e2e-tests/cypress/tests/support/ui/channel_sidebar.ts
@@ -13,11 +13,8 @@ import {getRandomId} from '../../utils';
 *   cy.uiCreateSidebarCategory();
 */
 function uiCreateSidebarCategory(categoryName: string = `category-${getRandomId()}`): ChainableT<any> {
-    // # Click the New Category/Channel Dropdown button
-    cy.uiGetLHSAddChannelButton().click();
-
-    // # Click the Create new category dropdown item
-    cy.get('.AddChannelDropdown').should('be.visible').contains('.MenuItem', 'Create new category').click();
+    // # Click on the sidebar menu dropdown and select Create Category
+    cy.uiBrowseOrCreateChannel('Create new category');

    cy.findByRole('dialog', {name: 'Rename Category'}).should('be.visible').within(() => {
        // # Fill in the category name and click 'Create'
--- a/e2e-tests/cypress/tests/support/ui/sidebar_left.ts
+++ b/e2e-tests/cypress/tests/support/ui/sidebar_left.ts
@@ -31,8 +31,7 @@ Cypress.Commands.add('uiOpenTeamMenu', (item = '') => {
 });

 Cypress.Commands.add('uiGetLHSAddChannelButton', () => {
-    return cy.uiGetLHS().
-        find('.AddChannelDropdown_dropdownButton');
+    return cy.uiGetLHS().findByRole('button', {name: 'Browse or create channels'});
 });

 Cypress.Commands.add('uiGetLHSTeamMenu', () => {
@@ -88,15 +87,16 @@ Cypress.Commands.add('uiGetLhsSection', (section) => {
        parent();
 });

-Cypress.Commands.add('uiBrowseOrCreateChannel', (item) => {
-    cy.get('.AddChannelDropdown_dropdownButton').
-        should('be.visible').
-        click();
-    cy.get('.dropdown-menu').should('be.visible');
+Cypress.Commands.add('uiBrowseOrCreateChannel', (menuitem) => {
+    cy.uiGetLHSAddChannelButton().should('be.visible').click();

-    if (item) {
-        cy.findByRole('menuitem', {name: item});
-    }
+    cy.get('#browserOrAddChannelMenu').
+        should('exist').and('be.visible').
+        within(() => {
+            if (menuitem) {
+                cy.findByText(menuitem).should('exist').click();
+            }
+        });
 });

 Cypress.Commands.add('uiAddDirectMessage', () => {