diff --git a/e2e-tests/cypress/tests/integration/channels/archived_channel/archive_channel_operations_spec.ts b/e2e-tests/cypress/tests/integration/channels/archived_channel/archive_channel_operations_spec.ts
index fa68c4d202..b950a7e3b8 100644
--- a/e2e-tests/cypress/tests/integration/channels/archived_channel/archive_channel_operations_spec.ts
+++ b/e2e-tests/cypress/tests/integration/channels/archived_channel/archive_channel_operations_spec.ts
@@ -56,7 +56,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(`#quickSwitchInput_${testChannel.id}`).should('be.visible');
+        cy.get('#suggestionList').find(`#suggestionList_item_${testChannel.id}`).should('be.visible');
 
         // # Reload the app (refresh the web page)
         cy.reload().then(() => {
@@ -67,7 +67,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(`#quickSwitchInput_${testChannel.id}`).should('be.visible');
+                cy.get('#suggestionList').find(`#suggestionList_item_${testChannel.id}`).should('be.visible');
             });
         });
     });
diff --git a/e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_input_fields_spec.ts b/e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_input_fields_spec.ts
index 99649337fa..26c502fbdd 100644
--- a/e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_input_fields_spec.ts
+++ b/e2e-tests/cypress/tests/integration/channels/enterprise/accessibility/accessibility_input_fields_spec.ts
@@ -86,10 +86,10 @@ describe('Verify Accessibility Support in different input fields', () => {
         cy.get('#searchHints').should('be.visible');
 
         // # Ensure User list is cached once in UI
-        cy.uiGetSearchBox().type('from:').wait(TIMEOUTS.FIVE_SEC);
+        cy.uiGetSearchBox().type('from:').wait(TIMEOUTS.ONE_SEC);
 
         // # Trigger the user autocomplete again
-        cy.uiGetSearchBox().first().clear().type('from:').wait(TIMEOUTS.FIVE_SEC).type('{downarrow}{downarrow}');
+        cy.uiGetSearchBox().first().clear().type('from:').wait(TIMEOUTS.ONE_SEC).type('{downarrow}{downarrow}');
 
         // * Verify Accessibility Support in search autocomplete
         verifySearchAutocomplete(2);
@@ -103,10 +103,10 @@ describe('Verify Accessibility Support in different input fields', () => {
         verifySearchAutocomplete(3);
 
         // # Type the in: filter and ensure channel list is cached once
-        cy.uiGetSearchBox().first().clear().type('in:').wait(TIMEOUTS.FIVE_SEC);
+        cy.uiGetSearchBox().first().clear().type('in:').wait(TIMEOUTS.ONE_SEC);
 
         // # Trigger the channel autocomplete again
-        cy.uiGetSearchBox().first().clear().type('in:').wait(TIMEOUTS.FIVE_SEC).type('{downarrow}{downarrow}');
+        cy.uiGetSearchBox().first().clear().type('in:').wait(TIMEOUTS.ONE_SEC).type('{downarrow}{downarrow}');
 
         // * Verify Accessibility Support in search autocomplete
         verifySearchAutocomplete(2, 'channel');
@@ -125,7 +125,7 @@ describe('Verify Accessibility Support in different input fields', () => {
                     cy.uiGetPostTextBox().should('have.attr', 'placeholder', `Write to ${testChannel.display_name}`).clear().focus();
 
                     // # Ensure User list is cached once in UI
-                    cy.uiGetPostTextBox().type('@').wait(TIMEOUTS.FIVE_SEC);
+                    cy.uiGetPostTextBox().type('@').wait(TIMEOUTS.ONE_SEC);
 
                     // # Select the first user in the list
                     cy.get('#suggestionList').find('.suggestion-list__item').eq(0).within((el) => {
@@ -135,7 +135,7 @@ describe('Verify Accessibility Support in different input fields', () => {
                     });
 
                     // # Trigger the user autocomplete again
-                    cy.uiGetPostTextBox().clear().type('@').wait(TIMEOUTS.FIVE_SEC).type('{uparrow}{uparrow}{downarrow}');
+                    cy.uiGetPostTextBox().clear().type('@').wait(TIMEOUTS.ONE_SEC).type('{uparrow}{uparrow}{downarrow}');
 
                     // * Verify Accessibility Support in message autocomplete
                     verifyMessageAutocomplete(1);
@@ -147,19 +147,19 @@ describe('Verify Accessibility Support in different input fields', () => {
                     verifyMessageAutocomplete(0);
 
                     // # Trigger the channel autocomplete filter and ensure channel list is cached once
-                    cy.uiGetPostTextBox().clear().type('~').wait(TIMEOUTS.FIVE_SEC);
+                    cy.uiGetPostTextBox().clear().type('~').wait(TIMEOUTS.ONE_SEC);
 
                     // # Trigger the channel autocomplete again
                     cy.uiGetPostTextBox().clear().type('~').wait(TIMEOUTS.FIVE_SEC).type('{downarrow}{downarrow}');
 
                     // * Verify Accessibility Support in message autocomplete
-                    verifyMessageAutocomplete(2, 'channel');
+                    verifyMessageAutocomplete(2);
 
                     // # Press Up arrow and verify if focus changes
                     cy.focused().type('{downarrow}{uparrow}{uparrow}');
 
                     // * Verify Accessibility Support in message autocomplete
-                    verifyMessageAutocomplete(1, 'channel');
+                    verifyMessageAutocomplete(1);
                 });
             });
         });
@@ -307,20 +307,11 @@ function verifySearchAutocomplete(index, type = 'user') {
     });
 }
 
-function verifyMessageAutocomplete(index, type = 'user') {
-    cy.get('#suggestionList').find('.suggestion-list__item').eq(index).should('be.visible').and('have.class', 'suggestion--selected').within((el) => {
-        if (type === 'user') {
-            cy.get('.suggestion-list__ellipsis').invoke('text').then((fullText) => {
-                cy.get('.suggestion-list__main').invoke('text').then((username) => {
-                    const usernameFullNameNickName = getUserMentionAriaLabel(`${username} ${fullText.split(username)[1]}`);
-                    cy.wrap(el).parents('.textarea-wrapper').find('.sr-only').should('have.attr', 'aria-live', 'polite').and('have.text', usernameFullNameNickName);
-                });
-            });
-        } else if (type === 'channel') {
-            cy.wrap(el).invoke('text').then((text) => {
-                const channel = text.split('~')[0].toLowerCase().trim();
-                cy.wrap(el).parents('.textarea-wrapper').find('.sr-only').should('have.attr', 'aria-live', 'polite').and('have.text', channel);
-            });
-        }
+function verifyMessageAutocomplete(index) {
+    cy.get('#suggestionList').find('.suggestion-list__item').eq(index).should('be.visible').and('have.class', 'suggestion--selected');
+    cy.get('#suggestionList').find('.suggestion-list__item').eq(index).invoke('attr', 'id').then((selectedId) => {
+        cy.wrap(selectedId).should('not.equal', '');
+
+        cy.uiGetPostTextBox().should('have.attr', 'aria-activedescendant', selectedId);
     });
 }
diff --git a/webapp/channels/src/components/__snapshots__/textbox.test.tsx.snap b/webapp/channels/src/components/__snapshots__/textbox.test.tsx.snap
index dfc6237122..090cacac25 100644
--- a/webapp/channels/src/components/__snapshots__/textbox.test.tsx.snap
+++ b/webapp/channels/src/components/__snapshots__/textbox.test.tsx.snap
@@ -110,7 +110,6 @@ exports[`components/TextBox should match snapshot with additional, optional prop
           "priorityProfiles": undefined,
           "requestStarted": false,
           "searchAssociatedGroupsForReference": [Function],
-          "textboxId": "someid",
           "triggerCharacter": "@",
           "useChannelMentions": true,
         },
@@ -258,7 +257,6 @@ exports[`components/TextBox should match snapshot with required props 1`] = `
           "priorityProfiles": undefined,
           "requestStarted": false,
           "searchAssociatedGroupsForReference": [Function],
-          "textboxId": "someid",
           "triggerCharacter": "@",
           "useChannelMentions": true,
         },
@@ -406,7 +404,6 @@ exports[`components/TextBox should throw error when new property is too long 1`]
           "priorityProfiles": undefined,
           "requestStarted": false,
           "searchAssociatedGroupsForReference": [Function],
-          "textboxId": "someid",
           "triggerCharacter": "@",
           "useChannelMentions": true,
         },
@@ -554,7 +551,6 @@ exports[`components/TextBox should throw error when value is too long 1`] = `
           "priorityProfiles": undefined,
           "requestStarted": false,
           "searchAssociatedGroupsForReference": [Function],
-          "textboxId": "someid",
           "triggerCharacter": "@",
           "useChannelMentions": true,
         },
diff --git a/webapp/channels/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap b/webapp/channels/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap
index 6715a2b019..12d8bfdc2f 100644
--- a/webapp/channels/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap
+++ b/webapp/channels/src/components/search_bar/__snapshots__/search_bar.test.tsx.snap
@@ -23,11 +23,6 @@ exports[`components/search_bar/SearchBar should match snapshot with search 1`] =
       <div
         class="w-full"
       >
-        <div
-          aria-live="polite"
-          class="sr-only"
-          role="alert"
-        />
         <div
           class="input-wrapper"
         >
@@ -98,11 +93,6 @@ exports[`components/search_bar/SearchBar should match snapshot with search, with
       <div
         class="w-full"
       >
-        <div
-          aria-live="polite"
-          class="sr-only"
-          role="alert"
-        />
         <div
           class="input-wrapper"
         >
@@ -165,11 +155,6 @@ exports[`components/search_bar/SearchBar should match snapshot without search 1`
       <div
         class="w-full"
       >
-        <div
-          aria-live="polite"
-          class="sr-only"
-          role="alert"
-        />
         <div
           class="input-wrapper"
         >
@@ -228,11 +213,6 @@ exports[`components/search_bar/SearchBar should match snapshot without search, w
       <div
         class="w-full"
       >
-        <div
-          aria-live="polite"
-          class="sr-only"
-          role="alert"
-        />
         <div
           class="input-wrapper"
         >
@@ -283,11 +263,6 @@ exports[`components/search_bar/SearchBar should match snapshot without search, w
       <div
         class="w-full"
       >
-        <div
-          aria-live="polite"
-          class="sr-only"
-          role="alert"
-        />
         <div
           class="input-wrapper"
         >
diff --git a/webapp/channels/src/components/suggestion/at_mention_provider/__snapshots__/at_mention_suggestion.test.tsx.snap b/webapp/channels/src/components/suggestion/at_mention_provider/__snapshots__/at_mention_suggestion.test.tsx.snap
index bba7209ac8..ea374a13a5 100644
--- a/webapp/channels/src/components/suggestion/at_mention_provider/__snapshots__/at_mention_suggestion.test.tsx.snap
+++ b/webapp/channels/src/components/suggestion/at_mention_provider/__snapshots__/at_mention_suggestion.test.tsx.snap
@@ -9,7 +9,6 @@ exports[`at mention suggestion Should display nick name of non signed in user 1`
       "id": "userid2",
       "last_name": "b",
       "nickname": "c",
-      "textboxId": "post_textbox",
       "username": "user2",
     }
   }
@@ -20,7 +19,6 @@ exports[`at mention suggestion Should display nick name of non signed in user 1`
 >
   <SuggestionContainer
     data-testid="mentionSuggestion_user2"
-    id="post_textbox_@user2"
     isSelection={false}
     item={
       Object {
@@ -28,20 +26,17 @@ exports[`at mention suggestion Should display nick name of non signed in user 1`
         "id": "userid2",
         "last_name": "b",
         "nickname": "c",
-        "textboxId": "post_textbox",
         "username": "user2",
       }
     }
     matchedPretext="@"
     onClick={[MockFunction]}
     onMouseMove={[MockFunction]}
-    role="option"
     term="@user"
   >
     <li
       className="suggestion-list__item"
       data-testid="mentionSuggestion_user2"
-      id="post_textbox_@user2"
       onClick={[Function]}
       onMouseMove={[Function]}
       role="option"
@@ -108,7 +103,6 @@ exports[`at mention suggestion Should not display nick name of the signed in use
       "isCurrentUser": true,
       "last_name": "b",
       "nickname": "c",
-      "textboxId": "post_textbox",
       "username": "user",
     }
   }
@@ -119,7 +113,6 @@ exports[`at mention suggestion Should not display nick name of the signed in use
 >
   <SuggestionContainer
     data-testid="mentionSuggestion_user"
-    id="post_textbox_@user"
     isSelection={false}
     item={
       Object {
@@ -128,20 +121,17 @@ exports[`at mention suggestion Should not display nick name of the signed in use
         "isCurrentUser": true,
         "last_name": "b",
         "nickname": "c",
-        "textboxId": "post_textbox",
         "username": "user",
       }
     }
     matchedPretext="@"
     onClick={[MockFunction]}
     onMouseMove={[MockFunction]}
-    role="option"
     term="@user"
   >
     <li
       className="suggestion-list__item"
       data-testid="mentionSuggestion_user"
-      id="post_textbox_@user"
       onClick={[Function]}
       onMouseMove={[Function]}
       role="option"
diff --git a/webapp/channels/src/components/suggestion/at_mention_provider/at_mention_provider.tsx b/webapp/channels/src/components/suggestion/at_mention_provider/at_mention_provider.tsx
index 5ddfeec8de..ccec7d61aa 100644
--- a/webapp/channels/src/components/suggestion/at_mention_provider/at_mention_provider.tsx
+++ b/webapp/channels/src/components/suggestion/at_mention_provider/at_mention_provider.tsx
@@ -45,7 +45,6 @@ type Results = {
 type ResultsCallback = (results: Results) => void;
 
 export type Props = {
-    textboxId?: string;
     currentUserId: string;
     channelId: string;
     autocompleteUsersInChannel: (prefix: string) => Promise<ActionResult>;
@@ -59,7 +58,6 @@ export type Props = {
 // users in the channel and users not in the channel. It mixes together results from the local
 // store with results fetched from the server.
 export default class AtMentionProvider extends Provider {
-    public textboxId?: string;
     public currentUserId: string;
     public channelId: string;
     public autocompleteUsersInChannel: (prefix: string) => Promise<ActionResult>;
@@ -77,9 +75,8 @@ export default class AtMentionProvider extends Provider {
     constructor(props: Props) {
         super();
 
-        const {currentUserId, channelId, autocompleteUsersInChannel, useChannelMentions, autocompleteGroups, searchAssociatedGroupsForReference, priorityProfiles, textboxId} = props;
+        const {currentUserId, channelId, autocompleteUsersInChannel, useChannelMentions, autocompleteGroups, searchAssociatedGroupsForReference, priorityProfiles} = props;
 
-        this.textboxId = textboxId;
         this.currentUserId = currentUserId;
         this.channelId = channelId;
         this.autocompleteUsersInChannel = autocompleteUsersInChannel;
@@ -96,8 +93,7 @@ export default class AtMentionProvider extends Provider {
         this.addLastViewAtToProfiles = makeAddLastViewAtToProfiles();
     }
 
-    setProps({currentUserId, channelId, autocompleteUsersInChannel, useChannelMentions, autocompleteGroups, searchAssociatedGroupsForReference, priorityProfiles, textboxId}: Props) {
-        this.textboxId = textboxId;
+    setProps({currentUserId, channelId, autocompleteUsersInChannel, useChannelMentions, autocompleteGroups, searchAssociatedGroupsForReference, priorityProfiles}: Props) {
         this.currentUserId = currentUserId;
         this.channelId = channelId;
         this.autocompleteUsersInChannel = autocompleteUsersInChannel;
@@ -366,24 +362,19 @@ export default class AtMentionProvider extends Provider {
         } else if (this.lastPrefixWithNoResults === this.latestPrefix) {
             this.lastPrefixWithNoResults = '';
         }
-        const mentions: string[] = [];
-
-        // Add the textboxId for each suggestions
-        const modifiedItems = items.map((item) => {
+        const mentions = items.map((item) => {
             if (item.username) {
-                mentions.push('@' + item.username);
+                return '@' + item.username;
             } else if (item.name) {
-                mentions.push('@' + item.name);
-            } else {
-                mentions.push('');
+                return '@' + item.name;
             }
-            return {...item, textboxId: this.textboxId};
+            return '';
         });
 
         resultCallback({
             matchedPretext: `@${this.latestPrefix}`,
             terms: mentions,
-            items: modifiedItems,
+            items,
             component: AtMentionSuggestion,
         });
     }
diff --git a/webapp/channels/src/components/suggestion/at_mention_provider/at_mention_suggestion.test.tsx b/webapp/channels/src/components/suggestion/at_mention_provider/at_mention_suggestion.test.tsx
index 7f4178535e..96f1b7c2e0 100644
--- a/webapp/channels/src/components/suggestion/at_mention_provider/at_mention_suggestion.test.tsx
+++ b/webapp/channels/src/components/suggestion/at_mention_provider/at_mention_suggestion.test.tsx
@@ -20,7 +20,6 @@ describe('at mention suggestion', () => {
         last_name: 'b',
         nickname: 'c',
         isCurrentUser: true,
-        textboxId: 'post_textbox',
     } as Item;
 
     const userid2 = {
@@ -29,7 +28,6 @@ describe('at mention suggestion', () => {
         first_name: 'a',
         last_name: 'b',
         nickname: 'c',
-        textboxId: 'post_textbox',
     } as Item;
 
     const baseProps = {
diff --git a/webapp/channels/src/components/suggestion/at_mention_provider/at_mention_suggestion.tsx b/webapp/channels/src/components/suggestion/at_mention_provider/at_mention_suggestion.tsx
index 42656b729d..a650e4ef6f 100644
--- a/webapp/channels/src/components/suggestion/at_mention_provider/at_mention_suggestion.tsx
+++ b/webapp/channels/src/components/suggestion/at_mention_provider/at_mention_suggestion.tsx
@@ -28,7 +28,6 @@ export interface Item extends UserProfile {
     name: string;
     isCurrentUser: boolean;
     type: string;
-    textboxId?: string;
 }
 
 interface Group extends Item {
@@ -188,10 +187,8 @@ const AtMentionSuggestion = React.forwardRef<HTMLLIElement, SuggestionProps<Item
     return (
         <SuggestionContainer
             ref={ref}
-            role='option'
             {...props}
             data-testid={`mentionSuggestion_${itemname}`}
-            id={`${item.textboxId}_@${itemname}`}
         >
             {icon}
             <span className='suggestion-list__ellipsis'>
diff --git a/webapp/channels/src/components/suggestion/search_suggestion_list.test.tsx b/webapp/channels/src/components/suggestion/search_suggestion_list.test.tsx
deleted file mode 100644
index 2733ffd1c4..0000000000
--- a/webapp/channels/src/components/suggestion/search_suggestion_list.test.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {shallow} from 'enzyme';
-import React from 'react';
-
-import SearchSuggestionList from 'components/suggestion/search_suggestion_list';
-
-import {TestHelper} from 'utils/test_helper';
-
-describe('components/SearchSuggestionList', () => {
-    const baseProps = {
-        open: true,
-        onCompleteWord: jest.fn(),
-        pretext: '',
-        cleared: false,
-        matchedPretext: [],
-        items: [],
-        terms: [],
-        selection: '',
-        components: [],
-        onItemHover: jest.fn(),
-    };
-
-    test('should not throw error when currentLabel is null and label is generated', () => {
-        const userProfile = TestHelper.getUserMock();
-        const item = {
-            ...userProfile,
-            type: 'item_type',
-            display_name: 'item_display_name',
-            name: 'item_name',
-        };
-
-        const wrapper = shallow(
-            <SearchSuggestionList
-                {...baseProps}
-                ariaLiveRef={React.createRef()}
-            />,
-        );
-
-        const instance = wrapper.instance() as SearchSuggestionList;
-        instance.currentLabel = null as any;
-
-        instance.generateLabel(item);
-    });
-});
diff --git a/webapp/channels/src/components/suggestion/search_suggestion_list.tsx b/webapp/channels/src/components/suggestion/search_suggestion_list.tsx
index c5ffce689a..f5cc3ecd22 100644
--- a/webapp/channels/src/components/suggestion/search_suggestion_list.tsx
+++ b/webapp/channels/src/components/suggestion/search_suggestion_list.tsx
@@ -9,52 +9,18 @@ import Popover from 'components/widgets/popover';
 
 import Constants from 'utils/constants';
 
-import type {UserProfile} from './command_provider/app_command_parser/app_command_parser_dependencies';
 import type {Props} from './suggestion_list';
 import SuggestionList from './suggestion_list';
 
-interface Item extends UserProfile {
-    type: string;
-    display_name: string;
-    name: string;
-}
-
 export default class SearchSuggestionList extends SuggestionList {
     popoverRef: React.RefObject<BSPopover>;
     itemsContainerRef: React.RefObject<HTMLDivElement>;
-    suggestionReadOut: React.RefObject<HTMLDivElement>;
-    currentLabel: string;
 
     constructor(props: Props) {
         super(props);
 
         this.popoverRef = React.createRef();
         this.itemsContainerRef = React.createRef();
-        this.suggestionReadOut = React.createRef();
-        this.currentLabel = '';
-    }
-
-    generateLabel(item: Item) {
-        if (item.username) {
-            this.currentLabel = item.username;
-            if ((item.first_name || item.last_name) && item.nickname) {
-                this.currentLabel += ` ${item.first_name} ${item.last_name} ${item.nickname}`;
-            } else if (item.nickname) {
-                this.currentLabel += ` ${item.nickname}`;
-            } else if (item.first_name || item.last_name) {
-                this.currentLabel += ` ${item.first_name} ${item.last_name}`;
-            }
-        } else if (item.type === Constants.DM_CHANNEL || item.type === Constants.GM_CHANNEL) {
-            this.currentLabel = item.display_name;
-        } else {
-            this.currentLabel = item.name;
-        }
-
-        if (this.currentLabel) {
-            this.currentLabel = this.currentLabel.toLowerCase();
-        }
-
-        this.announceLabel();
     }
 
     getContent = () => {
@@ -127,14 +93,10 @@ export default class SearchSuggestionList extends SuggestionList {
                 }
             }
 
-            if (isSelection) {
-                this.currentItem = item;
-            }
-
             items.push(
                 <Component
                     key={term}
-                    ref={(ref: React.RefObject<HTMLDivElement>) => this.itemRefs.set(term, ref)}
+                    id={`sbrSearchBox_item_${term}`}
                     item={item}
                     term={term}
                     matchedPretext={this.props.matchedPretext[i]}
@@ -152,11 +114,6 @@ export default class SearchSuggestionList extends SuggestionList {
                 className='search-help-popover autocomplete visible'
                 placement='bottom'
             >
-                <div
-                    ref={this.suggestionReadOut}
-                    aria-live='polite'
-                    className='hidden-label'
-                />
                 <div ref={this.itemsContainerRef}>
                     {items}
                 </div>
diff --git a/webapp/channels/src/components/suggestion/suggestion.tsx b/webapp/channels/src/components/suggestion/suggestion.tsx
index 31ccda9269..e0b6448dea 100644
--- a/webapp/channels/src/components/suggestion/suggestion.tsx
+++ b/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<HTMLLIElement>, 'onClick' | 'onMouseMove'> {
+export interface SuggestionProps<Item> extends Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick' | 'onMouseMove' | 'role'> {
     // eslint-disable-next-line react/no-unused-prop-types
     item: Item;
 
@@ -27,7 +27,6 @@ const SuggestionContainer = React.forwardRef<HTMLLIElement, SuggestionProps<unkn
         onClick,
         onMouseMove,
 
-        role = 'button',
         tabIndex = -1,
         ...otherProps
     } = props;
@@ -50,9 +49,9 @@ const SuggestionContainer = React.forwardRef<HTMLLIElement, SuggestionProps<unkn
         <li
             ref={ref}
             className={classNames('suggestion-list__item', {'suggestion--selected': isSelection})}
+            role='option'
             onClick={handleClick}
             onMouseMove={handleMouseMove}
-            role={role}
             tabIndex={tabIndex}
             {...otherProps}
         >
diff --git a/webapp/channels/src/components/suggestion/suggestion_box/suggestion_box.jsx b/webapp/channels/src/components/suggestion/suggestion_box/suggestion_box.jsx
index 217d07d7cf..365ce21fd5 100644
--- a/webapp/channels/src/components/suggestion/suggestion_box/suggestion_box.jsx
+++ b/webapp/channels/src/components/suggestion/suggestion_box/suggestion_box.jsx
@@ -191,7 +191,6 @@ export default class SuggestionBox extends React.PureComponent {
 
     constructor(props) {
         super(props);
-        this.suggestionReadOut = React.createRef();
 
         // Keep track of whether we're composing a CJK character so we can make suggestions for partial characters
         this.composing = false;
@@ -817,22 +816,15 @@ export default class SuggestionBox extends React.PureComponent {
                 ref={this.setContainerRef}
                 className={this.props.containerClass}
             >
-                <div
-                    ref={this.suggestionReadOut}
-                    aria-live='polite'
-                    role='alert'
-                    className='sr-only'
-                />
                 <QuickInput
                     ref={this.inputRef}
                     autoComplete='off'
                     {...props}
                     aria-controls='suggestionList'
                     role='combobox'
-                    {...(this.state.selection && {'aria-activedescendant': `${props.id}_${this.state.selection}`}
-                    )}
+                    aria-activedescendant={this.state.selection ? `suggestionList_item_${this.state.selection}` : undefined}
                     aria-autocomplete='list'
-                    aria-expanded={this.state.focused || this.props.forceSuggestionsWhenBlur}
+                    aria-expanded={(this.state.focused || this.props.forceSuggestionsWhenBlur) && this.state.items.length > 0}
                     onInput={this.handleChange}
                     onCompositionStart={this.handleCompositionStart}
                     onCompositionUpdate={this.handleCompositionUpdate}
@@ -841,7 +833,6 @@ export default class SuggestionBox extends React.PureComponent {
                 />
                 {(this.props.openWhenEmpty || this.props.value.length >= this.props.requiredCharacters) && this.state.presentationType === 'text' && (
                     <SuggestionListComponent
-                        ariaLiveRef={this.suggestionReadOut}
                         open={this.state.focused || this.props.forceSuggestionsWhenBlur}
                         pretext={this.pretext}
                         position={this.getListPosition(listPosition)}
diff --git a/webapp/channels/src/components/suggestion/suggestion_box/suggestion_box.test.tsx b/webapp/channels/src/components/suggestion/suggestion_box/suggestion_box.test.tsx
index d519787ebc..9af0662a75 100644
--- a/webapp/channels/src/components/suggestion/suggestion_box/suggestion_box.test.tsx
+++ b/webapp/channels/src/components/suggestion/suggestion_box/suggestion_box.test.tsx
@@ -4,13 +4,25 @@
 import React, {useCallback, useState} from 'react';
 
 import {renderWithContext, screen, userEvent, waitFor} from 'tests/react_testing_utils';
+import {TestHelper} from 'utils/test_helper';
 
 import SuggestionBox from './suggestion_box';
 
+import AtMentionProvider from '../at_mention_provider';
 import type {ResultsCallback} from '../provider';
 import Provider from '../provider';
 import SuggestionList from '../suggestion_list';
 
+jest.mock('utils/utils', () => ({
+    ...jest.requireActual('utils/utils'),
+    getSuggestionBoxAlgn() {
+        return {
+            pixelsToMoveX: 0,
+            pixelsToMoveY: 0,
+        };
+    },
+}));
+
 function TestWrapper(props: React.ComponentPropsWithoutRef<typeof SuggestionBox>) {
     // eslint-disable-next-line react/prop-types
     const [value, setValue] = useState(props.value);
@@ -241,4 +253,90 @@ describe('SuggestionBox', () => {
         // expect(onSuggestionsReceived).toHaveBeenCalledTimes(1);
         expect(screen.getByPlaceholderText('test input')).toHaveValue('@use@use This is important');
     });
+
+    test('keyboard support and ARIA', async () => {
+        const channelId = 'channelId';
+        const userA = TestHelper.getUserMock({id: 'userA', username: 'apple'});
+        const userB = TestHelper.getUserMock({id: 'userB', username: 'banana'});
+
+        const provider = new AtMentionProvider({
+            autocompleteGroups: null,
+            autocompleteUsersInChannel: jest.fn().mockResolvedValue({data: []}),
+            priorityProfiles: [],
+            channelId: 'channelId',
+            currentUserId: 'currentUserId',
+            searchAssociatedGroupsForReference: jest.fn().mockResolvedValue({data: []}),
+            useChannelMentions: false,
+        });
+
+        renderWithContext(
+            <TestWrapper
+                {...makeBaseProps()}
+                providers={[provider]}
+            />,
+            {
+                entities: {
+                    users: {
+                        profilesInChannel: {
+                            [channelId]: new Set([userA.id, userB.id]),
+                        },
+                        profiles: {
+                            [userA.id]: userA,
+                            [userB.id]: userB,
+                        },
+                    },
+                },
+            },
+        );
+
+        const input = screen.getByPlaceholderText('test input');
+        userEvent.click(input);
+
+        // Start without showing the autocomplete list
+        expect(input).toHaveAttribute('aria-autocomplete', 'list');
+        expect(input).toHaveAttribute('aria-expanded', 'false');
+        expect(document.getElementById(input.getAttribute('aria-controls')!)).not.toBeInTheDocument();
+
+        // Type something that shouldn't trigger the autocomplete
+        await userEvent.keyboard('Test ');
+
+        // The autocomplete still shouldn't be visible
+        expect(input).toHaveAttribute('aria-autocomplete', 'list');
+        expect(input).toHaveAttribute('aria-expanded', 'false');
+        expect(document.getElementById(input.getAttribute('aria-controls')!)).not.toBeInTheDocument();
+
+        // Type an at sign to trigger the user autocomplete
+        await userEvent.keyboard('@');
+
+        await waitFor(() => {
+            expect(input).toHaveAttribute('aria-expanded', 'true');
+        });
+
+        // Ensure that the input is correctly linked to the suggestion list
+        expect(document.getElementById(input.getAttribute('aria-controls')!)).toBe(screen.getByRole('listbox'));
+        expect(document.getElementById(input.getAttribute('aria-activedescendant')!)).toBe(screen.getByRole('listbox').firstElementChild);
+
+        // The number of results should also be read out
+        expect(screen.getByRole('status')).toHaveTextContent('2 suggestions available');
+
+        // Pressing the down arrow should change the selection to the second user
+        await userEvent.keyboard('{arrowdown}');
+
+        expect(document.getElementById(input.getAttribute('aria-activedescendant')!)).toBe(screen.getByRole('listbox').lastElementChild);
+
+        // Pressing the up arrow should change the selection back to the first user
+        await userEvent.keyboard('{arrowup}');
+
+        expect(document.getElementById(input.getAttribute('aria-activedescendant')!)).toBe(screen.getByRole('listbox').firstElementChild);
+
+        // Pressing enter should complete the result and close the suggestions
+        await userEvent.keyboard('{enter}');
+
+        expect(input).toHaveValue('Test @apple ');
+
+        expect(input).toHaveAttribute('aria-expanded', 'false');
+        expect(document.getElementById(input.getAttribute('aria-controls')!)).not.toBeInTheDocument();
+        expect(input).not.toHaveAttribute('aria-activedescendant');
+        expect(screen.queryByRole('status')).not.toBeInTheDocument();
+    });
 });
diff --git a/webapp/channels/src/components/suggestion/suggestion_list.test.tsx b/webapp/channels/src/components/suggestion/suggestion_list.test.tsx
deleted file mode 100644
index db06898bb2..0000000000
--- a/webapp/channels/src/components/suggestion/suggestion_list.test.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
-// See LICENSE.txt for license information.
-
-import {shallow} from 'enzyme';
-import React from 'react';
-
-import SuggestionList from 'components/suggestion/suggestion_list';
-
-describe('components/SuggestionList', () => {
-    const baseProps = {
-        open: true,
-        onCompleteWord: jest.fn(),
-        pretext: '',
-        cleared: false,
-        matchedPretext: [],
-        items: [],
-        terms: [],
-        selection: '',
-        components: [],
-        onItemHover: jest.fn(),
-    };
-
-    test('should not throw error when currentLabel is null and label is generated', () => {
-        const wrapper = shallow<SuggestionList>(
-            <SuggestionList
-                {...baseProps}
-                ariaLiveRef={React.createRef()}
-            />,
-        );
-
-        const instance = wrapper.instance();
-        instance.currentLabel = null;
-
-        instance.generateLabel({});
-    });
-});
diff --git a/webapp/channels/src/components/suggestion/suggestion_list.tsx b/webapp/channels/src/components/suggestion/suggestion_list.tsx
index 69f6a06fed..53385f2e7d 100644
--- a/webapp/channels/src/components/suggestion/suggestion_list.tsx
+++ b/webapp/channels/src/components/suggestion/suggestion_list.tsx
@@ -3,16 +3,13 @@
 
 import cloneDeep from 'lodash/cloneDeep';
 import React from 'react';
-import ReactDOM from 'react-dom';
-import {FormattedMessage} from 'react-intl';
+import {FormattedMessage, useIntl} from 'react-intl';
 
 import LoadingSpinner from 'components/widgets/loading/loading_spinner';
 
 import {Constants} from 'utils/constants';
-import {isEmptyObject} from 'utils/utils';
 
 export interface Props {
-    ariaLiveRef?: React.RefObject<HTMLDivElement>;
     inputRef?: React.RefObject<HTMLDivElement>;
     open: boolean;
     position?: 'top' | 'bottom';
@@ -46,9 +43,7 @@ export default class SuggestionList extends React.PureComponent<Props> {
     };
     contentRef: React.RefObject<HTMLUListElement>;
     wrapperRef: React.RefObject<HTMLDivElement>;
-    itemRefs: Map<string, any>;
-    currentLabel: string | null;
-    currentItem: any;
+    itemRefs: Map<string, HTMLElement>;
     maxHeight: number;
 
     constructor(props: Props) {
@@ -57,8 +52,6 @@ export default class SuggestionList extends React.PureComponent<Props> {
         this.contentRef = React.createRef();
         this.wrapperRef = React.createRef();
         this.itemRefs = new Map();
-        this.currentLabel = '';
-        this.currentItem = {};
         this.maxHeight = 0;
     }
 
@@ -71,19 +64,11 @@ export default class SuggestionList extends React.PureComponent<Props> {
             this.scrollToItem(this.props.selection);
         }
 
-        if (!isEmptyObject(this.currentItem)) {
-            this.generateLabel(this.currentItem);
-        }
-
         if (this.props.items.length > 0 && prevProps.items.length === 0) {
             this.updateMaxHeight();
         }
     }
 
-    componentWillUnmount() {
-        this.removeLabel();
-    }
-
     updateMaxHeight = () => {
         if (!this.props.inputRef?.current) {
             return;
@@ -101,42 +86,6 @@ export default class SuggestionList extends React.PureComponent<Props> {
         }
     };
 
-    announceLabel() {
-        const suggestionReadOut = this.props.ariaLiveRef?.current;
-        if (suggestionReadOut) {
-            suggestionReadOut.textContent = this.currentLabel;
-        }
-    }
-
-    removeLabel() {
-        const suggestionReadOut = this.props.ariaLiveRef?.current;
-        if (suggestionReadOut) {
-            suggestionReadOut.textContent = '';
-        }
-    }
-
-    generateLabel(item: any) {
-        if (item.username) {
-            this.currentLabel = item.username;
-            if ((item.first_name || item.last_name) && item.nickname) {
-                this.currentLabel += ` ${item.first_name} ${item.last_name} ${item.nickname}`;
-            } else if (item.nickname) {
-                this.currentLabel += ` ${item.nickname}`;
-            } else if (item.first_name || item.last_name) {
-                this.currentLabel += ` ${item.first_name} ${item.last_name}`;
-            }
-        } else if (item.type === 'mention.channels') {
-            this.currentLabel = item.channel.display_name;
-        } else if (item.emoji) {
-            this.currentLabel = item.name;
-        }
-
-        if (this.currentLabel) {
-            this.currentLabel = this.currentLabel.toLowerCase();
-        }
-        this.announceLabel();
-    }
-
     getContent = () => {
         return this.contentRef.current;
     };
@@ -155,7 +104,7 @@ export default class SuggestionList extends React.PureComponent<Props> {
             const contentTopPadding = this.getComputedCssProperty(content, 'paddingTop');
             const contentBottomPadding = this.getComputedCssProperty(content, 'paddingTop');
 
-            const item = ReactDOM.findDOMNode(this.itemRefs.get(term));
+            const item = this.itemRefs.get(term);
             if (!item) {
                 return;
             }
@@ -272,14 +221,11 @@ export default class SuggestionList extends React.PureComponent<Props> {
                 continue;
             }
 
-            if (isSelection) {
-                this.currentItem = item;
-            }
-
             items.push(
                 <Component
                     key={term}
                     ref={(ref: any) => this.itemRefs.set(term, ref)}
+                    id={`suggestionList_item_${term}`}
                     item={this.props.items[i]}
                     term={term}
                     matchedPretext={this.props.matchedPretext[i]}
@@ -297,7 +243,7 @@ export default class SuggestionList extends React.PureComponent<Props> {
                 ref={this.wrapperRef}
                 className={mainClass}
             >
-                <ul
+                <SuggestionListList
                     id='suggestionList'
                     data-testid='suggestionList'
                     role='listbox'
@@ -310,8 +256,46 @@ export default class SuggestionList extends React.PureComponent<Props> {
                     onMouseDown={this.props.preventClose}
                 >
                     {items}
-                </ul>
+                </SuggestionListList>
+                <SuggestionListStatus items={this.props.items}/>
             </div>
         );
     }
 }
+
+const SuggestionListList = React.forwardRef<HTMLUListElement, React.HTMLAttributes<HTMLUListElement>>((props, ref) => {
+    const {formatMessage} = useIntl();
+
+    return (
+        <ul
+            ref={ref}
+            aria-label={formatMessage({id: 'suggestionList.label', defaultMessage: 'Suggestions'})}
+            {...props}
+        />
+    );
+});
+
+function SuggestionListStatus({items}: Pick<Props, 'items'>) {
+    const {formatMessage} = useIntl();
+
+    const statusText = formatMessage(
+        {
+            id: 'suggestionList.suggestionsAvailable',
+            defaultMessage: '{count, number} {count, plural, one {suggestion} other {suggestions}} available',
+        },
+        {
+            count: items.length,
+        },
+    );
+
+    return (
+        <div
+            className='sr-only'
+            aria-atomic={true}
+            aria-live='polite'
+            role='status'
+        >
+            {statusText}
+        </div>
+    );
+}
diff --git a/webapp/channels/src/components/suggestion/switch_channel_provider.tsx b/webapp/channels/src/components/suggestion/switch_channel_provider.tsx
index 2504b65238..ce8c8ec138 100644
--- a/webapp/channels/src/components/suggestion/switch_channel_provider.tsx
+++ b/webapp/channels/src/components/suggestion/switch_channel_provider.tsx
@@ -256,23 +256,12 @@ const SwitchChannelSuggestion = React.forwardRef<HTMLLIElement, Props>((props, r
     }
     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}
             data-testid={channel.name}
-            role='option'
             aria-labelledby={`${name.toLowerCase().replaceAll(' ', '-')}-item-name`}
             {...props}
-            id={getId()}
         >
             {icon}
             <div className='suggestion-list__ellipsis suggestion-list__flex'>
diff --git a/webapp/channels/src/components/textbox/textbox.tsx b/webapp/channels/src/components/textbox/textbox.tsx
index e71a6fb488..1f7342bd55 100644
--- a/webapp/channels/src/components/textbox/textbox.tsx
+++ b/webapp/channels/src/components/textbox/textbox.tsx
@@ -106,7 +106,6 @@ export default class Textbox extends React.PureComponent<Props> {
 
         this.suggestionProviders.push(
             new AtMentionProvider({
-                textboxId: this.props.id,
                 currentUserId: this.props.currentUserId,
                 channelId: this.props.channelId,
                 autocompleteUsersInChannel: (prefix: string) => this.props.actions.autocompleteUsersInChannel(prefix, this.props.channelId),
@@ -148,7 +147,6 @@ export default class Textbox extends React.PureComponent<Props> {
             for (const provider of this.suggestionProviders) {
                 if (provider instanceof AtMentionProvider) {
                     provider.setProps({
-                        textboxId: this.props.id,
                         currentUserId: this.props.currentUserId,
                         channelId: this.props.channelId,
                         autocompleteUsersInChannel: (prefix: string) => this.props.actions.autocompleteUsersInChannel(prefix, this.props.channelId),
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
index ab7d2fd0cf..39c0adaeb4 100644
--- a/webapp/channels/src/i18n/en.json
+++ b/webapp/channels/src/i18n/en.json
@@ -5528,7 +5528,9 @@
   "suggestion.search.private": "Private Channels",
   "suggestion.search.public": "Public Channels",
   "suggestion.user.isCurrent": "(you)",
+  "suggestionList.label": "Suggestions",
   "suggestionList.noMatches": "No items match <b>{value}</b>",
+  "suggestionList.suggestionsAvailable": "{count, number} {count, plural, one {suggestion} other {suggestions}} available",
   "system_notice.adminVisible": "Only visible to System Admins",
   "system_notice.adminVisible.icon": "Only visible to System Admins Icon",
   "system_notice.body.api3": "If you’ve created or installed integrations in the last two years, find out how <link>recent changes</link> may have affected them.",