[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/archived_channel/archive_channel_operations_spec.ts

@@ -57,7 +57,7 @@ describe('Leave an archived channel', () => {
 
         // * The archived channel appears in channel switcher search results
         cy.get('#suggestionList').should('be.visible');
-        cy.get('#suggestionList').find(`#switchChannel_${testChannel.name}`).should('be.visible');
+        cy.get('#suggestionList').find(`#quickSwitchInput_${testChannel.id}`).should('be.visible');
 
         // # Reload the app (refresh the web page)
         cy.reload().then(() => {
@@ -68,7 +68,7 @@ describe('Leave an archived channel', () => {
             cy.get('#quickSwitchInput').type(testChannel.display_name).then(() => {
                 // * The archived channel appears in channel switcher search results
                 cy.get('#suggestionList').should('be.visible');
-                cy.get('#suggestionList').find(`#switchChannel_${testChannel.name}`).should('be.visible');
+                cy.get('#suggestionList').find(`#quickSwitchInput_${testChannel.id}`).should('be.visible');
             });
         });
     });

e2e-tests/cypress/tests/integration/channels/autocomplete/database/users_in_channel_switcher_spec.ts

@@ -35,7 +35,7 @@ describe('Autocomplete with Database - Users', () => {
 
             // # Open quick channel switcher
             cy.typeCmdOrCtrl().type('k');
-            cy.findByRole('textbox', {name: 'quick switch input'}).should('be.visible');
+            cy.findByRole('combobox', {name: 'quick switch input'}).should('be.visible');
         });
     });
 

e2e-tests/cypress/tests/integration/channels/autocomplete/helpers.ts

@@ -119,7 +119,7 @@ function getPostTextboxInput() {
 }
 
 function getQuickChannelSwitcherInput() {
-    cy.findByRole('textbox', {name: 'quick switch input'}).
+    cy.findByRole('combobox', {name: 'quick switch input'}).
         should('be.visible').
         as('input').
         clear();
@@ -158,7 +158,7 @@ function searchForChannel(name: string) {
     cy.typeCmdOrCtrl().type('k').wait(TIMEOUTS.ONE_SEC);
 
     // # Clear out and type in the name
-    cy.findByRole('textbox', {name: 'quick switch input'}).
+    cy.findByRole('combobox', {name: 'quick switch input'}).
         should('be.visible').
         as('input').
         clear().

e2e-tests/cypress/tests/integration/channels/channel/channel_switcher_spec.ts

@@ -42,7 +42,7 @@ describe('Channel Switcher', () => {
         // # Start typing channel name in the "Switch Channels" modal message box
         // # Use up/down arrow keys to highlight second channel
         // # Press ENTER
-        cy.findByRole('textbox', {name: 'quick switch input'}).
+        cy.findByRole('combobox', {name: 'quick switch input'}).
             type(`${channelDisplayNamePrefix} `).
             type('{downarrow}{downarrow}{enter}');
 
@@ -60,7 +60,7 @@ describe('Channel Switcher', () => {
         cy.typeCmdOrCtrl().type('K', {release: true});
 
         // # Start typing channel name in the "Switch Channels" modal message box
-        cy.findByRole('textbox', {name: 'quick switch input'}).type(`${channelDisplayNamePrefix} `);
+        cy.findByRole('combobox', {name: 'quick switch input'}).type(`${channelDisplayNamePrefix} `);
 
         cy.get(`[data-testid^=${channelNamePrefix}-c] > span`).click();
 
@@ -78,7 +78,7 @@ describe('Channel Switcher', () => {
         cy.typeCmdOrCtrl().type('K', {release: true});
 
         // # Type invalid channel name in the "Switch Channels" modal message box
-        cy.findByRole('textbox', {name: 'quick switch input'}).type('there-is-no-spoon');
+        cy.findByRole('combobox', {name: 'quick switch input'}).type('there-is-no-spoon');
 
         // * Expect 'nothing found' message
         cy.get('.no-results__title > span').should('be.visible');
@@ -91,10 +91,10 @@ describe('Channel Switcher', () => {
         cy.typeCmdOrCtrl().type('K', {release: true});
 
         // # Press ESC
-        cy.findByRole('textbox', {name: 'quick switch input'}).type('{esc}');
+        cy.findByRole('combobox', {name: 'quick switch input'}).type('{esc}');
 
         // * Expect the dialog to be closed
-        cy.findByRole('textbox', {name: 'quick switch input'}).should('not.exist');
+        cy.findByRole('combobox', {name: 'quick switch input'}).should('not.exist');
 
         // * Expect staying in the same channel
         cy.url().should('contain', 'off-topic');
@@ -106,7 +106,7 @@ describe('Channel Switcher', () => {
         cy.get('.modal').click({force: true});
 
         // * Expect the dialog to be closed
-        cy.findByRole('textbox', {name: 'quick switch input'}).should('not.exist');
+        cy.findByRole('combobox', {name: 'quick switch input'}).should('not.exist');
 
         // * Expect staying in the same channel
         cy.url().should('contain', 'off-topic');

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

@@ -31,7 +31,7 @@ export function searchForChannel(name: string) {
     cy.typeCmdOrCtrl().type('k').wait(TIMEOUTS.ONE_SEC);
 
     // # Clear out and type in the name
-    cy.findByRole('textbox', {name: 'quick switch input'}).
+    cy.findByRole('combobox', {name: 'quick switch input'}).
         should('be.visible').
         as('input').
         clear().

e2e-tests/cypress/tests/integration/channels/enterprise/elasticsearch_autocomplete/users_in_channel_switcher_spec.ts

@@ -38,7 +38,7 @@ describe('Autocomplete with Elasticsearch - Users', () => {
 
             // # Open quick channel switcher
             cy.typeCmdOrCtrl().type('k');
-            cy.findByRole('textbox', {name: 'quick switch input'}).should('be.visible');
+            cy.findByRole('combobox', {name: 'quick switch input'}).should('be.visible');
         });
     });
 

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

@@ -133,7 +133,7 @@ describe('Verify Guest User Identification in different screens', () => {
         cy.uiOpenFindChannels();
 
         // # Type the guest user name on Channel switcher input
-        cy.findByRole('textbox', {name: 'quick switch input'}).type(guestUser.username).wait(TIMEOUTS.HALF_SEC);
+        cy.findByRole('combobox', {name: 'quick switch input'}).type(guestUser.username).wait(TIMEOUTS.HALF_SEC);
 
         // * Verify if Guest badge is displayed for the guest user in the Switch Channel Dialog
         cy.get('#suggestionList').should('be.visible');

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

@@ -408,7 +408,7 @@ context('ldap', () => {
                 cy.wait(TIMEOUTS.THREE_SEC);
 
                 // # Type channel display name on Channel switcher input
-                cy.findByRole('textbox', {name: 'quick switch input'}).type(publicChannel.display_name);
+                cy.findByRole('combobox', {name: 'quick switch input'}).type(publicChannel.display_name);
                 cy.wait(TIMEOUTS.HALF_SEC);
 
                 // * Should open up suggestion list for channels
@@ -433,7 +433,7 @@ context('ldap', () => {
                 cy.wait(TIMEOUTS.THREE_SEC);
 
                 // # Type channel display name on Channel switcher input
-                cy.findByRole('textbox', {name: 'quick switch input'}).type(publicChannel.display_name);
+                cy.findByRole('combobox', {name: 'quick switch input'}).type(publicChannel.display_name);
                 cy.wait(TIMEOUTS.HALF_SEC);
 
                 // * Should open up suggestion list for channels

e2e-tests/cypress/tests/integration/channels/interactive_dialog/scrollable_spec.js

@@ -86,7 +86,7 @@ describe('Interactive Dialog', () => {
                     cy.wrap($elForm).find('.suggestion-list__item').first().should('be.visible');
                     cy.wrap($elForm).find('.form-control').type('{uparrow}', {force: true});
                     cy.wrap($elForm).find('.form-control').type('{downarrow}'.repeat(10), {force: true});
-                    cy.wrap($elForm).find('.suggestion-list__item').first().should('not.be.visible');
+                    cy.wrap($elForm).find('.suggestion-list__item').should('not.exist');
                     cy.wrap($elForm).find('.form-control').type('{uparrow}'.repeat(10), {force: true});
                     cy.wrap($elForm).find('.suggestion-list__item').first().should('be.visible');
                 } else if (index === 1) {
@@ -94,7 +94,7 @@ describe('Interactive Dialog', () => {
                     cy.wrap($elForm).find('.suggestion-list__item').first().should('be.visible');
                     cy.wrap($elForm).find('.form-control').type('{uparrow}', {force: true});
                     cy.wrap($elForm).find('.form-control').type('{downarrow}'.repeat(10), {force: true});
-                    cy.wrap($elForm).find('.suggestion-list__item').first().should('not.be.visible');
+                    cy.wrap($elForm).find('.suggestion-list__item').should('not.exist');
                     cy.wrap($elForm).find('.form-control').type('{uparrow}'.repeat(10), {force: true});
                     cy.wrap($elForm).find('.suggestion-list__item').first().should('be.visible');
                 }

e2e-tests/cypress/tests/integration/channels/keyboard_shortcuts/ctrl_cmd_k_user_from_other_team_spec.js

@@ -56,7 +56,7 @@ describe('Keyboard Shortcuts', () => {
         cy.typeCmdOrCtrl().type('K', {release: true});
 
         // # Start typing the name of other user
-        cy.findByRole('textbox', {name: 'quick switch input'}).type(this.otherUser.username);
+        cy.findByRole('combobox', {name: 'quick switch input'}).type(this.otherUser.username);
 
         // # Select other user from the list
         cy.findByTestId(this.otherUser.username).should('not.exist');
@@ -104,7 +104,7 @@ function verifyUserIsFoundAndDMOpensOnClick(user) {
     cy.typeCmdOrCtrl().type('K', {release: true});
 
     // # Start typing the name of other user
-    cy.findByRole('textbox', {name: 'quick switch input'}).type(user.username);
+    cy.findByRole('combobox', {name: 'quick switch input'}).type(user.username);
 
     // # Select other user from the list
     cy.findByTestId(user.username).should('be.visible');

e2e-tests/cypress/tests/integration/channels/keyboard_shortcuts/keyboard_shortcuts_1_spec.js

@@ -50,7 +50,7 @@ describe('Keyboard Shortcuts', () => {
             cy.apiAddUserToTeam(testTeam.id, tempUser.id);
 
             // # In the "Switch Channels" modal type the first chars of the test channel name
-            cy.findByRole('textbox', {name: 'quick switch input'}).should('be.focused').type(testChannel.name.substring(0, 3)).wait(TIMEOUTS.HALF_SEC);
+            cy.findByRole('combobox', {name: 'quick switch input'}).should('be.focused').type(testChannel.name.substring(0, 3)).wait(TIMEOUTS.HALF_SEC);
 
             // # Verify that the list of users and channels suggestions is present
             cy.get('#suggestionList').should('be.visible').within(() => {
@@ -360,7 +360,7 @@ describe('Keyboard Shortcuts', () => {
         cy.uiGetPostTextBox().cmdOrCtrlShortcut('K').then(() => {
             // * Channel switcher hint should be visible and focused on
             cy.get('#quickSwitchHint').should('be.visible');
-            cy.findByRole('textbox', {name: 'quick switch input'}).should('be.focused');
+            cy.findByRole('combobox', {name: 'quick switch input'}).should('be.focused');
         });
 
         // # Type CTRL/CMD+K to close 'Switch Channels' modal

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

e2e-tests/cypress/tests/integration/channels/search_autocomplete/renaming_spec.js

@@ -144,7 +144,7 @@ function searchAndVerifyChannel(channel) {
     cy.typeCmdOrCtrl().type('k');
 
     // # Search for channel's display name
-    cy.findByRole('textbox', {name: 'quick switch input'}).
+    cy.findByRole('combobox', {name: 'quick switch input'}).
         should('be.visible').
         as('input').
         clear().

e2e-tests/cypress/tests/integration/channels/settings/sidebar/channel_switcher_not_cloud_spec.js

@@ -36,7 +36,7 @@ describe('Settings > Sidebar > Channel Switcher', () => {
         cy.get('#quickSwitchHint').should('be.visible').should('contain', 'Type to find a channel. Use UP/DOWN to browse, ENTER to select, ESC to dismiss.');
 
         // # Type CTRL/CMD+shift+L
-        cy.findByRole('textbox', {name: 'quick switch input'}).cmdOrCtrlShortcut('{shift}L');
+        cy.findByRole('combobox', {name: 'quick switch input'}).cmdOrCtrlShortcut('{shift}L');
 
         // * Suggestion list should not be visible
         cy.get('#suggestionList').should('not.exist');
@@ -56,7 +56,7 @@ describe('Settings > Sidebar > Channel Switcher', () => {
         cy.get('#quickSwitchHint').should('be.visible').should('contain', 'Type to find a channel. Use UP/DOWN to browse, ENTER to select, ESC to dismiss.');
 
         // # Type CTRL/CMD+shift+m
-        cy.findByRole('textbox', {name: 'quick switch input'}).cmdOrCtrlShortcut('{shift}M');
+        cy.findByRole('combobox', {name: 'quick switch input'}).cmdOrCtrlShortcut('{shift}M');
 
         // * Suggestion list should not be visible
         cy.get('#suggestionList').should('not.exist');

e2e-tests/cypress/tests/integration/channels/settings/sidebar/channel_switcher_spec.js

@@ -50,14 +50,14 @@ function verifyChannelSwitch(team, channel) {
     cy.get('#quickSwitchHint').should('be.visible').should('contain', 'Type to find a channel. Use UP/DOWN to browse, ENTER to select, ESC to dismiss.');
 
     // # Type channel display name on Channel switcher input
-    cy.findByRole('textbox', {name: 'quick switch input'}).type(channel.display_name);
+    cy.findByRole('combobox', {name: 'quick switch input'}).type(channel.display_name);
     cy.wait(TIMEOUTS.HALF_SEC);
 
     // * Suggestion list should be visible
     cy.get('#suggestionList').should('be.visible');
 
     // # Press enter
-    cy.findByRole('textbox', {name: 'quick switch input'}).type('{enter}');
+    cy.findByRole('combobox', {name: 'quick switch input'}).type('{enter}');
 
     // * Verify that it redirected into "channel-switcher" as selected channel
     cy.url().should('include', `/${team.name}/channels/${channel.name}`);

e2e-tests/playwright/support/ui/components/channels/find_channels_modal.ts

@@ -11,7 +11,7 @@ export default class FindChannelsModal {
     constructor(container: Locator) {
         this.container = container;
 
-        this.input = container.getByRole('textbox', {name: 'quick switch input'});
+        this.input = container.getByRole('combobox', {name: 'quick switch input'});
         this.searchList = container.locator('.suggestion-list__item');
     }
 

webapp/channels/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap

@@ -32,13 +32,17 @@ exports[`components/search_bar/SearchBar should match snapshot with search 1`] =
           class="input-wrapper"
         >
           <input
+            aria-autocomplete="list"
+            aria-controls="suggestionList"
             aria-describedby="searchbar-help-popup"
+            aria-expanded="false"
             aria-label="Search"
             autocomplete="off"
             class="search-bar form-control a11y__region"
             data-a11y-sort-order="9"
             id="searchBox"
             placeholder="Search"
+            role="combobox"
             tabindex="0"
             type="search"
             value="test"
@@ -103,13 +107,17 @@ exports[`components/search_bar/SearchBar should match snapshot with search, with
           class="input-wrapper"
         >
           <input
+            aria-autocomplete="list"
+            aria-controls="suggestionList"
             aria-describedby="searchbar-help-popup"
+            aria-expanded="false"
             aria-label="Search"
             autocomplete="off"
             class="search-bar form-control a11y__region"
             data-a11y-sort-order="9"
             id="searchBox"
             placeholder="Search"
+            role="combobox"
             tabindex="0"
             type="search"
             value="test"
@@ -166,13 +174,17 @@ exports[`components/search_bar/SearchBar should match snapshot without search 1`
           class="input-wrapper"
         >
           <input
+            aria-autocomplete="list"
+            aria-controls="suggestionList"
             aria-describedby="searchbar-help-popup"
+            aria-expanded="false"
             aria-label="Search"
             autocomplete="off"
             class="search-bar form-control a11y__region"
             data-a11y-sort-order="9"
             id="searchBox"
             placeholder="Search"
+            role="combobox"
             tabindex="0"
             type="search"
             value=""
@@ -225,13 +237,17 @@ exports[`components/search_bar/SearchBar should match snapshot without search, w
           class="input-wrapper"
         >
           <input
+            aria-autocomplete="list"
+            aria-controls="suggestionList"
             aria-describedby="searchbar-help-popup"
+            aria-expanded="false"
             aria-label="Search"
             autocomplete="off"
             class="search-bar form-control a11y__region"
             data-a11y-sort-order="9"
             id="searchBox"
             placeholder="Search"
+            role="combobox"
             tabindex="0"
             type="search"
             value=""
@@ -276,13 +292,17 @@ exports[`components/search_bar/SearchBar should match snapshot without search, w
           class="input-wrapper"
         >
           <input
+            aria-autocomplete="list"
+            aria-controls="suggestionList"
             aria-describedby="searchbar-help-popup"
+            aria-expanded="false"
             aria-label="Search"
             autocomplete="off"
             class="search-bar form-control a11y__region"
             data-a11y-sort-order="9"
             id="searchBox"
             placeholder="Search"
+            role="combobox"
             tabindex="0"
             type="search"
             value=""

webapp/channels/src/components/suggestion/at_mention_provider/__snapshots__/at_mention_suggestion.test.tsx.snap

@@ -34,7 +34,7 @@ exports[`at mention suggestion Should display nick name of non signed in user 1`
     onMouseMove={[MockFunction]}
     term="@user"
   >
-    <div
+    <li
       className="suggestion-list__item"
       data-testid="mentionSuggestion_user2"
       onClick={[Function]}
@@ -88,7 +88,7 @@ exports[`at mention suggestion Should display nick name of non signed in user 1`
           <div />
         </Component>
       </span>
-    </div>
+    </li>
   </SuggestionContainer>
 </AtMentionSuggestion>
 `;
@@ -129,7 +129,7 @@ exports[`at mention suggestion Should not display nick name of the signed in use
     onMouseMove={[MockFunction]}
     term="@user"
   >
-    <div
+    <li
       className="suggestion-list__item"
       data-testid="mentionSuggestion_user"
       onClick={[Function]}
@@ -191,7 +191,7 @@ exports[`at mention suggestion Should not display nick name of the signed in use
           <div />
         </Component>
       </span>
-    </div>
+    </li>
   </SuggestionContainer>
 </AtMentionSuggestion>
 `;

webapp/channels/src/components/suggestion/at_mention_provider/at_mention_suggestion.tsx

@@ -34,7 +34,7 @@ interface Group extends Item {
     member_count: number;
 }
 
-const AtMentionSuggestion = React.forwardRef<HTMLDivElement, SuggestionProps<Item>>((props, ref) => {
+const AtMentionSuggestion = React.forwardRef<HTMLLIElement, SuggestionProps<Item>>((props, ref) => {
     const {item} = props;
 
     const intl = useIntl();

webapp/channels/src/components/suggestion/channel_mention_provider.tsx

@@ -27,7 +27,7 @@ type WrappedChannel = {
     loading?: boolean;
 }
 
-export const ChannelMentionSuggestion = React.forwardRef<HTMLDivElement, SuggestionProps<WrappedChannel>>((props, ref) => {
+export const ChannelMentionSuggestion = React.forwardRef<HTMLLIElement, SuggestionProps<WrappedChannel>>((props, ref) => {
     const {item} = props;
     const channelIsArchived = item.channel && item.channel.delete_at && item.channel.delete_at !== 0;
 

webapp/channels/src/components/suggestion/command_provider/command_provider.tsx

@@ -30,7 +30,7 @@ const EXECUTE_CURRENT_COMMAND_ITEM_ID = Constants.Integrations.EXECUTE_CURRENT_C
 const OPEN_COMMAND_IN_MODAL_ITEM_ID = Constants.Integrations.OPEN_COMMAND_IN_MODAL_ITEM_ID;
 const COMMAND_SUGGESTION_ERROR = Constants.Integrations.COMMAND_SUGGESTION_ERROR;
 
-const CommandSuggestion = React.forwardRef<HTMLDivElement, SuggestionProps<AutocompleteSuggestion>>((props, ref) => {
+const CommandSuggestion = React.forwardRef<HTMLLIElement, SuggestionProps<AutocompleteSuggestion>>((props, ref) => {
     const {item} = props;
 
     let symbolSpan = <span>{'/'}</span>;

webapp/channels/src/components/suggestion/emoticon_provider.tsx

@@ -31,7 +31,7 @@ type EmojiItem = {
 
 const suggestionTypeEmoji = 'emoji';
 
-const EmoticonSuggestion = React.forwardRef<HTMLDivElement, SuggestionProps<EmojiItem>>((props, ref) => {
+const EmoticonSuggestion = React.forwardRef<HTMLLIElement, SuggestionProps<EmojiItem>>((props, ref) => {
     const text = props.term;
     const emoji = props.item.emoji;
 

webapp/channels/src/components/suggestion/generic_channel_provider.tsx

@@ -15,7 +15,7 @@ import type {SuggestionProps} from './suggestion';
 
 type ChannelSearchFunc = (term: string, success: (channels: Channel[]) => void, error?: (err: ServerError) => void) => (ActionResult | Promise<ActionResult | ActionResult[]>);
 
-const GenericChannelSuggestion = React.forwardRef<HTMLDivElement, SuggestionProps<Channel>>((props, ref) => {
+const GenericChannelSuggestion = React.forwardRef<HTMLLIElement, SuggestionProps<Channel>>((props, ref) => {
     const {item} = props;
 
     const channelName = item.display_name;

webapp/channels/src/components/suggestion/generic_user_provider.tsx

@@ -18,7 +18,7 @@ import type {ResultsCallback} from './provider';
 import {SuggestionContainer} from './suggestion';
 import type {SuggestionProps} from './suggestion';
 
-const GenericUserSuggestion = React.forwardRef<HTMLDivElement, SuggestionProps<UserProfile>>((props, ref) => {
+const GenericUserSuggestion = React.forwardRef<HTMLLIElement, SuggestionProps<UserProfile>>((props, ref) => {
     const {item} = props;
 
     const username = item.username;

webapp/channels/src/components/suggestion/menu_action_provider.tsx

@@ -13,7 +13,7 @@ interface MenuAction {
     value: string;
 }
 
-const MenuActionSuggestion = React.forwardRef<HTMLDivElement, SuggestionProps<MenuAction>>((props, ref) => {
+const MenuActionSuggestion = React.forwardRef<HTMLLIElement, SuggestionProps<MenuAction>>((props, ref) => {
     const {item} = props;
 
     return (

webapp/channels/src/components/suggestion/search_channel_suggestion/search_channel_suggestion.tsx

@@ -76,7 +76,7 @@ type Props = SuggestionProps<Channel> & {
     teammateIsBot: boolean;
 }
 
-const SearchChannelSuggestion = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
+const SearchChannelSuggestion = React.forwardRef<HTMLLIElement, Props>((props, ref) => {
     const {item, teammateIsBot, currentUserId} = props;
 
     const nameObject = itemToName(item, currentUserId);

webapp/channels/src/components/suggestion/search_channel_with_permissions_provider.tsx

@@ -36,7 +36,7 @@ interface WrappedChannel {
 
 type ChannelSearchFunction = (teamId: string, channelPrefix: string) => Promise<ActionResult>
 
-const SearchChannelWithPermissionsSuggestion = React.forwardRef<HTMLDivElement, SuggestionProps<WrappedChannel>>((props, ref) => {
+const SearchChannelWithPermissionsSuggestion = React.forwardRef<HTMLLIElement, SuggestionProps<WrappedChannel>>((props, ref) => {
     const {item} = props;
     const channel = item.channel;
     const channelIsArchived = channel.delete_at && channel.delete_at !== 0;

webapp/channels/src/components/suggestion/search_suggestion_list.tsx

@@ -58,7 +58,7 @@ export default class SearchSuggestionList extends SuggestionList {
     }
 
     getContent = () => {
-        return this.itemsContainerRef?.current?.parentNode as HTMLDivElement | null;
+        return this.itemsContainerRef?.current?.parentNode as HTMLUListElement | null;
     };
 
     renderChannelDivider(type: string) {

webapp/channels/src/components/suggestion/search_user_provider.tsx

@@ -17,7 +17,7 @@ import type {ResultsCallback} from './provider';
 import {SuggestionContainer} from './suggestion';
 import type {SuggestionProps} from './suggestion';
 
-export const SearchUserSuggestion = React.forwardRef<HTMLDivElement, SuggestionProps<UserProfile>>((props, ref) => {
+export const SearchUserSuggestion = React.forwardRef<HTMLLIElement, SuggestionProps<UserProfile>>((props, ref) => {
     const {item} = props;
 
     const username = item.username;

webapp/channels/src/components/suggestion/suggestion.tsx

@@ -4,7 +4,7 @@
 import classNames from 'classnames';
 import React, {useCallback} from 'react';
 
-export interface SuggestionProps<Item> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onMouseMove'> {
+export interface SuggestionProps<Item> extends Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick' | 'onMouseMove'> {
     // eslint-disable-next-line react/no-unused-prop-types
     item: Item;
 
@@ -17,7 +17,7 @@ export interface SuggestionProps<Item> extends Omit<React.HTMLAttributes<HTMLDiv
     onMouseMove: (term: string) => void;
 }
 
-const SuggestionContainer = React.forwardRef<HTMLDivElement, SuggestionProps<unknown>>((props, ref) => {
+const SuggestionContainer = React.forwardRef<HTMLLIElement, SuggestionProps<unknown>>((props, ref) => {
     const {
         children,
         term,
@@ -47,7 +47,7 @@ const SuggestionContainer = React.forwardRef<HTMLDivElement, SuggestionProps<unk
     }, [onMouseMove, term]);
 
     return (
-        <div
+        <li
             ref={ref}
             className={classNames('suggestion-list__item', {'suggestion--selected': isSelection})}
             onClick={handleClick}
@@ -57,7 +57,7 @@ const SuggestionContainer = React.forwardRef<HTMLDivElement, SuggestionProps<unk
             {...otherProps}
         >
             {children}
-        </div>
+        </li>
     );
 });
 

webapp/channels/src/components/suggestion/suggestion_box/suggestion_box.jsx

@@ -820,6 +820,12 @@ export default class SuggestionBox extends React.PureComponent {
                     ref={this.inputRef}
                     autoComplete='off'
                     {...props}
+                    aria-controls='suggestionList'
+                    role='combobox'
+                    {...(this.state.selection && {'aria-activedescendant': `${props.id}_${this.state.selection}`}
+                    )}
+                    aria-autocomplete='list'
+                    aria-expanded={this.state.focused || this.props.forceSuggestionsWhenBlur}
                     onInput={this.handleChange}
                     onCompositionStart={this.handleCompositionStart}
                     onCompositionUpdate={this.handleCompositionUpdate}

webapp/channels/src/components/suggestion/suggestion_box/suggestion_box.test.tsx

@@ -92,7 +92,7 @@ describe('SuggestionBox', () => {
         );
 
         // Start with no suggestions rendered
-        expect(screen.queryByRole('list')).not.toBeInTheDocument();
+        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
 
         // Typing some text should cause a suggestion to be shown
         userEvent.click(screen.getByPlaceholderText('test input'));
@@ -103,9 +103,9 @@ describe('SuggestionBox', () => {
             expect(providerSpy).toHaveBeenCalledTimes(1);
         });
 
-        expect(screen.queryByRole('list')).toBeVisible();
+        expect(screen.queryByRole('listbox')).toBeVisible();
 
-        expect(screen.queryByRole('list')).toBeVisible();
+        expect(screen.queryByRole('listbox')).toBeVisible();
         expect(screen.getByText('Suggestion: testtest')).toBeVisible();
 
         // Typing more text should cause the suggestion to be updaetd
@@ -115,13 +115,13 @@ describe('SuggestionBox', () => {
             expect(providerSpy).toHaveBeenCalledTimes(2);
         });
 
-        expect(screen.queryByRole('list')).toBeVisible();
+        expect(screen.queryByRole('listbox')).toBeVisible();
         expect(screen.getByText('Suggestion: testwordstestwords')).toBeVisible();
 
         // Clearing the textbox hides all suggestions
         await userEvent.clear(screen.getByPlaceholderText('test input'));
 
-        expect(screen.queryByRole('list')).not.toBeInTheDocument();
+        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
     });
 
     test('should hide suggestions on pressing escape', async () => {
@@ -135,20 +135,20 @@ describe('SuggestionBox', () => {
         );
 
         // Start with no suggestions rendered
-        expect(screen.queryByRole('list')).not.toBeInTheDocument();
+        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
 
         // Typing some text should cause a suggestion to be shown
         userEvent.click(screen.getByPlaceholderText('test input'));
         await userEvent.keyboard('test');
 
         await waitFor(() => {
-            expect(screen.getByRole('list')).toBeVisible();
+            expect(screen.getByRole('listbox')).toBeVisible();
         });
 
         // Pressing escape hides all suggestions
         await userEvent.keyboard('{escape}');
 
-        expect(screen.queryByRole('list')).not.toBeInTheDocument();
+        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
     });
 
     test('should autocomplete suggestions by pressing enter', async () => {
@@ -166,7 +166,7 @@ describe('SuggestionBox', () => {
         await userEvent.keyboard('test');
 
         await waitFor(() => {
-            expect(screen.queryByRole('list')).toBeVisible();
+            expect(screen.queryByRole('listbox')).toBeVisible();
             expect(screen.getByText('Suggestion: testtest')).toBeVisible();
         });
 
@@ -177,7 +177,7 @@ describe('SuggestionBox', () => {
             expect(screen.getByPlaceholderText('test input')).toHaveValue('testtest ');
         });
 
-        expect(screen.queryByRole('list')).not.toBeInTheDocument();
+        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
     });
 
     test('MM-57320 completing text with enter and calling resultCallback twice should not erase text following caret', async () => {
@@ -203,14 +203,14 @@ describe('SuggestionBox', () => {
         onSuggestionsReceived.mockClear();
 
         expect(screen.getByPlaceholderText('test input')).toHaveValue('This is important');
-        expect(screen.getByRole('list')).toBeVisible();
+        expect(screen.getByRole('listbox')).toBeVisible();
         expect(screen.getByText('Suggestion: This is importantThis is important')).toBeVisible();
 
         // Move the caret back to the start of the textbox and then use escape to clear the suggestions because
         // we don't support moving the caret with the autocomplete open yet
         await userEvent.keyboard('{home}{escape}');
 
-        expect(screen.queryByRole('list')).not.toBeInTheDocument();
+        expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
 
         // Type a space and then start typing something again to show results
         onSuggestionsReceived.mockClear();
@@ -221,7 +221,7 @@ describe('SuggestionBox', () => {
             expect(onSuggestionsReceived).toHaveBeenCalledTimes(2);
         });
 
-        expect(screen.getByRole('list')).toBeVisible();
+        expect(screen.getByRole('listbox')).toBeVisible();
         expect(screen.getByText('Suggestion: @us@us')).toBeVisible();
 
         onSuggestionsReceived.mockClear();

webapp/channels/src/components/suggestion/suggestion_list.tsx

@@ -44,7 +44,7 @@ export default class SuggestionList extends React.PureComponent<Props> {
         renderDividers: [],
         renderNoResults: false,
     };
-    contentRef: React.RefObject<HTMLDivElement>;
+    contentRef: React.RefObject<HTMLUListElement>;
     wrapperRef: React.RefObject<HTMLDivElement>;
     itemRefs: Map<string, any>;
     currentLabel: string | null;
@@ -209,6 +209,7 @@ export default class SuggestionList extends React.PureComponent<Props> {
             <div
                 key={type + '-divider'}
                 className='suggestion-list__divider'
+                role='separator'
             >
                 <span>
                     <FormattedMessage id={id}/>
@@ -219,7 +220,7 @@ export default class SuggestionList extends React.PureComponent<Props> {
 
     renderNoResults() {
         return (
-            <div
+            <ul
                 key='list-no-results'
                 className='suggestion-list__no-results'
                 ref={this.contentRef}
@@ -232,7 +233,7 @@ export default class SuggestionList extends React.PureComponent<Props> {
                         b: (chunks: string) => <b>{chunks}</b>,
                     }}
                 />
-            </div>
+            </ul>
         );
     }
 
@@ -296,10 +297,10 @@ export default class SuggestionList extends React.PureComponent<Props> {
                 ref={this.wrapperRef}
                 className={mainClass}
             >
-                <div
+                <ul
                     id='suggestionList'
                     data-testid='suggestionList'
-                    role='list'
+                    role='listbox'
                     ref={this.contentRef}
                     style={{
                         maxHeight: this.maxHeight,
@@ -309,7 +310,7 @@ export default class SuggestionList extends React.PureComponent<Props> {
                     onMouseDown={this.props.preventClose}
                 >
                     {items}
-                </div>
+                </ul>
             </div>
         );
     }

webapp/channels/src/components/suggestion/switch_channel_provider.tsx

@@ -121,9 +121,10 @@ type Props = SuggestionProps<WrappedChannel> & WrappedComponentProps & {
     isPartOfOnlyOneTeam: boolean;
     status?: string;
     team?: Team;
+    id: string;
 }
 
-const SwitchChannelSuggestion = React.forwardRef<HTMLDivElement, Props>((props, ref) => {
+const SwitchChannelSuggestion = React.forwardRef<HTMLLIElement, Props>((props, ref) => {
     const {item, status, collapsedThreads, team, isPartOfOnlyOneTeam} = props;
     const channel = item.channel;
     const channelIsArchived = channel.delete_at && channel.delete_at !== 0;
@@ -255,18 +256,31 @@ const SwitchChannelSuggestion = React.forwardRef<HTMLDivElement, Props>((props,
     }
     const showSlug = (isPartOfOnlyOneTeam || channel.type === Constants.DM_CHANNEL) && channel.type !== Constants.THREADS;
 
+    const getId = () => {
+        if (channel.type === Constants.DM_CHANNEL) {
+            if (prefix) {
+                return `quickSwitchInput_${(channel as FakeDirectChannel).userId}`;
+            }
+        }
+        return `quickSwitchInput_${channel.id}`;
+    };
+
     return (
         <SuggestionContainer
             ref={ref}
-            id={`switchChannel_${channel.name}`}
             data-testid={channel.name}
-            role='listitem'
+            role='option'
+            aria-labelledby={`${name.toLowerCase().replaceAll(' ', '-')}-item-name`}
             {...props}
+            id={getId()}
         >
             {icon}
             <div className='suggestion-list__ellipsis suggestion-list__flex'>
                 <span className='suggestion-list__main'>
-                    <span className={classNames({'suggestion-list__unread': item.unread && !channelIsArchived})}>{name}</span>
+                    <span
+                        className={classNames({'suggestion-list__unread': item.unread && !channelIsArchived})}
+                        id={`${name.toLowerCase().replaceAll(' ', '-')}-item-name`}
+                    >{name}</span>
                     {showSlug && description && <span className='ml-2 suggestion-list__desc'>{description}</span>}
                 </span>
                 {customStatus}
@@ -316,6 +330,8 @@ function mapStateToPropsForSwitchChannelSuggestion(state: GlobalState, ownProps:
         collapsedThreads,
         team,
         isPartOfOnlyOneTeam,
+
+        // id: 'quickSwitchInput',
     };
 }
 

webapp/channels/src/sass/components/_suggestion-list.scss

@@ -62,6 +62,7 @@
     max-width: 100%;
     max-height: 292px;
     padding-bottom: 12px;
+    padding-left: 0;
     border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
     border-radius: 4px;
     background-color: functions.v(center-channel-bg);