[MM-55285]: Screen reader speaking wrong item in list in Find Channels modal (#29552)

* [MA-11]: Fix Screen reader speaking wrong item in list in Find Channels modal

* [MA-11]: Update types across files

* [MA-11]: Minor refactoring

* [MA-11]: Fix e2e test

* [MA-11]: Fix E2E tests

* [MA-11]: Update role and id

* [MA-11]: Fix playwright tests

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

e2e-tests/cypress/tests/integration/channels/messaging/ctrl_cmd_k_open_dm_with_mouse_spec.js

@@ -41,7 +41,7 @@ describe('Messaging', () => {
         cy.uiGetPostTextBox().cmdOrCtrlShortcut('K');
 
         // # In the "Switch Channels" modal type the first 6 characters of the username
-        cy.findByRole('textbox', {name: 'quick switch input'}).should('be.focused').type(secondUser.username.substring(0, 6)).wait(TIMEOUTS.HALF_SEC);
+        cy.findByRole('combobox', {name: 'quick switch input'}).should('be.focused').type(secondUser.username.substring(0, 6)).wait(TIMEOUTS.HALF_SEC);
 
         // # Verify that the list of users and channels suggestions is present
         cy.get('#suggestionList').should('be.visible').within(() => {

e2e-tests/cypress/tests/integration/channels/messaging/focus_move_spec.js

@@ -68,7 +68,7 @@ describe('Messaging', () => {
         cy.get('#quickSwitchHint').should('be.visible');
 
         // # Type channel name and select it
-        cy.findByRole('textbox', {name: 'quick switch input'}).type(testChannelName).wait(TIMEOUTS.HALF_SEC).type('{enter}');
+        cy.findByRole('combobox', {name: 'quick switch input'}).type(testChannelName).wait(TIMEOUTS.HALF_SEC).type('{enter}');
 
         // * Verify that it redirected into selected channel
         cy.get('#channelHeaderTitle').should('be.visible').should('contain', testChannelName);

e2e-tests/cypress/tests/integration/channels/messaging/message_draft_then_switch_channel_spec.js

@@ -25,7 +25,7 @@ describe('Message Draft and Switch Channels', () => {
     });
 
     it('MM-T131 Message Draft Pencil Icon - CTRL/CMD+K & "Jump to"', () => {
-        const {name, display_name: displayName} = testChannel;
+        const {name, display_name: displayName, id} = testChannel;
         const message = 'message draft test';
 
         // * Validate if the draft icon is not visible at LHS before making a draft
@@ -55,10 +55,10 @@ describe('Message Draft and Switch Channels', () => {
         // * Suggestion list is visible
         cy.get('#suggestionList').should('be.visible').within(() => {
             // * A pencil icon before the channel name in the filtered list is visible
-            cy.get(`#switchChannel_${name}`).find('.icon-pencil-outline').should('be.visible');
+            cy.get(`#switchChannel_${id}`).find('.icon-pencil-outline').should('be.visible');
 
             // # Click to switch back to the test channel
-            cy.get(`#switchChannel_${name}`).click({force: true});
+            cy.get(`#switchChannel_${id}`).click({force: true});
         });
 
         // * Draft is saved in the text input box of the test channel

e2e-tests/cypress/tests/integration/channels/messaging/private_channel_open_spec.js

@@ -32,7 +32,7 @@ describe('Messaging - Opening a private channel using keyboard shortcuts', () =>
             // # Type the first letter of a private channel in the "Switch Channels" modal message box
             // # Use up/down arrow keys to highlight a private channel
             // # Press ENTER
-            cy.findByRole('textbox', {name: 'quick switch input'}).type('Pr').type('{downarrow}').type('{enter}');
+            cy.findByRole('combobox', {name: 'quick switch input'}).type('Pr').type('{downarrow}').type('{enter}');
 
             // * Private channel opens
             cy.get('#channelHeaderTitle').should('be.visible').should('contain', 'Private').wait(TIMEOUTS.HALF_SEC);