diff --git a/webapp/channels/src/components/add_groups_to_channel_modal/__snapshots__/add_groups_to_channel_modal.test.tsx.snap b/webapp/channels/src/components/add_groups_to_channel_modal/__snapshots__/add_groups_to_channel_modal.test.tsx.snap
index 6db1132c5ea3..340ba8e7e1e3 100644
--- a/webapp/channels/src/components/add_groups_to_channel_modal/__snapshots__/add_groups_to_channel_modal.test.tsx.snap
+++ b/webapp/channels/src/components/add_groups_to_channel_modal/__snapshots__/add_groups_to_channel_modal.test.tsx.snap
@@ -157,13 +157,14 @@ exports[`components/AddGroupsToChannelModal should match when renderOption is ca
   <div
     className="more-modal__actions"
   >
-    <div
+    <button
+      aria-label="Add groups to channel"
       className="more-modal__actions--round"
     >
       <i
         className="icon icon-plus"
       />
-    </div>
+    </button>
   </div>
 </div>
 `;
@@ -206,13 +207,14 @@ exports[`components/AddGroupsToChannelModal should match when renderOption is ca
   <div
     className="more-modal__actions"
   >
-    <div
+    <button
+      aria-label="Add groups to channel"
       className="more-modal__actions--round"
     >
       <i
         className="icon icon-plus"
       />
-    </div>
+    </button>
   </div>
 </div>
 `;
@@ -255,13 +257,14 @@ exports[`components/AddGroupsToChannelModal should match when renderOption is ca
   <div
     className="more-modal__actions"
   >
-    <div
+    <button
+      aria-label="Add groups to channel"
       className="more-modal__actions--round"
     >
       <i
         className="icon icon-plus"
       />
-    </div>
+    </button>
   </div>
 </div>
 `;
diff --git a/webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx b/webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx
index 8383269c5a19..0d57931f46cb 100644
--- a/webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx
+++ b/webapp/channels/src/components/add_groups_to_channel_modal/add_groups_to_channel_modal.tsx
@@ -216,9 +216,12 @@ export class AddGroupsToChannelModal extends React.PureComponent<Props, State> {
                     </div>
                 </div>
                 <div className='more-modal__actions'>
-                    <div className='more-modal__actions--round'>
+                    <button
+                        className='more-modal__actions--round'
+                        aria-label='Add groups to channel'
+                    >
                         <i className='icon icon-plus'/>
-                    </div>
+                    </button>
                 </div>
             </div>
         );
diff --git a/webapp/channels/src/components/add_groups_to_team_modal/__snapshots__/add_groups_to_team_modal.test.tsx.snap b/webapp/channels/src/components/add_groups_to_team_modal/__snapshots__/add_groups_to_team_modal.test.tsx.snap
index 239866a98869..4cc13d2c4318 100644
--- a/webapp/channels/src/components/add_groups_to_team_modal/__snapshots__/add_groups_to_team_modal.test.tsx.snap
+++ b/webapp/channels/src/components/add_groups_to_team_modal/__snapshots__/add_groups_to_team_modal.test.tsx.snap
@@ -196,13 +196,14 @@ exports[`components/AddGroupsToTeamModal should match when renderOption is calle
   <div
     className="more-modal__actions"
   >
-    <div
+    <button
+      aria-label="Add groups to team"
       className="more-modal__actions--round"
     >
       <i
         className="icon icon-plus"
       />
-    </div>
+    </button>
   </div>
 </div>
 `;
@@ -247,13 +248,14 @@ exports[`components/AddGroupsToTeamModal should match when renderOption is calle
   <div
     className="more-modal__actions"
   >
-    <div
+    <button
+      aria-label="Add groups to team"
       className="more-modal__actions--round"
     >
       <i
         className="icon icon-plus"
       />
-    </div>
+    </button>
   </div>
 </div>
 `;
diff --git a/webapp/channels/src/components/add_groups_to_team_modal/add_groups_to_team_modal.tsx b/webapp/channels/src/components/add_groups_to_team_modal/add_groups_to_team_modal.tsx
index 82de21a55692..7e0f8de90473 100644
--- a/webapp/channels/src/components/add_groups_to_team_modal/add_groups_to_team_modal.tsx
+++ b/webapp/channels/src/components/add_groups_to_team_modal/add_groups_to_team_modal.tsx
@@ -223,9 +223,12 @@ export class AddGroupsToTeamModal extends React.PureComponent<Props, State> {
                     </div>
                 </div>
                 <div className='more-modal__actions'>
-                    <div className='more-modal__actions--round'>
+                    <button
+                        className='more-modal__actions--round'
+                        aria-label='Add groups to team'
+                    >
                         <i className='icon icon-plus'/>
-                    </div>
+                    </button>
                 </div>
             </div>
         );
diff --git a/webapp/channels/src/components/add_user_to_group_multiselect/multiselect_option/multiselect_option.tsx b/webapp/channels/src/components/add_user_to_group_multiselect/multiselect_option/multiselect_option.tsx
index ceb6c98bc101..2e5e909ed1b0 100644
--- a/webapp/channels/src/components/add_user_to_group_multiselect/multiselect_option/multiselect_option.tsx
+++ b/webapp/channels/src/components/add_user_to_group_multiselect/multiselect_option/multiselect_option.tsx
@@ -56,11 +56,14 @@ const MultiSelectOption = React.forwardRef(({
                 </div>
             </div>
             <div className='more-modal__actions'>
-                <div className='more-modal__actions--round'>
+                <button
+                    className='more-modal__actions--round'
+                    aria-label={`Select Option ${option.label}`}
+                >
                     <i
                         className='icon icon-plus'
                     />
-                </div>
+                </button>
             </div>
         </div>
     );
diff --git a/webapp/channels/src/components/add_users_to_team_modal/add_users_to_team_modal.tsx b/webapp/channels/src/components/add_users_to_team_modal/add_users_to_team_modal.tsx
index cef90a33679b..52395437422e 100644
--- a/webapp/channels/src/components/add_users_to_team_modal/add_users_to_team_modal.tsx
+++ b/webapp/channels/src/components/add_users_to_team_modal/add_users_to_team_modal.tsx
@@ -135,11 +135,14 @@ export class AddUsersToTeamModal extends React.PureComponent<Props, State> {
                     </div>
                 </div>
                 <div className='more-modal__actions'>
-                    <div className='more-modal__actions--round'>
+                    <button
+                        className='more-modal__actions--round'
+                        aria-label='Add users to team'
+                    >
                         <i
                             className='icon icon-plus'
                         />
-                    </div>
+                    </button>
                 </div>
             </div>
         );
diff --git a/webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/add_users_to_role_modal.tsx b/webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/add_users_to_role_modal.tsx
index 8e3fbb6d1308..c8d47a6aa27c 100644
--- a/webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/add_users_to_role_modal.tsx
+++ b/webapp/channels/src/components/admin_console/system_roles/system_role/add_users_to_role_modal/add_users_to_role_modal.tsx
@@ -137,11 +137,14 @@ export class AddUsersToRoleModal extends React.PureComponent<Props, State> {
                     </div>
                 </div>
                 <div className='more-modal__actions'>
-                    <div className='more-modal__actions--round'>
+                    <button
+                        className='more-modal__actions--round'
+                        aria-label='Add users to role'
+                    >
                         <i
                             className='icon icon-plus'
                         />
-                    </div>
+                    </button>
                 </div>
             </div>
         );
diff --git a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.test.tsx b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.test.tsx
index b1bd8c064ccb..9868cecf5bbd 100644
--- a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.test.tsx
+++ b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.test.tsx
@@ -410,6 +410,6 @@ describe('components/avanced_text_editor/advanced_text_editor', () => {
             }),
         );
 
-        expect(screen.getByTestId('editPostAtMentionWarning')).toBeVisible();
+        expect(screen.getByText('Editing this message with an \'@mention\' will not notify the recipient.')).toBeVisible();
     });
 });
diff --git a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx
index 3d572815adfb..9701b8d9de56 100644
--- a/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx
+++ b/webapp/channels/src/components/advanced_text_editor/advanced_text_editor.tsx
@@ -6,7 +6,6 @@ import React, {lazy, useCallback, useEffect, useMemo, useRef, useState} from 're
 import {FormattedMessage, useIntl} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';
 
-import {InformationOutlineIcon} from '@mattermost/compass-icons/components';
 import type {ServerError} from '@mattermost/types/errors';
 import type {SchedulingInfo} from '@mattermost/types/schedule_post';
 
@@ -66,6 +65,7 @@ import EditPostFooter from './edit_post_footer';
 import Footer from './footer';
 import FormattingBar from './formatting_bar';
 import {FormattingBarSpacer, Separator} from './formatting_bar/formatting_bar';
+import MessageWithMentionsFooter from './message_with_mentions_footer';
 import SendButton from './send_button';
 import ShowFormat from './show_formatting';
 import TexteditorActions from './texteditor_actions';
@@ -200,7 +200,6 @@ const AdvancedTextEditor = ({
     const [isMessageLong, setIsMessageLong] = useState(false);
     const [renderScrollbar, setRenderScrollbar] = useState(false);
     const [keepEditorInFocus, setKeepEditorInFocus] = useState(false);
-    const [showMentionHelper, setShowMentionHelper] = useState<boolean>(false);
 
     const readOnlyChannel = !canPost;
     const hasDraftMessage = Boolean(draft.message);
@@ -217,15 +216,6 @@ const AdvancedTextEditor = ({
         GlobalActions.emitLocalUserTypingEvent(channelId, postId);
     }, [channelId, postId]);
 
-    const handleShowMentionHelper = useCallback((message: string) => {
-        if (!isInEditMode) {
-            return;
-        }
-
-        const isMentions = allAtMentions(message).length > 0;
-        setShowMentionHelper(isMentions);
-    }, [isInEditMode]);
-
     const handleDraftChange = useCallback((draftToChange: PostDraft, options: {instant?: boolean; show?: boolean} = {instant: false, show: false}) => {
         if (saveDraftFrame.current) {
             clearTimeout(saveDraftFrame.current);
@@ -564,11 +554,6 @@ const AdvancedTextEditor = ({
         };
     }, [channelId, postId]);
 
-    useEffect(() => {
-        // this checks for the mention helper for initial load of component.
-        handleShowMentionHelper(draft.message);
-    }, [draft.message, handleShowMentionHelper]);
-
     const disableSendButton = Boolean(isDisabled || (!draft.message.trim().length && !draft.fileInfos.length)) || !isValidPersistentNotifications;
     const sendButton = readOnlyChannel || isInEditMode ? null : (
         <SendButton
@@ -684,6 +669,8 @@ const AdvancedTextEditor = ({
 
     const showFormattingSpacer = isMessageLong || showPreview || attachmentPreview || isRHS || isThreadView;
 
+    const containsAtMentionsInMessage = allAtMentions(draft?.message)?.length > 0;
+
     return (
         <form
             id={postId ? undefined : 'create_post'}
@@ -803,30 +790,8 @@ const AdvancedTextEditor = ({
                     )}
                 </div>
             </div>
-            { showMentionHelper ? (
-                <div
-                    className='post-body__info'
-                    data-testid='editPostAtMentionWarning'
-                >
-                    <span className='post-body__info__icon'>
-                        <InformationOutlineIcon
-                            size={14}
-                            color='currentColor'
-                        />
-                    </span>
-                    <span>{
-                        formatMessage({
-                            id: 'edit_post.no_notification_trigger_on_mention',
-                            defaultMessage: "Editing this message with an '@mention' will not notify the recipient.",
-                        })
-                    }</span>
-                </div>) : null
-            }
-            {isInEditMode && (
-                <EditPostFooter
-                    onSave={handleSubmitWrapper}
-                    onCancel={handleCancel}
-                />
+            {isInEditMode && containsAtMentionsInMessage && (
+                <MessageWithMentionsFooter/>
             )}
             <Footer
                 postError={postError}
@@ -837,6 +802,12 @@ const AdvancedTextEditor = ({
                 noArgumentHandleSubmit={handleSubmitWrapper}
                 isInEditMode={isInEditMode}
             />
+            {isInEditMode && (
+                <EditPostFooter
+                    onSave={handleSubmitWrapper}
+                    onCancel={handleCancel}
+                />
+            )}
         </form>
     );
 };
diff --git a/webapp/channels/src/components/advanced_text_editor/footer.tsx b/webapp/channels/src/components/advanced_text_editor/footer.tsx
index 0d2416a63ce2..c39b59d3c60b 100644
--- a/webapp/channels/src/components/advanced_text_editor/footer.tsx
+++ b/webapp/channels/src/components/advanced_text_editor/footer.tsx
@@ -49,13 +49,12 @@ export default function Footer({
                     handleSubmit={noArgumentHandleSubmit}
                 />
             )}
-            {
-                !isInEditMode &&
+            {!isInEditMode && (
                 <MsgTyping
                     channelId={channelId}
                     postId={postId}
                 />
-            }
+            )}
         </div>
     );
 }
diff --git a/webapp/channels/src/components/advanced_text_editor/message_with_mentions_footer.tsx b/webapp/channels/src/components/advanced_text_editor/message_with_mentions_footer.tsx
new file mode 100644
index 000000000000..d2a57dc02e92
--- /dev/null
+++ b/webapp/channels/src/components/advanced_text_editor/message_with_mentions_footer.tsx
@@ -0,0 +1,28 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+import {useIntl} from 'react-intl';
+
+import {InformationOutlineIcon} from '@mattermost/compass-icons/components';
+
+export default function MessageWithMentionsFooter() {
+    const {formatMessage} = useIntl();
+
+    return (
+        <div className='post-body__info'>
+            <span className='post-body__info__icon'>
+                <InformationOutlineIcon
+                    size={14}
+                    color='currentColor'
+                />
+            </span>
+            <span>
+                {formatMessage({
+                    id: 'edit_post.no_notification_trigger_on_mention',
+                    defaultMessage: "Editing this message with an '@mention' will not notify the recipient.",
+                })}
+            </span>
+        </div>
+    );
+}
diff --git a/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx b/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx
index d84e66763c27..3bda7fb1e392 100644
--- a/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx
+++ b/webapp/channels/src/components/channel_invite_modal/channel_invite_modal.tsx
@@ -408,13 +408,9 @@ export class ChannelInviteModal extends React.PureComponent<Props, State> {
                                 {displayName}
                                 {option.is_bot && <BotTag/>}
                                 {isGuest(option.roles) && <GuestTag className='popoverlist'/>}
-                                {displayName === option.username ?
-                                    null :
-                                    <UsernameSpan
-                                        className='ml-2 light'
-                                    >
-                                        {'@'}{option.username}
-                                    </UsernameSpan>
+                                {displayName === option.username ? null : <UsernameSpan className='ml-2 light'>
+                                    {'@'}{option.username}
+                                </UsernameSpan>
                                 }
                                 <UserMappingSpan
                                     className='light'
@@ -425,11 +421,14 @@ export class ChannelInviteModal extends React.PureComponent<Props, State> {
                         </div>
                     </div>
                     <div className='more-modal__actions'>
-                        <div className='more-modal__actions--round'>
+                        <button
+                            className='more-modal__actions--round'
+                            aria-label='Add channel to invite'
+                        >
                             <i
                                 className='icon icon-plus'
                             />
-                        </div>
+                        </button>
                     </div>
                 </div>
             );
diff --git a/webapp/channels/src/components/channel_selector_modal/channel_selector_modal.tsx b/webapp/channels/src/components/channel_selector_modal/channel_selector_modal.tsx
index 3d0dc0f7d7bb..e58356839a80 100644
--- a/webapp/channels/src/components/channel_selector_modal/channel_selector_modal.tsx
+++ b/webapp/channels/src/components/channel_selector_modal/channel_selector_modal.tsx
@@ -186,9 +186,12 @@ export class ChannelSelectorModal extends React.PureComponent<Props, State> {
                     </div>
                 </div>
                 <div className='more-modal__actions'>
-                    <div className='more-modal__actions--round'>
+                    <button
+                        className='more-modal__actions--round'
+                        aria-label='Select channel'
+                    >
                         <i className='icon icon-plus'/>
-                    </div>
+                    </button>
                 </div>
             </div>
         );
diff --git a/webapp/channels/src/components/more_direct_channels/list_item/__snapshots__/list_item.test.tsx.snap b/webapp/channels/src/components/more_direct_channels/list_item/__snapshots__/list_item.test.tsx.snap
index 86d9dbc0382a..a2152955555c 100644
--- a/webapp/channels/src/components/more_direct_channels/list_item/__snapshots__/list_item.test.tsx.snap
+++ b/webapp/channels/src/components/more_direct_channels/list_item/__snapshots__/list_item.test.tsx.snap
@@ -33,13 +33,14 @@ exports[`ListItem should match snapshot when rendering GroupChannel 1`] = `
   <div
     className="more-modal__actions"
   >
-    <div
+    <button
+      aria-label="Add option "
       className="more-modal__actions--round"
     >
       <i
         className="icon icon-plus"
       />
-    </div>
+    </button>
   </div>
 </div>
 `;
@@ -62,13 +63,14 @@ exports[`ListItem should match snapshot when rendering user 1`] = `
   <div
     className="more-modal__actions"
   >
-    <div
+    <button
+      aria-label="Add option "
       className="more-modal__actions--round"
     >
       <i
         className="icon icon-plus"
       />
-    </div>
+    </button>
   </div>
 </div>
 `;
diff --git a/webapp/channels/src/components/more_direct_channels/list_item/list_item.tsx b/webapp/channels/src/components/more_direct_channels/list_item/list_item.tsx
index ef84121c1a8e..a6281aa36a90 100644
--- a/webapp/channels/src/components/more_direct_channels/list_item/list_item.tsx
+++ b/webapp/channels/src/components/more_direct_channels/list_item/list_item.tsx
@@ -3,6 +3,7 @@
 
 import classNames from 'classnames';
 import React, {useCallback} from 'react';
+import {useIntl} from 'react-intl';
 
 import Timestamp from 'components/timestamp';
 
@@ -43,6 +44,7 @@ const ListItem = React.forwardRef((props: Props, ref?: React.Ref<HTMLDivElement>
         add,
         select,
     } = props;
+    const intl = useIntl();
 
     const {last_post_at: lastPostAt} = option;
 
@@ -75,9 +77,15 @@ const ListItem = React.forwardRef((props: Props, ref?: React.Ref<HTMLDivElement>
             }
 
             <div className='more-modal__actions'>
-                <div className='more-modal__actions--round'>
+                <button
+                    className='more-modal__actions--round'
+                    aria-label={intl.formatMessage({
+                        id: 'more_direct_channels.new_convo_add.label',
+                        defaultMessage: 'Add option {label}',
+                    }, {label: option.label})}
+                >
                     <i className='icon icon-plus'/>
-                </div>
+                </button>
             </div>
         </div>
     );
diff --git a/webapp/channels/src/components/profile_popover/profile_popover.scss b/webapp/channels/src/components/profile_popover/profile_popover.scss
index 467aff2807b7..ae0d6e82c28d 100644
--- a/webapp/channels/src/components/profile_popover/profile_popover.scss
+++ b/webapp/channels/src/components/profile_popover/profile_popover.scss
@@ -6,10 +6,13 @@
     z-index: 1070;
 }
 
+$profilePopoverWidth: 240px;
+$profilePopoverBorderWidth: 1px;
+
 .user-profile-popover {
-    width: 240px;
-    max-height: calc(100vh - 240px);
-    border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+    width: $profilePopoverWidth;
+    max-height: calc(100vh - $profilePopoverWidth);
+    border: $profilePopoverBorderWidth solid rgba(var(--center-channel-color-rgb), 0.16);
     border-radius: 4px;
     background: var(--center-channel-bg);
     box-shadow: var(--elevation-4);
@@ -17,8 +20,10 @@
 
     .user-profile-popover-title {
         display: flex;
+        max-width: calc($profilePopoverWidth - 40px);
         flex-wrap: nowrap;
         align-items: center;
+        justify-content: flex-start;
         justify-content: end;
         padding: 12px 8px 12px 8px;
 
@@ -103,7 +108,7 @@
             padding-inline-start: 16px;
             text-align: center;
 
-            >h5 {
+            >p {
                 margin: 0;
                 font-family: Metropolis, sans-serif;
                 font-size: 20px;
@@ -144,8 +149,9 @@
 
         .user-profile-popover__email {
             display: flex;
+            width: calc($profilePopoverWidth - (2 * $profilePopoverBorderWidth));
             align-items: center;
-            margin: 0 16px 10px 16px;
+            padding: 0 16px 10px 16px;
             justify-self: start;
 
             i.icon-email-outline {
diff --git a/webapp/channels/src/components/profile_popover/profile_popover_controller.tsx b/webapp/channels/src/components/profile_popover/profile_popover_controller.tsx
index 2df7234eea63..4f873b5dad51 100644
--- a/webapp/channels/src/components/profile_popover/profile_popover_controller.tsx
+++ b/webapp/channels/src/components/profile_popover/profile_popover_controller.tsx
@@ -21,13 +21,10 @@ import React, {useCallback, useState} from 'react';
 import type {Channel} from '@mattermost/types/channels';
 import type {UserProfile} from '@mattermost/types/users';
 
-import {A11yClassNames} from 'utils/constants';
+import {A11yClassNames, OverlaysTimings, OverlayTransitionStyles, RootHtmlPortalId} from 'utils/constants';
 
 import ProfilePopover from './profile_popover';
 
-const PROFILE_POPOVER_OPENING_DELAY = 300;
-const PROFILE_POPOVER_CLOSING_DELAY = 500;
-
 interface Props<TriggerComponentType> {
 
     /**
@@ -90,17 +87,14 @@ export function ProfilePopoverController<TriggerComponentType = HTMLSpanElement>
 
     const {isMounted, styles: transitionStyles} = useTransitionStyles(floatingContext, {
         duration: {
-            open: PROFILE_POPOVER_OPENING_DELAY,
-            close: PROFILE_POPOVER_CLOSING_DELAY,
+            open: OverlaysTimings.FADE_IN_DURATION,
+            close: OverlaysTimings.FADE_OUT_DURATION,
         },
+        initial: OverlayTransitionStyles.START,
     });
 
-    const combinedFloatingStyles = Object.assign({}, floatingStyles, transitionStyles);
-
     const clickInteractions = useClick(floatingContext);
-
     const dismissInteraction = useDismiss(floatingContext);
-
     const role = useRole(floatingContext);
 
     const {getReferenceProps, getFloatingProps} = useInteractions([
@@ -128,7 +122,7 @@ export function ProfilePopoverController<TriggerComponentType = HTMLSpanElement>
             </TriggerComponent>
 
             {isMounted && (
-                <FloatingPortal id='root-portal'>
+                <FloatingPortal id={RootHtmlPortalId}>
                     <FloatingOverlay
                         id='user-profile-popover-floating-overlay'
                         className='user-profile-popover-floating-overlay'
@@ -137,7 +131,7 @@ export function ProfilePopoverController<TriggerComponentType = HTMLSpanElement>
                         <FloatingFocusManager context={floatingContext}>
                             <div
                                 ref={refs.setFloating}
-                                style={combinedFloatingStyles}
+                                style={{...floatingStyles, ...transitionStyles}}
                                 className={classNames('user-profile-popover', A11yClassNames.POPUP)}
                                 {...getFloatingProps()}
                             >
diff --git a/webapp/channels/src/components/profile_popover/profile_popover_full_name.tsx b/webapp/channels/src/components/profile_popover/profile_popover_full_name.tsx
index a3c5d7f9df1c..655570b277f8 100644
--- a/webapp/channels/src/components/profile_popover/profile_popover_full_name.tsx
+++ b/webapp/channels/src/components/profile_popover/profile_popover_full_name.tsx
@@ -34,7 +34,7 @@ const ProfilePopoverFullName = ({
             data-testid={`popover-fullname-${username}`}
             className='user-profile-popover__heading'
         >
-            <h5 title={fullname}>{fullname}</h5>
+            <p title={fullname}>{fullname}</p>
             {sharedIcon}
         </div>
     );
diff --git a/webapp/channels/src/components/team_selector_modal/team_selector_modal.tsx b/webapp/channels/src/components/team_selector_modal/team_selector_modal.tsx
index 1a1cab14f59e..abfabdbe36a5 100644
--- a/webapp/channels/src/components/team_selector_modal/team_selector_modal.tsx
+++ b/webapp/channels/src/components/team_selector_modal/team_selector_modal.tsx
@@ -190,9 +190,15 @@ export class TeamSelectorModal extends React.PureComponent<Props, State> {
                     </div>
                 </div>
                 <div className='more-modal__actions'>
-                    <div className='more-modal__actions--round'>
+                    <button
+                        className='more-modal__actions--round'
+                        aria-label={this.props.intl.formatMessage({
+                            id: 'add_teams_to_scheme.select_team.label',
+                            defaultMessage: 'Select team {label}',
+                        }, {label: option.label})}
+                    >
                         <i className='fa fa-plus'/>
-                    </div>
+                    </button>
                 </div>
             </div>
         );
diff --git a/webapp/channels/src/i18n/en.json b/webapp/channels/src/i18n/en.json
index dbfe020d3a79..4bfd77eb82a6 100644
--- a/webapp/channels/src/i18n/en.json
+++ b/webapp/channels/src/i18n/en.json
@@ -239,6 +239,7 @@
   "add_teams_to_scheme.confirmation.message": "This team is already selected in another team scheme, are you sure you want to move it to this team scheme?",
   "add_teams_to_scheme.confirmation.title": "Team Override Scheme Change?",
   "add_teams_to_scheme.modalTitle": "Add Teams to Team Selection List",
+  "add_teams_to_scheme.select_team.label": "Select team {label}",
   "add_user_to_channel_modal.add": "Add",
   "add_user_to_channel_modal.cancel": "Cancel",
   "add_user_to_channel_modal.help": "Type to find a channel. Use ↑↓ to browse, ↵ to select, ESC to dismiss.",
@@ -4378,6 +4379,7 @@
   "more_channels.view": "View",
   "more_direct_channels.directchannel.deactivated": "{displayname} - Deactivated",
   "more_direct_channels.directchannel.you": "{displayname} (you)",
+  "more_direct_channels.new_convo_add.label": "Add option {label}",
   "more_direct_channels.new_convo_note": "This will start a new conversation. If you're adding a lot of people, consider creating a private channel instead.",
   "more_direct_channels.new_convo_note.full": "You've reached the maximum number of people for this conversation. Consider creating a private channel instead.",
   "more_direct_channels.title": "Direct Messages",
diff --git a/webapp/channels/src/sass/components/_modal.scss b/webapp/channels/src/sass/components/_modal.scss
index 7802c22f94d5..e7b0bc3afeda 100644
--- a/webapp/channels/src/sass/components/_modal.scss
+++ b/webapp/channels/src/sass/components/_modal.scss
@@ -932,7 +932,8 @@
         display: none;
         width: 32px;
         height: 32px;
-        line-height: 32px;
+        padding: 0;
+        border: none;
         opacity: 0.75;
         text-align: center;
     }
diff --git a/webapp/channels/src/utils/constants.tsx b/webapp/channels/src/utils/constants.tsx
index 8e8feea60933..b2da43fe4eae 100644
--- a/webapp/channels/src/utils/constants.tsx
+++ b/webapp/channels/src/utils/constants.tsx
@@ -2011,7 +2011,6 @@ export const Constants = {
     },
     OVERLAY_TIME_DELAY_SMALL: 100,
     OVERLAY_TIME_DELAY: 400,
-    OVERLAY_DEFAULT_TRIGGER: ['hover', 'focus'],
     PERMALINK_FADEOUT: 5000,
     DEFAULT_MAX_USERS_PER_TEAM: 50,
     DEFAULT_MAX_CHANNELS_PER_TEAM: 2000,
@@ -2233,5 +2232,23 @@ export const scheduledPosts = {
     SCHEDULED_POSTS: 'scheduled_posts',
 };
 
+/**
+ * This is the ID of the root portal container that is used to render modals and other components
+ * that need to be rendered outside of the main app container.
+ */
+export const RootHtmlPortalId = 'root-portal';
+
+export const OverlaysTimings = {
+    CURSOR_REST_TIME_BEFORE_OPEN: 400, // in ms
+    FADE_IN_DURATION: 250, // in ms
+    FADE_OUT_DURATION: 150, // in ms
+};
+
+export const OverlayTransitionStyles = {
+    START: {
+        opacity: 0,
+    },
+};
+
 export default Constants;